이미지지도 이미지 바꾸기 onMouseOver

Question

이미지의 한 부분으로 전체 페이지 이미지를 올려 놓으려고하면 이미지가 원래 색의 회색 버전 & 흰색 이미지로 바뀝니다. 이미지 맵 & onMouseOver를 사용하여이 작업을 시도했지만 성공하지 못했습니다. 사용되는 이미지는 색상과 흑백의 두 가지뿐입니다.

흑백 이미지의 한 부분에 마우스를 올리면 모든 것이 컬러 버전으로 바뀌고 onMouseOut은 흑백으로 되돌아갑니다. 나는이 블로그를 스플래시 화면으로 사용하고 있고, 잡은 부분은 사이트로의 링크 역할을 할 것입니다. 도움을

감사

Answer 1

당신은 당신의 호버 영역은 다음이, (주 작동하여 적절한 이미지로 배경 색상을 교체하고 a에 border가해야 순수 CSS를 사용하여 "광장"인 괜찮다면 단지 일러스트를 위해). 파이어 폭스, IE7, IE8에서 테스트 :

HTML : (IE7-8 버그 수정 됨)

<a href="#"><span class="img"></span></a> 

CSS :

물론

body { 
margin: 300px 218px 178px 400px; /*see explanation below css*/ 
width: 22px; /*total width of a tag including padding and borders*/ 
height: 22px; /*total height of a tag including padding and borders*/ 
} 

a { /*warning, do not give this position: use margin to position it*/ 
width: 20px; 
height: 20px; 
display: block; 
border: 1px solid red; 
overflow: visible; 
/*deleted margin from this: moved to body*/ 
} 
a span.img { 
position: absolute; /*this gives it block display by default*/ 
top: 0; 
left: 0; 
z-index: -1; 
background-color: yellow; /*bw image here*/ 
width: 640px; /*image width*/ 
height: 500px; /*image height*/ 
} 
a:hover span.img { 
background-color: blue; /*color image here*/ 
} 
/*deleted the a:hover span.img:hover as it was not needed after all*/ 

IE6는 그런 다음 문제가되는 경우 span:hover을 인식하려면 자바 스크립트로 뭔가를 할 필요가 있습니다.

덧붙여 편집 :a 태그가 IE 브라우저의 정의 된 영역 외부로 이동하는 것을 발견했습니다. 이를 방지하기 위해, 본체는 여백이 left 및 top 놓으 a 태그 및 right 및 bottom가 이미지 크기를 뺀 a 태그의 전체 폭의 차이을해야되도록 배치 틀림 없다.