Question

我想为此图像地图添加辅助功能，因此除了（或代替）悬停外，它们还可以在页面中进行选项卡，区域形状将聚焦以显示文本。（我知道它现在正在使用鼠标悬停，我只是想先解决焦点问题。）

以下是我尝试使用的示例：

<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，我搜索其他解决方案的时间很短。我只想让一个标签穿过页面时区域形状变得集中。

提前谢谢！

Answer 1

通过imagemap进行制表似乎对我来说很合适：

<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输出窗口上。）

Answer 2

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

demo 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;
}

无法标签到图像地图区域

2 个答案: