이미지 맵 영역으로 탭할 수 없음

이 이미지 맵에 접근성을 추가하여 호버링을 추가하거나 (또는 대신하여) 페이지를 탭하여 영역 모양에 집중하여 텍스트를 표시합니다. (저는 마우스 오버를 사용하고 있다는 것을 알고 있습니다. 초점 문제를 먼저 고치려고합니다.)이미지 맵 영역으로 탭할 수 없음

여기 내가 사용하려고 무엇의 예 :

<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

. fyi. 사실, 이미지 맵을 사용하지 않는 것이 최선의 방법이 될 것입니다. – 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

을 필요로하지 않습니다

를

<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

이미지 맵 영역으로 탭할 수 없음

답변

관련 문제