image map alternative (어쩌면 자바 스크립트?)

Question

괜찮 았으므로 이미지 맵을 만드는 대신 가볍게 사용할 수 있을지 궁금합니다. (나는 포토샵에서 그것을 조롱 한) 좀 같이,

그리고 그들이 이상 공중 선회 할 때 다이어그램 점등의 섹션이 :

는 기본적으로, 나는이 이미지를 먹고 싶어 :

(나는 아직 이름하지 않은) 다른 부분 동일한 기능을 수행 할 수 있어야한다. 또한, 나중에 슬라이딩 링크가 해당 섹션 뒤에 표시되도록 자바 스크립트를 사용할 수 있기를 원합니다. (대략 어떻게 해야할지 잘 알고 있으므로 괜찮습니다)

누구에게 의견이 있습니까? 무엇을 검색해야하는지에 대한 일반적인 지침은 훌륭합니다.

Answer 1

것은 가지고 두 이미지 1) 일반 이미지 2) 공동 좌표에 hover, 이미지 hoverimages 변경 및 on mouseout가 원래로 변경하면 이미지 여기

<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" /> 

<map name="Map" id="Map">  
    <area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('higlightedimageonhover-imagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/> 

</map> 



<script> 


function onHover6(image1) 
{ 
document.getElementById('originalimage').src=image1; 
} 
function onout6(image2) 
{ 
document.getElementById('originalimage').src=image2; 
} 
</script> 

을 공중 선회 할 때 higligthed 특정 섹션 영상.

Answer 2

지도 태그는 좋을 것이고 실제로 외부 플러그인을 필요로하지 않으므로 중량이 아닙니다. 그러나 일반적인 아이디어가 필요하기 때문에 : 일단 오류로 인해지도 태그를 사용할 수 없었습니다. 그래서 원본 이미지를 다른 이미지 (원래 이미지와 동일하게 배치 된 이미지)로 분할 한 다음 별도의 부분에서 이벤트를 사용했습니다. 힘들지 만 해결 방법이 있습니다.

Answer 3

CSS는 서클을 사용하기 쉽습니다. 이 같은 시작할 수 있습니다 :

FIDDLE

width: 140px; 
height: 140px; 
background: rgba(255, 0, 0, 0.3); 
-moz-border-radius: 70px; 
-webkit-border-radius: 70px; 
border-radius: 70px; 

은 도움 바랍니다. 세 div 만

http://jsfiddle.net/w8zTz/

몇 CSS :

Answer 4

그것은 나를 여기가 중간에 그 흰색 모양을 달성하기 어렵지만, 간단한 시도의

HTML

<div class="rojo"></div> 
<div class="azul"></div> 
<div class="amar"></div> 

css

div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;} 
.rojo {background:red; top:0; left:30px;} 
.azul {background:cornflowerblue; top:60px; left:0;} 
.amar {background:gold; top:60px; left:70px;} 
div:hover {opacity:1; z-index:-1} 

(Z- 색인은 div를 다른 뒤에두고 투명하게합니다.)

희망이 있습니다. :)