客户端图片地图

客户端图片映射由<img/>标记的usemap属性启用，并由特殊的<map>和<area>扩展标记定义。

将要形成映射的图片使用<img/>标记作为普通图片插入到页面中，但它带有一个名为usemap的额外属性。

usemap属性的值是将在<map>标记中用于链接map和image标记的值。<map>和<area>标记定义了所有图片坐标和相应的链接。

map标记内的<area>标记指定形状和坐标，以定义图片上每个可单击热点的边界。

<img src ="./src/css-jquery.png" alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- 创建图片映射 -->

<map name = "html">
   <!-- 创建可点击热点区域 -->
   <area shape = "rect" coords = "2,2,80,80" 
      href = "/css/index.htm" alt = "CSS教程" target = "_blank" />
   
   <area shape = "circle" coords = "127,43,42" alt = "jQuery教程" 
      href = "/jquery/index.htm" target = "_blank" />
</map>

设置鼠标敏感图片

HTML和XHTML标准提供了一个特性，允许我们在单个图片中嵌入许多不同的链接。
可以根据图片上可用的不同坐标在单个图片上创建不同的链接。
一旦不同的链接被添加到不同的坐标，我们可以点击图片的不同部分来打开不同的网页。

这种对鼠标敏感的图片称为图片映射。

图像映射是一种用户界面技术，用户可以单击图像内部的任何位置，单击的位置会影响单击的结果。

创建图片映射有两种方法：

服务器端图片映射-这是由<img>标记的ismap属性启用的，需要访问服务器和相关的图片映射处理应用程序。

客户端图片映射-这是使用<img>标记的usemap属性以及相应的<map>和<area>标记创建的。

服务器端图片映射

将图片放入一个超链接中，并使用ismap属性使其成为特殊图片，当用户单击图片中的某个位置时，
浏览器将鼠标指针的坐标以及<a>标记中指定的URL一起传递到web服务器。
服务器使用鼠标指针坐标来确定要将哪个网页传递回浏览器。

使用ismap时，<a>标记包含的href属性必须包含服务器端的应用程序(如cgi或PHP脚本等)的URL，以便根据传递的坐标处理传入的请求。

鼠标位置的坐标是从图片左上角开始计数的屏幕像素，从(0,0)开始。坐标将添加到URL的末尾。

例如，如果用户单击图片左上角的20个像素和30个像素。

<a href = "./src/imageslink-server.cgi" target = "_self"> 
   <img ismap src = "./src/logo.png" alt = "HTML教程" border = "0"/> 
</a>

浏览器将会以./src/imageslink-server.cgi?20,30的形式请求web服务器。
服务器通过cgi脚本对这些坐标进行处理，并返回对应的网页。

如果是php脚本，我们可以在请求地址中添加一个参数，便于获取鼠标在图片上点击的坐标。
imageslink-server.php?map=

imageslink-server.php

<?php
    if(isset($_GET["map"])){
        $map = $_GET["map"];
        list($x,$y) = explode(",",$map);
        $x = ltrim($x, "? ");
        echo "坐标x：".$x;
        echo "坐标y：".$y;
        echo "<br>";
        if($x<86){
            echo "转向css页面";
        }
        else{
            echo "转向jquery页面";
        }
    }
    else{
        echo "无法获取鼠标的点击坐标";
    }
?>

使用图片作为超链接很简单。我们只需在超链接的地方放一个img标签。

<a href = "https://www.onitroad.com" target = "_self"> 
   <img src = "/images/logo.png" alt = "教程网" border = "0"/> 
</a>

点击图片后，就可以访问 "https://www.onitroad.com"。

坐标系

坐标的实际值完全取决于所讨论的形状。

矩形(rect)=x1，y1，x2，y2

x1和y1是矩形左上角的坐标；x2和y2是右下角的坐标。

圆(circle)=xc，yc，半径

xc和yc是圆心的坐标，radius是圆的半径。以200,50为中心，半径为25的圆的属性为coords=“200,50,25”

多边形(poly)=x1，y1，x2，y2，x3，y3...xn，yn

不同的x-y对定义多边形的顶点(点)，从一个点到下一个点绘制一条“线”。20,40,40像素的多边形在其顶部有20,40个像素点。

所有坐标都相对于图片的左上角(0,0)。每个形状都有一个相关的URL。可以使用图片软件比如PS,来知道不同位置的坐标。