图片热点链接

好久好久之前都说要写随笔了，可是总是懒，冬天一到，冬眠模式自动开启！今天终于早起，动手吧，

最近工作遇到很多问题，对于我这种记得快忘得快的人，随笔是最好的方式！今天就来说说图片热点的事情吧。

图片热点链接：在一张图片上不同的位置设置点击进入不同的链接。不需要js哦

一。示例代码：

<img src="./img/mgjhead.jpg" alt="" usemap="#test"/>
<map name="test">
    <!--矩形   前面两个参数为左上角坐标，后面两个参数为右下角坐标-->
    <area shape="rect" coords="361,30,40,50" href="http://localhost:63342/%E7%9A%84mo/ccc.html#?16,11" alt="雪山区域"/>
    <!--圆形  前面两个参数为圆心坐标，后面一个参数为 圆的半径-->
    <area shape="circle" coords="361,59,100" href="" alt="绿地上的羊群"/>
    <!--多边形 参数为每个折点的坐标-->
    <area shape="poly" coords="232,70,285,70,300,90,250,90,200,78" href="" alt=""/>
</map>

圆形示例结果：

注意：<img > 标签中的一个属性：usemap="#test"   <map> 标签中的 name="test" ，他们的属性值是相对应的哦。错了那就抽自己嘴巴，！！

二。如何找到坐标：

方法一：用ps软件寻找坐标

方法二：用代码寻找坐标

新建一个页面，放入如下代码，重点是：：：ismap="ismap"，点击图片的某处，坐标会在地址栏中显示哦。网上有的说坐标会在左下角显示，可以我用我的谷歌测试了下，是在地址栏显示的。很方便就能找到坐标。

<a href="#"><img src="./img/mgjhead.jpg" alt="" ismap="ismap"/></a>

 

结语：很多事情一会不用就会往忘记，所以啊，要养成写博客的习惯。。哦哦哦。吃火锅去了，今天大成火锅节呢。。

 

转载于:https://www.cnblogs.com/autumn123/p/5020984.html