0

我想为此图像地图添加可访问性，因此除了（或代替）悬停之外，它们可以通过页面进行选项卡，并且区域形状将变得集中以显示文本。（我知道它现在正在使用鼠标悬停，我只是想先解决焦点问题）。

这是我尝试使用的示例：

<img src=img.png align='center' alt='some text' height='480px' width='1000px'
usemap='#imagemap'>

<map name = 'imagemap'>

<area shape='rect' style='position:relative' id=upperLeft coords='22,70,245,190'
tabIndex='0' alt='alt upper left text' onMouseOver=addUpperLeftText(this);></map>
<span id='upper_left'></span>

function addUpperLeftText(e){
    var upper_left_text = 'Upper left text';
    var cssObj = {
            'position': 'absolute',
            'width': '180px',
            'top': '155px',
            'left': '55px',
            'font-size': '18px',
            'line-height': '20px'
    };
    $('<p>').appendTo('#upper_left').text(upper_left_text).css(cssObj);
    e.onmouseover = null;
}

我尝试添加 tabindex 和一个空的 href，但我对其他解决方案的搜索却很短。我只想在一个选项卡通过页面时使区域形状成为焦点。

先感谢您！

4

2 回答 2

3

通过图像映射选项卡似乎对我来说很好：

<a href="#">Clickable element</a><br />
<img src="http://engagetolearn.com/ETL/virtualzoo/map.gif" usemap="#my-map" />
<map name="my-map">
    <area shape="rect" coords="0,0,100,100" href="#" />
    <area shape="rect" coords="100,0,200,100" href="#" />
</map>

http://jsfiddle.net/kboucher/YUvZU/

（确保在切换之前将焦点放在 jsFiddle 输出窗口上。）

于 2013-01-04T19:03:02.947 回答
1

你可以用绝对定位的锚元素做到这一点，甚至不需要 jQuery

演示 jsfiddle

<div class="imgContainer">
    <img src="//placehold.it/1000x480" align="center" alt="some text" height="480" width="1000" />
    <a id="hotspot1" href="javascript:void(0)"></a>
    <a id="hotspot2" href="javascript:void(0)"></a>
    <a id="hotspot3" href="javascript:void(0)"></a>
</div>

.imgContainer {
    position:relative;
    width:1000px;
    height:480px;
}

.imgContainer a {
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid #eee;
}

.imgContainer a:focus, .imgContainer a:hover {
    background:rgba(255, 0, 0, .5);
}

#hotspot1 {
    top:20px;
    left:77px;
}

#hotspot2 {
    top:180px;
    left:320px;
}

#hotspot3 {
    top:200px;
    left:177px;
}
于 2013-01-04T18:57:36.313 回答