imagemap의 하이라이트 사각형

초보자 용 질문의 비트가 아니며 최근에는별로 중요하지 않습니다.imagemap의 하이라이트 사각형

나는 단순히 수평 툴바 인 이미지 맵을 가지고 있습니다. 내가 궁극적으로하고 싶은 것은 마우스가 마우스 위로 움직일 때까지 영역의 rgba 직사각형을 겹쳐서 그린다는 것입니다.

하지만 여기서는 그다지 많은 것을 할 수 없습니다. 지역 요소가 조금 다르게 작동하는 것 같습니다. 어떻게해야합니까에서 순수 자바 스크립트하시기 바랍니다. jquery가 없습니다.

<html> 
<body> 
<script> 
    function tellname(txt){ 
    document.getElementById("info").innerHTML=txt; 
    } 
</script> 
<style> 
    .highlight:hover { 
     outline: 1px solid orange; 
    } 
</style> 
    <img src="toolbar.png" usemap="#toolbar" /> 
    <map name="#toolbar"> 
     <area class="highlight" shape="rect" coords="0,0,25,25" onclick="tellname('Centre')"/> 
     <area class="highlight" shape="rect" coords="25,0,50,25" onclick="tellname('Reset Camera')" /> 
     <area class="highlight" shape="rect" coords="50,0,75,25" onclick="tellname('Camera Preset')" /> 
     <area class="highlight" shape="rect" coords="95,0,120,25" onclick="tellname('Stop Render')" /> 
     <area class="highlight" shape="rect" coords="120,0,145,25" onclick="tellname('Restart Render')" /> 
     <area class="highlight" shape="rect" coords="160,0,185,25" onclick="tellname('Pause Render')" /> 
     <area class="highlight" shape="rect" coords="190,0,205,25" onclick="tellname('Start Render')" /> 
    </map> 
    <div id='info'</div> 
</body> 
</html>

출처

2017-03-17 Matt

영역에는 스타일이 없습니다. 실제 툴바를 만드십시오. 그런 레이아웃에 이미지를 사용하면 수십 년 동안 사용되지 않게되었습니다. – Thomas

<map name=#toolbar">는 <map name="toolbar">해야한다.

그러나 나는지도와 지역을 가지고 놀았지만 필요에 따라 작동하지 못했습니다. <map> 및 <area>에 대한 호버 설정에 문제가 있습니다. 어쩌면 전문가가 이유를 설명 할 수 있습니다.

(1) 여기에 귀하의 링크에 대해 별도의 이미지를 사용하여 대안은있다 :

<html> 
<head> 
<style type="text/css"> 
    img:hover { 
    border:2px solid red; 
} 
</style> 

</head> 
<body> 
<a href="page1.html"><img src="img_1.jpg" /></a> 
<a href="page2.html"><img src="img_2.jpg" /></a> 
<a href="page3.html"><img src="img_3.jpg" /></a> 
</body> 
</html>

(2) 또는,이 게시물을 참조 : Make a border to the areas in the image maps 만들기위한 ImageMapster, 매우 유연한 라이브러리에 대한 참조를 포함 많은 종류의 이미지 맵.

ImageMapster를 사용하여 분해 된 부품 다이어그램의 이미지 맵을 동적으로 생성합니다. 각 이미지에 대해 관련 맵은 데이터베이스의 맵 좌표에서 작성됩니다. 이미지의 섹션을 스크롤 할 때 매핑 된 영역의 세부 정보는 텍스트 상자에 표시됩니다. 기능은 tellname(txt)과 동일합니다.

출처

2017-03-17 03:47:13

답변

관련 문제