> 웹 프론트엔드 > CSS 튜토리얼 > Lesson01_08 이미지맵_기본튜토리얼

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

WBOY
풀어 주다: 2016-05-16 12:08:54
원래의
1306명이 탐색했습니다.

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 속성 설정 값은 원형 좌표와 반경이고, 후자는 반경입니다.

    예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예시: 코드는 다음과 같습니다: 효과는 다음과 같습니다: 예시: 코드는 다음과 같습니다: : 효과는 다음과 같습니다: 예시: 코드는 다음과 같습니다: 효과는 다음과 같습니다:
  • 관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿