前端:实现点击图片某个部位跳转(位图)

基本属性介绍

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像素
前端:实现点击图片某个部位跳转(位图)_第1张图片
于是写入下面代码:

<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>

点击眼睛部位后成功跳转到百度页面

你可能感兴趣的:(前端,html,css3)