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 条评论
登录 后参与评论

相关文章

来自专栏marsggbo

”盒模型“之如何防止边框和内边距把元素撑开

在我们讨论宽度的时候,我们应该讲下与它相关的一个重点知识:盒模型。当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素。看下...

1996
来自专栏Material Design组件

Material Design — 按钮( Buttons)

38316
来自专栏钱塘大数据

【干货】如何提升Excel表格的颜值?

下载了几个歪果仁做的Excel表格,非常的漂亮: ? ? 再看看我们最常见的表格,难看的瞬间爆表 ? 兰色对歪果仁的表格好看的原因进行了归纳,下面我们按歪果仁...

3929
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

69013
来自专栏Coco的专栏

【CSS进阶】伪元素的妙用--单标签之美

27312
来自专栏smy

事件委托与阻止冒泡

简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="...

37210
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

44910
来自专栏HTML5学堂

HTML知识复习

HTML5学堂:本篇文章主要是从头到尾串一下HTML4.0的知识点。很多知识在网站各个文章中都已经讲解过了,在这里就不再重复书写了。学习时,知识点固然重要,但是...

3034
来自专栏前端新视界

两个 viewports 的故事-第二部分

原文:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素...

1887
来自专栏超然的博客

弹窗细节

  浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。

903

扫码关注云+社区