<img> 태그에 있는 usemap 속성을 이용하면 하나의 사진에 구역을 나눠 서로 다른 사이트로 향하는 링크를 만들 수 있습니다.


ex)


<img src="사진.png" alt="" usemap="#네임이름">


<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">

<map name="네임이름">

<area shape="rect" coords="시작x좌표,시작y좌표,끝x좌표.끝y좌표" href="주소">


</map>


실제로 해보겠습니다.


(유즈맵 적용 전 사진)





(유즈맵 적용 후 사진)


이미지맵을 적용하기 전 사진에서는 마우스를 사진에 올렸을 때 마우스 포인터에 아무런 변화가 없지만

이미지맵을 적용한 후 사진에는 사진박스, 네이버박스, 다음박스에 마우스를 올렸을 때 포인터가 변하는걸 볼 수 있으며

클릭시 해당 사이트로 이동하는 것을 볼 수 있다.


적용 소스

<img src="https://t1.daumcdn.net/cfile/tistory/2451BA4C596D6FFE1B" alt="" usemap="#named">

<map name="named">

<area shape="rect" coords="22,19,225,209" href="http://wishml.tistory.com/1">

<area shape="rect" coords="255,80,435,135" href="http://wishml.tistory.com/2">

<area shape="rect" coords="255,160,435,208" href="http://wishml.tistory.com/4">

</map>

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 정의 및 특징  (0) 2017.07.22
HTML5 태그 미지원 브라우저  (0) 2017.07.19
CSS 초기화 파일(초기화 코드)  (0) 2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅)  (0) 2017.07.15
UTF-8 과 EUC-kr  (0) 2017.07.14

+ Recent posts