이미지맵은 하나의 이미지를 불러들인 후 그 이미지에 영역을 지정해서 각각의 하이퍼링크를 할수있도록 도와주는 역할을 하는 기능입니다.
그런데 이 이미지 맵으로도 '롤오버 이미지 효과'를 구현할 수가 있다는거 아시나요?
아래의 내용을 참고하시길 바랍니다.
<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()"
'웹 퍼블리싱 > Html' 카테고리의 다른 글
파비콘만들기 (홈페이지 상단 타이틀이미지) (0) | 2018.10.12 |
---|---|
ul,li, ol 가운데 정렬하는 방법 (0) | 2018.08.14 |
유튜브 동영상 z-index 값 조정하기 (0) | 2015.07.23 |
[HTML 기초] &nbsp; &amp; &lt; &gt; &quot; 의 의미와 사용법은? (0) | 2015.07.17 |
유튜브 동영상 자동 재생하기 (0) | 2015.07.17 |