KimhillZhang  

之前为了在图片上进行作链接,比如为了在logo图片上进行点击,我的做法都在通过在图片上放入a标签,要么就通过js来实现,太愚民了,,今天 看到area标签,学到了,其实不用的,有了area标签可以灵活地定义在图片上要进行点击连接的区域,太牛了。。。。

::

 有不懂的学习下哈:

 

我有一张logo图片:

现在我要在这张logo图片上进行定义“点击连接”的区域,看html代码:

 

<div style="width:202px;">
   <img src="logo.jpg" style="border:0px;"; usemap="#imgMap"/>
   <map id="imgMap" name="imgMap">
      <area shape="rect" coords="80,0,186,22" href="#"/>  //定义一个矩形
      <area shape="circle" coords="30,30,30,44" href="#" /> //定义一个圆形
      <area shape="rect" coords="80,21,203,46" href="#" /> //定义一个矩形   

  </map>
</div>

这里通过定义图片(img)的usemap属性,值为map的#加name值==》  #imgMap

 

area 的shape属性有三个值,一个是rect:定义一个矩形,,一个是circle:定义一个原型,还有一个是poly这个我也不知道是什么情况(哈哈,不好意思啊)

 

这样定义后就可以通过coords定义的区域进行点击,写相应的点击连接地址,当点击相应的区域可以看到相应的效果,如下图

 

posted on   KimhillZhang  阅读(625)  评论(3编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
 
点击右上角即可分享
微信分享提示