基本属性介绍
img标签,其中包含src属性,src属性里面写引入图片的路径。 如下:
但是这样直接导入一张图片会占领这个网页,所以要介绍另2个属性
1,width=“” 和 height=""属性 2,width里面填入图片占据的宽度,height里面填写图片的高度。 如下:设置宽500像素,高300像素
这样这个图片才会显得不会太大
定位图片中需要点击就跳转的地方
如下面图片,假设需要定位到图片眼睛的地方跳转。这时用截图工具进行截图,在眼睛部位停住可以看到横坐标为470,纵坐标为151。同时估计一下点击范围,最好是在这个眼睛周围,本人大概估计为30像素 于是写入下面代码:
现在还没有完成最终的目的
1,接下来需要用到map标签和area标签,这2个标签是一般连用的,只有只有才能和上面跳转的路径联系起来。 在map标签里面嵌入一个area标签,如下:
2,area标签里面写入shape属性以确定点击的范围(属性值有多个,这里选"circle“)上面已经说过大概是30px。 3,area标签里面再给一个coords属性用来定位点击的地方的,上面已经说过横坐标,纵坐标,范围,大概分别是470,151,30px。最后加一个herf属性点击之后跳转的地址,这里选百度地址。代码如下
但是这里遇到一个问题:img标签和这个map标签目前好像还没有产生关系系
将map,img标签联系起来
现在只需要给img一个usmap属性,假设为1,如下:
注意:前面必须加一个#号 最后再给map标签一个唯一的name属性,如下:
这样就联系起来了
最后测试运行
完整代码如下:
点击眼睛部位后成功跳转到百度页面