이미지맵 사용하기, old is but goodies

*이미지맵 사용

// 좋지못한 예
<img src="images/ABC_com.gif" alt="abc com logo" width="100" height="200"/>

===================================================================

// 바른 예
<img src="images/ABC_com.gif" alt="abc com logo"/>

위의 좋지못한 예처럼 width="" height="" 같은 동적 언어는 CSS에서 사용할 것

 

<img src="images/ABC_com.gif" alt="abc com logo" class="logo" />

class="이름" 지정하면 CSS 편집시 해당 이름 편집가능

alt="" 는 이미지를 대신하는 문구, 검색 키워드, 웹접근성(시각)

-이미지 오류등으로 보이지 않을때 대신 보여지는 문구-

 

*이미지 좌표 클릭으로 링크 띄우기

imagemapic 프로그램으로 해당 이미지 선택해서 Circle 툴로 좌표 지정후에

지정된 곳 우클릭 edit properties 선택후 링크할 주소와 열리는 방식 지정해주기

<a href=""><img src="images/seoul_map.gif" alt="seoul_map.gif" usemap="#seoul_map" style="border: 0;" /></a>

<map name="seoul_map">
    <area shape="circ" coords="242,166,29" href=" http://www.daum.net" target="_blank" alt="" />
    <area shape="circ" coords="167,197,25.5" href="http://www.google.com" target="_blank" alt="" />
    <area shape="circ" coords="313,269,26.5" href="http://www.naver.com" target="_blank" alt="" />

</map>

중요한건 <map name="seoule_map.gif"> 와 위쪽 usemap="#seoul_map.gif" 을 일치 시켜야한다. 

<map name="seoule_map">, usemap="#seoul_map" 이런식으로 하나 바꾸면 다른것도 바꿔주기.