Lesson01_08 이미지맵_기본튜토리얼

1. 이미지 하이퍼링크:
형식:

2. 이미지맵이란 무엇인가요?
사진을 여러 영역으로 나누고 각 영역은 다른 URL 주소를 가리킵니다

3. 이미지 맵 생성 방법
(1) 먼저 이미지의 각 핫스팟 영역에 대한 모양, 위치 좌표, URL 주소 정보를 정의하는 과정을 이미지 핫스팟 매핑이라고 합니다.
이 프로세스는 태그를 사용하여 설명됩니다. 여기서 name 속성은 이 핫스팟 매핑의 이름을 지정합니다.
(2) 이미지 핫스팟 매핑의 각 영역은 태그로 설명됩니다.
HREF 부분은 nohref로 표시될 수도 있으며 이는 이 영역을 클릭하는 것이 유효하지 않음을 나타냅니다. (3) 정의한 후 다음과 같이 이미지 태그에 usemap이라는 속성 설정을 추가해야 합니다.

예: 코드는 다음과 같습니다.

<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="http://www.loncer.cn">
<area shape="rect" coords="0,50,150,50" href="http://www.thinkme.cn">
<area shape="rect" coords="50,0,100,50" href="http://www.sina.cn">
</map>
<img src="/upload/200729134227624.gif" usemap="#mymap">

효과는 다음과 같습니다.

모양 속성 설정 지침:

Rect는 직사각형 영역을 정의하며 coords 속성은 직사각형의 왼쪽 상단 모서리와 오른쪽 하단 모서리의 좌표로 설정됩니다. 각 좌표 값은 기호로 구분됩니다.

Poly는 폴리곤 영역을 정의하며, coords 속성 설정값은 폴리곤의 각 정점의 좌표값입니다.

cicle은 원형 영역을 정의하며, coords 속성 설정 값은 원형 좌표와 반경이고, 후자는 반경입니다.

예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예시: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예시: 코드는 다음과 같습니다: : 효과는 다음과 같습니다: 예시: 코드는 다음과 같습니다: 효과는 다음과 같습니다: