집 > 기사 > 웹 프론트엔드 > HTML 영역 이미지 핫스팟을 사용하는 방법

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

php中世界最好的语言원래의: 2018-02-11 10:47:402722검색

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

03fc64e1e502d5ba947b3a9af06d2d2a 표시는 주로 이미지 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 이 점의 위치는 창 크기가 아닌 그림을 기준으로 결정됩니다.

03fc64e1e502d5ba947b3a9af06d2d2a 표시는 이미지 맵에서 활성 영역을 나누는 데 사용되므로 분할된 활성 영역은 이미지 맵의 영역 내에 있어야 하므로 03fc64e1e502d5ba947b3a9af06d2d2a 표시를 사용하여 영역을 나누기 전에 이미지 맵의 범위를 설정하고 지정된 이미지 맵의 이름을 설정하려면 다른 HTML 마크를 사용해야 합니다. 즉, 394997e944b044378b87bf48701350e0 태그에 usemap="newbook" ismap 매개변수를 설정하여 이미지 맵(newbook)에 대한
reference
를 나타냅니다.

2. dab9f699790ab0922e596ecb9f6677d5 표시를 사용하여 이미지 맵의 활성 영역을 설정하고 이름을 newbook으로 지정합니다.

3 03fc64e1e502d5ba947b3a9af06d2d2a 표시를 사용하여 이미지 맵의 위치를 3개로 나눕니다. 세 권의 책을 읽고 링크 매개변수 href를 설정합니다.

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

<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. a1f02c36ba31691bcfe87b2722de723b 태그의 usemap 및 ismap 매개변수 값은 dab9f699790ab0922e596ecb9f6677d5 태그의 name 매개변수 값과 동일해야 합니다. 즉, "이미지 맵 이름"이 일치해야 합니다.
2. 동일한 "이미지 맵"의 모든 핫스팟 영역은 이미지 맵의 범위 내에 있어야 합니다. 즉, 모든 03fc64e1e502d5ba947b3a9af06d2d2a 태그는 dab9f699790ab0922e596ecb9f6677d5

3. 03fc64e1e502d5ba947b3a9af06d2d2a 태그의 cords 매개변수에서 설정한 좌표 형식은 모양 매개변수에서 설정한 좌표 형식과 동일해야 합니다. 모양 매개변수이지만 다각형 영역의 정점 좌표는 코드에 설정됩니다.

HTML과 XHTML의 차이점

HTML에서 03fc64e1e502d5ba947b3a9af06d2d2a 요소에는 닫는 태그가 필요하지 않습니다.

그러나 XHTML에서는 03fc64e1e502d5ba947b3a9af06d2d2a 요소가 올바르게 닫혀야 합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!