지도태그, 지역태그 사용법-CSS 튜토리얼-php.cn

지도태그, 지역태그 사용법

php中世界最好的语言

풀어 주다： 2018-03-19 09:20:11

원래의

2945명이 탐색했습니다.

이번에는 지도태그와 지역태그 사용법을 알려드리겠습니다. 지도태그와 지역태그의 주의사항은 무엇인가요?

map 태그의 목적: 은 img 태그에 바인딩되며 클라이언트 이미지의 특정 영역에 특별한 의미를 부여하는 데 자주 사용됩니다. 새 문서로 이동하려면 이 영역을 클릭하세요. .

지도 태그는 img 태그에 바인딩되어 있으므로 지도 태그에 ID 및 이름 속성 을 추가해야 합니다. 그러면 img 태그의 usemap 속성 이 map 태그(브라우저에 따라 usemap 속성은 두 값 중 하나를 받기 때문에 일반적으로 name 및 id 속성은 모두 동일한 값으로 작성됨) 및 Area 태그와 함께 사용됩니다.

샘플 코드는 다음과 같습니다.

<!doctype html>
<html>
    <head></head>
    <body>
        <img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中国地图" usemap="#province"/>
	<map name="province" id="province">
	    <area shape="rect" coords="80,112,110,125"  alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin">
	    <area shape="rect" coords="77,209,110,229"  alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045">
	    <area shape="rect" coords="150,176,185,192"  alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638">
	    <area shape="rect" coords="197,236,235,261"  alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569">
	    <area shape="rect" coords="170,300,211,325"  alt="云南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207">
	    <area shape="circle" coords="227,200,8"  alt="甘肃" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="240,177,5"  alt="宁夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	    <area shape="circle" coords="285,133,8"  alt="内蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
	</map>
    </body>
</html>

로그인 후 복사

표시 효과는 다음과 같습니다.

이것이 단지 사진이라면 매우 보일 것입니다. 지도 태그는 각 지방의 지역에 의미를 부여합니다. 여기에서 Xinjiang 지역을 클릭하면 아래와 같이 Baidu Encyclopedia of Xinjiang으로 이동합니다.

이렇게 하면 직접 할 수 있습니다. 각 지방의 역사와 문화를 이해하는 것이 일일이 찾아보는 것보다 훨씬 인간적인 것 같습니다.

area 태그는 이미지에서 특별한 의미가 부여되는 영역을 정의합니다. 주요 값은 alt, cooreds, href, Shape, target 등입니다.

1 alt 속성

정의: 지정된 영역 텍스트를 대체합니다.

참고: href 속성을 작성하는 경우 alt 속성이 필수입니다

2. Cooreds 속성

정의: 해당 영역의 좌표를 정의합니다

참고: 함께 사용됩니다. 모양 속성으로

　　 (1) 모양 속성이 각형이면 해당 영역이 직사각형이라는 뜻이고, cooreds 속성 값은 (x1, y1, x2, y2)입니다. 여기서 x1, y1은 왼쪽 상단 좌표가 x2, y2가 오른쪽 하단 모서리 좌표

　 (2) 모양 속성이 원이면 해당 영역이 원이라는 뜻이고, 좌표 속성 값은 는 (x, y, radius)입니다. 여기서 x, y는 원의 중심 좌표이고, radius는 원의 반경입니다.

　 (3) 모양 속성이 폴리인 경우 해당 영역이 다각형이고 cooreds 속성 값은 (x1, y1, x2, y2, x3, y3...xn,yn)이며, 브라우저가 자동으로 다각형인 꼬리를 닫으므로 다각형의 각 꼭지점의 좌표를 지정합니다. 좌표는 첫 번째 좌표와 같을 필요는 없습니다.

3. href 속성

정의 : 해당 영역에 연결된 대상을 정의

설명 : href 속성은 일반적으로 3가지 값을 갖는다

(1) 절대 경로 : 주로 사용 (href="https://www.baidu.com")

　과 같은 다른 웹사이트를 가리키는 데 사용됩니다. (2) 상대 경로: 일반적으로 (href="//와 같이 자신의 웹사이트 내의 파일을 가리키는 데 사용됩니다. favicon.ico")

　　(3) 앵커 링크: 일반적으로 (href="#header")

4, 모양 속성

정의와 같이 페이지의 앵커를 가리키는 데 사용됩니다. : 해당 영역의 모양을 정의합니다

지침: (1) 기본값: 모든 영역을 지정합니다

(2) 각형 : 해당 영역을 직사각형으로 지정

(3) 원형 : 해당 영역을 원형으로 지정

(4) 폴리 : 해당 영역을 다각형으로 지정