No focus rectangle on area tag in IE9
I find that my focus rectangle doesn't show up in IE9 when I tab between the elements in the image map below. The tabbing still works fine and the focus displays OK in Chrome.
<img name="scr5diagram" src="scr5-diagram.gif" width="909" height="600" id="scr5diagram" usemap="#m_scr5diagram" alt="Interactive diagram showing areas of focus" />
<map name="m_scr5diagram" id="m_scr5diagram">
<area href="#" class="fader" id="s5b1" shape="poly" coords="35,32,157,32,159,33,160,35,160,125,159,127,157,128,35,128,33,127,32,125,32,35,33,33,35,32,35,32" alt="" />
<area href="#" class="fader" id="s5b2" shape开发者_高级运维="poly" coords="259,32,381,32,383,33,384,35,384,125,383,127,381,128,259,128,257,127,256,125,256,35,257,33,259,32,259,32" alt="" />
<area href="#" class="fader" id="s5b3" shape="poly" coords="483,32,605,32,607,33,608,35,608,125,607,127,605,128,483,128,481,127,480,125,480,35,481,33,483,32,483,32" alt="" />
</map>
Please help. Thanks.
According to the HTML Spec:
The first x and y coordinate pair and the last should be the same to close the polygon. When these coordinate values are not the same, user agents should infer an additional coordinate pair to close the polygon.
Try using another tool to generate coordinates. The following test works in IE9:
<!doctype html>
<html lang="en">
<head>
<title>Poly Rectangle Test</title>
</head>
<body>
<img id="stackoverflow" name="stackoverflow" src="http://www.stackoverflow.com/favicon.ico" width="32" height="32" usemap="#stackmap" alt="stackoverflow.com"/>
<map id="stackmap" name="stackmap">
<area href="http://www.stackoverflow.com" shape="poly" coords="0,16,16,0" alt="Point one"/>
<area href="http://www.stackoverflow.com" shape="poly" coords="16,16,16,0" alt="Point two"/>
<area href="http://www.stackoverflow.com" shape="poly" coords="0,0,16,16" alt="Point three"/>
<area href="http://www.stackoverflow.com" shape="poly" coords="0,16,16,16" alt="Point four"/>
</map>
</body>
</html>
加载中,请稍侯......
精彩评论