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切图，那样得四张图片。