<area shape="rect"> 标签的“coords”属性不是“left,top,right,bottom”格式。firefox中的错误

Question

当我尝试在 Firefox 中运行我的代码时出现此错误。它在 IE 中工作正常。实际上我试图通过定义图像映射来实现图像的翻转效果

<map name="planetmap"> 
    <area class="a1" shape="rect" coords="420,120,380,100" alt="Ring" href="#"/> 
    <area class="a2" shape="rect" coords="300,330,400,250" alt="Ring" href="#"/> 
    <area class="a3" shape="rect" coords="610,190,580,270" alt="Ring" href="#"/> 
    <area class="a4" shape="rect" coords="450,250,550,400" alt="Ring" href="#"/>
</map>

当我将鼠标悬停在图像上时，请帮助我解决此问题，但 Firefox 中没有打开任何内容。

Answer 1

看看错误。“左、上、右下”：在图像地图坐标系中，“0,0”为左上角。所以第一个值必须小于第三个值，第二个值必须小于第四个值。

<area class="a1" shape="rect" coords="420,120,380,100" alt="Ring" href="#"/>
<area class="a2" shape="rect" coords="300,330,400,250" alt="Ring" href="#"/>
<area class="a3" shape="rect" coords="610,190,580,270" alt="Ring" href="#"/>
<area class="a4" shape="rect" coords="450,250,550,400" alt="Ring" href="#"/>

在第一个中，380 < 420 和 100 < 120。两者都是错误的。在第二个中，250 < 330。在第三个中，580 < 610。第四个看起来是正确的。

四个区域中的三个区域的数字无效，并且通常彼此之间甚至不一致。