点击图片中的某个部分来跳转页面

map 之前不知道还有这么叼的东西, 这玩意要和 <area> 合起来一起用不然没啥软用。。。。貌似。。。

首先在img 里面加一个attr 叫做 usemap 他要等于你要使用的map 的name,或者id(视浏览器的情况而定所以通常会将那个map的这两个属性设置成一样的)。

<map id = "use" name = "use" >

<img usemap = "use"  src = "1.jpg">

这样就将map和img 关联起来了。

然后在map 里面包围着 <area> , <area>有几种属性 coords(坐标,表示的是相对当前img的坐标, 也就是img 的左上角就是 0,0 其中有几个值要根据形状来定义)

shape(形状,

圆形:shape="circle",coords="x,y,z" 圆心和半径

多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..." xy表示每个点的坐标

矩形:shape="rectangle",coords="x1,y1,x2,y2"对角线的坐标


href 点击后跳转的链接,nohref 没有要跳转的目的


target:

_blank在新窗口中打开被链接文档。_self默认。在相同的框架中打开被链接文档。_parent在父框架集中打开被链接文档。_top在整个窗口中打开被链接文档。framename在指定的框架中打开被链接文档。

当填好后就在最后用</map>再包起来这样在点击图片的某一区域的时候就能实现跳转到不同的地方而不需要为了同一个图片点击不同的地方还要拆分图片来实现功能

  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值