HTML 영역 이미지 핫스팟을 사용하는 방법

이번에는 html 영역사진핫스팟 사용 방법과 html 영역 사진 핫스팟 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

표시는 주로 이미지 maps에 사용됩니다. 이 표시를 통해 이미지 맵에서 효과 영역(핫스팟이라고도 함)을 설정할 수 있으므로 사용자가 마우스를 지정된 영역을 클릭하면 자동으로 미리 정의된 페이지로 연결됩니다. 기본 구문 구조는 다음과 같습니다:

<area class=type id＝Value href＝url alt＝text shape＝area-shape coods＝value>

class 및 id: 핫스팟의 유형 및 ID 번호를 각각 지정합니다.

alt: 핫스팟을 설정하는 데 사용되는 대체 텍스트입니다.

href: 핫스팟에 연결된 URL 주소를 설정하는 데 사용됩니다.

shape 및 coords: 핫스팟의 모양과 크기를 설정하는 데 사용되는 두 가지 주요 매개변수입니다. 기본 사용법은 다음과 같습니다:

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。 
<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。 
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。

참고: x1, y1, x2, y2 이 점의 위치는 창 크기가 아닌 그림을 기준으로 결정됩니다.

표시는 이미지 맵에서 활성 영역을 나누는 데 사용되므로 분할된 활성 영역은 이미지 맵의 영역 내에 있어야 하므로 표시를 ​​사용하여 영역을 나누기 전에 이미지 맵의 범위를 설정하고 지정된 이미지 맵의 이름을 설정하려면 다른 HTML 마크를 사용해야 합니다. 즉,

본 예제의 소스코드는 다음과 같습니다.

<img src="http://www.webjx.com/images/logo.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0"> 
<map name="newbook"> 
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。"> 
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。"> 
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。"> 
</map>

본 글에서 소개한 효과 제작 시 주의할 점

1. 태그의 usemap 및 ismap 매개변수 값은