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 に答える