無法標籤到圖像地圖區域

我想爲此圖像地圖添加輔助功能，因此除了（或不是）懸停之外，還可以通過頁面標籤，區域形狀將變得集中以顯示文本。（我知道它現在使用的是鼠標懸停，我只是試圖首先解決焦點問題）。無法標籤到圖像地圖區域

這裏是什麼，我想用一個例子：

<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，和我其他的解決方案搜索已經拿出短。我只想讓區域形狀變得聚焦，當一個標籤頁通過。

預先感謝您！

來源

2013-01-04 Phil

，這不是增加無障礙任何東西。僅供參考。事實上，不使用圖像地圖將是你最好的選擇 – albert

你是對的@albert，但我試圖調整我已經有的東西。在應用下面建議的修復之後，我修改了它，以便它不再是圖像映射。 – Phil

我感覺自己像一個雞巴後說，沒有提供任何信息....感謝沒有采取這樣的。我的錯。 – albert

你可以用絕對定位錨元素做到這一點，甚至不要求的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; 
}

來源

2013-01-04 18:57:36 MikeM

謝謝，我不認爲這是jQuery，但我是如何處理圖像映射。我用替換標籤，並在實施您的建議後解決。 – Phil

通過圖像映射Tab鍵似乎只是正常工作對我來說：

<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-04 19:03:02

無法標籤到圖像地圖區域

回答

相關問題