图片热点链接
好久好久之前都说要写随笔了,可是总是懒,冬天一到,冬眠模式自动开启!今天终于早起,动手吧,
最近工作遇到很多问题,对于我这种记得快忘得快的人,随笔是最好的方式!今天就来说说图片热点的事情吧。
图片热点链接:在一张图片上不同的位置设置点击进入不同的链接。不需要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>
结语:很多事情一会不用就会往忘记,所以啊,要养成写博客的习惯。。哦哦哦。吃火锅去了,今天大成火锅节呢。。