HTML图片热点

       目前在改进内部系统的一个功能,前端给出了效果图,从前段到后端都需要自己来写了,好在自己对前端的技术也略有涉猎。

       页面需要实现一个按钮切换的效果,其实切换只是冠冕堂皇的话了,就是点击图片一下,换成另一张图片。效果如下:

       这是从效果图上截下来的两张图片,需要的效果就是点击正式版,切换到左边的效果,点击编辑版切换到右边的效果,所以需要正式版和编辑版上触发不同的事件,但是正式版和编辑版是在一张图片上的,引出本篇的主题,图片热点

function switchToFormal() {
	switchTo.src = "images/formal.png";
}

function switchToEdition() {
	switchTo.src = "images/edition.png";
}
<img id="switchTo" src="images/formal.png" usemap="#switchToMap" width="134" height="32" />
<map name="switchToMap">
	<area alt="正式版" shape="rect" coords="1,1,69,37" href="javascript:switchToFormal()" />
	<area alt="编辑版" shape="rect" coords="70,1,138,37" href="javascript:switchToEdition()" />
</map>

       我建立的是矩形(shape="rect")的热点,coords是热点坐标,矩形需要两组坐标,左上角顶点的坐标和右下角顶点的坐标,这两个点确定了一个矩形。shape还有其它形状,更多信息就google吧。

       热点多用于大张图片不同区域设置不同链接,如地图,这里如此做只是不想再去PS切图,那样得四张图片。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区