수색…
통사론
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
매개 변수
| 태그 / 속성 | 값 |
|---|---|
<img> | 다음은 <img> 에서 사용할 이미지 맵 특정 속성입니다. 일반 <img> 속성이 적용됩니다. |
usemap | 해시 기호가 앞에 name 맵의 name 입니다. 예를 들어, name="map" 인 name="map" 경우, 이미지에는 usemap="#map" 이 있어야합니다. |
<map> | |
name | 지도를 식별하는지도의 이름입니다. 이미지의 usemap 속성과 함께 사용됩니다. |
<area> | 다음은 <area> 특정 속성입니다. 때 href 지정되면, 만들기 <area> 링크, <area> 또한 앵커 태그 (의 속성을 모두 지원 <a> 제외) ping . MDN 문서를 참조하십시오. |
alt | 이미지가 지원되지 않는 경우 표시 할 대체 텍스트입니다. href 가 <area> 에도 설정되어있는 경우에만 필요합니다. |
coords | 선택 가능한 영역을 설명하는 좌표입니다. shape="polygon" 일 경우 쉼표로 구분 된 "x, y"쌍 목록으로 설정해야합니다 (즉, shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). shape="rectangle" 일 때, left, top, right, bottom 으로 설정해야합니다. shape="circle" 경우 centerX, centerY, radius 로 설정해야합니다. |
href | 지정된 경우 하이퍼 링크의 URL입니다. 이것이 생략되면, <area> 는 하이퍼 링크를 나타내지 않을 것이다. |
shape | <area> 의 모양. 하도록 설정할 수 있습니다 default 전체 이미지를 (더 선택 coords 필요한 속성 없음), circle 또는 circ 원, 대한 rectangle 또는 rect 구형 및 polygon 또는 poly 모서리 점에 의해 지정된 다각형 영역. |
비고
이미지 맵 소개
기술
이미지 맵은 대개 하이퍼 링크 역할을하는 클릭 가능한 영역이있는 이미지입니다.
이미지는 <img> 태그에 의해 정의되고 <map> 는 각 클릭 가능 영역을 나타 내기 위해 <area> 태그가있는 <map> 태그로 정의됩니다. usemap 및 name 속성을 사용하여 이미지와 맵을 바인드하십시오.
기본 예제
아래 이미지의 각 도형을 클릭 할 수 있도록 이미지 맵을 만들려면 :
코드는 다음과 같습니다.
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
커서가 포인터가 될 때 브라우저가 영역을 인식하는지 확인해야합니다. JSFiddle의 라이브 데모 를 보거나 아래의 데모를보십시오.
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow