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切图，那样得四张图片。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2012-12-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读