[attribute] HTML - usemap 속성 - 이미지를 이미지맵으로 지정 (= usemap속성 = 유즈맵속성|유스맵속성)

1. usemap 예제 - <img> 경우
2. usemap 정의
3. usemap 구문
4. usemap 예제 - <object> 경우

usemap 예제 - <img> 경우

 

<img src="homzzang.jpg" alt="홈짱닷컴" usemap="#hz" width="200" height="200">

<map name="hz">

  <area shape="rect" coords="30,30,60,60" alt="HTML" href="html.php">

  <area shape="rect" coords="30,70,60,100" alt="CSS" href="css.php">

  <area shape="circle" coords="30,150,30" alt="JS" href="js.php">

</map>

usemap 정의

 

이미지를 이미지맵(= 클릭 가능 영역 가진 이미지)으로 지정.

 

• <map> 태그의 name (또는, id) 속성과 연동시킴.
• <img> 태그가 <a>나 <button> 요소의 자손인 경우엔 사용 불가.
• <img> 태그 경우 - 모든 브라우저 지원.
• <object> 태그 경우 - 파이어폭스만 지원.

 

usemap 구문

 

• <img usemap="#mapname">
• <object usemap="#mapname">

  

---

[속성값]

 

#mapname

<ma> 태그의 name(또는 id) 속성값 앞에 샵(#) 기호 붙임.

 

usemap 예제 - <object> 경우

※ Firefox 브라우저만 지원.

 

<object data="homzzang.jpg" usemap="#hz" width="200" height="200"></object>

<map name="hz">

  <area shape="rect" coords="30,30,60,60" alt="HTML" href="html.php">

  <area shape="rect" coords="30,70,60,100" alt="CSS" href="css.php">

  <area shape="circle" coords="30,150,30" alt="JS" href="js.php">

</map>