이미지 매핑 생성하기

이미지 맵은 그림의 서로 다른 구역이 서로 다른 링크에 대응하는 것이다.
이미지 맵은 다음과 같습니다. (1) 서버 쪽 이미지 맵: 클릭한 좌표를 서버에 보내고 서버의 스크립트에 의해 결정됩니다.(2) 클라이언트 이미지 매핑: 클릭 위치에 따라 링크 목적을 결정합니다.
를 통해 <img/> 및 설정을 추가합니다.<map> <area> 원소는 비치는 시작<map> 원소는 각 구역을 표시하고 그림을 4개 구역으로 나누려면 4개의area를 사용한다.<area> 원소는name 속성만 있습니다.다음은 area 요소의 속성을 소개합니다. (1)shape: 반드시 필요한 속성입니다. 구역의 모양을 설명하는 데 사용됩니다. rectangle\poly\circle\default는 선택할 수 있습니다. default는 아직 정의되지 않은 구역을 가리킵니다.(2)coords: 영역의 좌표를 지정합니다.예를 들어 직사각형은 4개의 좌표가 있는데 앞의 두 개는 왼쪽 상각의 x, y 좌표이고 뒤의 두 개는 오른쪽 하각의 x, y 좌표이다.(3)href와nohref:href가 지정한 목적의 링크입니다. href 속성을 지정하지 않으면nohref,nohref="nohref"(4)target:<map>와 같습니다.
주의점: (1) <a> 에서usemap 속성을 설정합니다.(2) <img>에name 속성을 설정합니다.
<html>  
    <head><title>Home</title></head>  
    <body>  
        <object data = "flash_sample.swf"></object>  
        <a href = "http://blog.csdn.net/xiazdong" target = "_blank"><img src="images/apple.jpg"/></a>  
        <img src = "images/apple.jpg" alt = "apple" usemap = "#map1" height = "100" width = "100"/>  
        <map name = "map1">  
            <area shape = "rect" coords = "0,0,50,50" href = "ImageDemo.html">  
            <area shape = "rect" coords = "50,50,100,100" href = "http://www.google.com/">  
            <area shape = "rect" coords = "0,50,50,100" href = "http://www.baidu.com/">  
            <area shape = "rect" coords = "50,0,100,50" href = "http://www.renren.com/">  
        </map>  
    </body>  
</html>  

좋은 웹페이지 즐겨찾기