前端：实现点击图片某个部位跳转（位图）

程序员Fy

已于 2022-06-17 10:10:08 修改

阅读量6.3k

点赞数 14

文章标签：前端 html css3

于 2022-06-14 16:20:49 首次发布

本文链接：https://blog.csdn.net/fuyuo/article/details/125279552

版权

基本属性介绍

img标签，其中包含src属性，src属性里面写引入图片的路径。
如下：

<img src="D:\Desktop\4k壁纸\猫.jpg">

但是这样直接导入一张图片会占领这个网页，所以要介绍另2个属性

1，width=“” 和 height=""属性
2，width里面填入图片占据的宽度，height里面填写图片的高度。
如下：设置宽500像素，高300像素

<img src="D:\Desktop\4k壁纸\猫.jpg" width="500px" height="300px">

这样这个图片才会显得不会太大

定位图片中需要点击就跳转的地方

如下面图片，假设需要定位到图片眼睛的地方跳转。这时用截图工具进行截图，在眼睛部位停住可以看到横坐标为470，纵坐标为151。同时估计一下点击范围，最好是在这个眼睛周围，本人大概估计为30像素
在这里插入图片描述
于是写入下面代码：

<img src="D:\Desktop\4k壁纸\猫.jpg" width="500px" height="300px">

现在还没有完成最终的目的

1，接下来需要用到map标签和area标签，这2个标签是一般连用的，只有只有才能和上面跳转的路径联系起来。
在map标签里面嵌入一个area标签，如下：

<map>
	<area ></area>
</map>

2，area标签里面写入shape属性以确定点击的范围（属性值有多个，这里选"circle“）上面已经说过大概是30px。
3，area标签里面再给一个coords属性用来定位点击的地方的，上面已经说过横坐标，纵坐标，范围，大概分别是470,151,30px。最后加一个herf属性点击之后跳转的地址，这里选百度地址。代码如下

	<map>
		<area shape="circle" coords="470,151,30" href="https://www.baidu.com/"></area>
	</map>

但是这里遇到一个问题：img标签和这个map标签目前好像还没有产生关系系

将map，img标签联系起来

现在只需要给img一个usmap属性，假设为1，如下：

<img src="D:\Desktop\4k壁纸\猫.jpg" border="" width="500px" height="300px" usemap="#1">

注意：前面必须加一个#号
最后再给map标签一个唯一的name属性，如下：

<map name="1">

这样就联系起来了

最后测试运行

完整代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<img src="D:\Desktop\4k壁纸\猫.jpg" width="500px" height="300px" usemap="#1">
	<map name="1">
		<area shape="circle" coords="470,151,30" href="https://www.baidu.com/"></area>
	</map>
</body>
</html>