创建图片的元素

元素，属性如下：

  • src:设置图片的位置（显示图片）
  • width：设置图片的宽度
  • height：设置图片的高度
  • alt：设置图片的备用内容（当图片加载不出来时显示的内容）

元素放在 中任意位置都是可以的，可以放表单中也可以放表单外面

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin SelectInpuf_Test</title>
</head>
<body>
    <form>
        <a href="" target="_blank"> 
            <!-- 让图片具有超连接的效果 -->
            <img src="image.jpg" width="563px" height="422px" alt="下载按钮">
        <a>
    </form>
</body>
</html>

分析：点击的范围设置长宽的一个方框区域。

HTML5的图像制作 html5图片_HTML5的图像制作


我们想实现的是，点击这张图片不同的地方，链接到不同的url，同是让空白地方不允许点击相应。

创建客户端分区响应图

原理：通过点击某张图像上的不同区域让浏览器到不同的URL上
元素：

  • 标签 客户端分区相应图的关键元素
  • 标签 可以有多个，每个各自代表图像上可被点击的一块区域

area的属性:

  • href 该区域被点击时浏览器应该加载的url
  • alt 定义图片的备用内容
  • shape 形状类型
    值： Rect 表示一个矩形区域。用四个逗号分割的整数组成
    四个整数分别代表：图像的左边缘，图像的上边缘，图像的右边缘，图像的下边缘。
    Circle 表示一个圆形区域。用三个逗号分割的整数组成
    三个整数分别代表：图像左边缘到圆心的距离，图像右边缘到圆心的距离，圆的半径。
    Poly 表示一个多边形区域，至少包含六个逗号分割的整数组成。
    每一对数字各代表多边形的一个顶点。
    Default 代表默认区域，也就是说覆盖整张图片的区域。
  • coords 坐标点的集合

用法：

<img src="..../image.jpg" usemap="#map1" >		
    <!-- 导向到name值为map1的map -->
    <map name="map1">
        <area href="../a.html" target="_blank" shape="rect" coords="40,60,180,200">	
        <!-- 分别对应在图片中左，上，右，下的相对边缘位置 -->
        <area href=".../b.html" target="_blank"  shape="rect" coords="64,64,64" > 
        <!-- 分别对应图片左边缘到圆心的距离，图片右边缘到圆心的距离，圆的半径（可以理解为圆心位置+半径） -->
    </map>

实例：

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin SelectInpuf_Test</title>
</head>
<body>
    <img src="image.jpg" usemap="#map1">
    <!-- 导向到name值为map1的map -->
    <map name="map1">
        <area href="" target="_blank" shape="rect" coords="16,16,300,300">
        <!-- 分别对应在图片中左，上，右，下的相对边缘位置 -->
        <area href="" target="_blank" shape="rect" coords="350,16,640,300">
        <area href="" target="_blank" shape="rect" coords="16,355,300,637">
        <area href="" target="_blank" shape="rect" coords="354,355,638,637">
    </map>
</body>
</html>

对应的四个边缘的值

HTML5的图像制作 html5图片_分区响应图_02