CSS 이미지 맵?

Question

나는 다음과 같은 코드도 링크 인 이미지를 가지고 :

<a href="../www.google.com"><img src="pages/squirrely.png" /></a> 

그들은 잘 작동,하지만 난 당신이 사진의 일반적인 중간을 클릭 한 경우에만 링크가되고 싶어요. 이미지의 바깥 쪽 영역을 클릭하면 링크가 발생하지 않습니다. lin의 너비와 높이를 변경하려고 시도했지만 작동하지 않았습니다. 내 CSS는 :

#magazine a { 
width: 100px; 
height: 100px; 
border: 5px solid #fff; 
} 

Answer 1

나는이 경우 이미지 맵 작업,하지만 이런 일을 할 것이라고는 :

는

html로는 :

는

<div class='container'> 
<img .../> 
<a ... ></a> 
</div> 

는 CSS :

.container { 
position: relative; 
} 
.container img { 
width: 100px; 
height: 100px; 
border: 5px solid #fff; 
} 
.container a { 
display: block; 
width: 60px; 
height: 60px; 
position: absolute; 
top: 25px; 
left: 25px; 
} 

Basicly이 당신의 연결을두고 귀하의 이미지 위에. 나는이 방법으로 링크의 위치와 치수로 플레이하는 것이 훨씬 쉽다는 것을 알게되었습니다. (코드를 테스트하지는 않았지만 제대로 작동해야한다고 생각합니다.)

Answer 2

매핑을위한 좌표를 선택할 수있는 여러 웹 응용 프로그램이 있습니다. 나는이 프로젝트에 당신을 도움이되기를 바랍니다

http://www.maschek.hu/imagemap/imgmap

: 나는 큰 성공이 일을 시도했습니다!