기대해도 쫗아~ Let’s go!!!

이미지맵은 하나의 이미지를 불러들인 후 그 이미지에 영역을 지정해서 각각의 하이퍼링크를 할수있도록 도와주는 역할을 하는 기능입니다.
그런데 이 이미지 맵으로도 '롤오버 이미지 효과'를 구현할 수가 있다는거 아시나요?
아래의 내용을 참고하시길 바랍니다.

<img src=top_1.gif name=leewidth=87 height=87 border=0 useMap=#button>
<map name=button>
 <area onmouseover="if(document.images) lee.src='top_2.gif'" onmouseout="if(document.images) lee.src='top_1.gif'" shape=CIRCLE coords=43,43,43 href="http://www.naver.com/">
</map>

드림위버의 이미지맵 기능을 이용하신 후 약간의 내용만 수정하심 됩니다.
그럼 내용설명입니다.

㉠ name=lee  : 이미지이름명
㉡ useMap=#button   : 맵기능이름명
㉢ onmouseover="if(document.images) lee.src='top_2.gif'"   : 마우스오버="if(document.images) 이미지이름명.src='나타날이미지경로'"
㉣ onmouseout="if(document.images) lee.src='top_1.gif'"   : 마우스아웃="if(document.images) 이미지이름명.src='원래이미지경로'function hrefMark(){ } 

----------------------------------------------------

이미지맵 태그에서의 script활용법


마우스오버(onMouseOver)를 삽입한 소스
<area shape="rect" coords="364,12,500,28" href="#" onMouseOver="링크경로명">

온클릭으로 팝업창 스크립트를(onClick)를 삽입한 소스
<area shape="rect" coords="364,12,500,28" href="#" onClick="javascript:window.open('링크경로명','','width=510,height=220,top=100,left=100,statusbar=no,scrollbars=yes,toolbar=no');">

자바스크립트 재알창을 삽입한소스
<area shape="rect" coords="364,12,500,28" href="#" onClick="javascript:alert('테스트입니다.');">


* 이미지맵 점선 테두리 없애는 소스*

onFocus="this.blur()"