HTML5-嵌入图片及创建分区相应图

最新推荐文章于 2024-08-06 23:47:37 发布

MelanceXin

最新推荐文章于 2024-08-06 23:47:37 发布

阅读量1.2k

点赞数 1

分类专栏： HTML+CSS+JS ASP.NET 文章标签： HTML 分区响应图嵌入图片

本文链接：https://blog.csdn.net/Q672405097/article/details/89498857

版权

ASP.NET 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JS

15 篇文章 0 订阅

订阅专栏

创建图片的元素

元素，属性如下：

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

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

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

分析：点击的范围设置长宽的一个方框区域。
在这里插入图片描述
我们想实现的是，点击这张图片不同的地方，链接到不同的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="https://blog.csdn.net/Q672405097/article/details/89498857" target="_blank" shape="rect" coords="16,16,300,300">
        <!-- 分别对应在图片中左，上，右，下的相对边缘位置 -->
        <area href="https://blog.csdn.net/Q672405097/article/details/89498857" target="_blank" shape="rect" coords="350,16,640,300">
        <area href="https://blog.csdn.net/Q672405097/article/details/89498857" target="_blank" shape="rect" coords="16,355,300,637">
        <area href="https://blog.csdn.net/Q672405097/article/details/89498857" target="_blank" shape="rect" coords="354,355,638,637">
    </map>
</body>
</html>

对应的四个边缘的值
在这里插入图片描述