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

相关文章

来自专栏九彩拼盘的叨叨叨

CSS 核心技能点

642
来自专栏IMWeb前端团队

webcomponent学习笔记(一)

webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分: Shadow DOM Custom Elements HTML...

1940
来自专栏自动化测试实战

HTML第三课——css盒子【2】

26914
来自专栏十月梦想

移动端适配之viewport适配

前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧!

931
来自专栏Web项目聚集地

CSS布局解决方案(全屏布局)

原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1

1154
来自专栏前端小叙

点击图片放大至原始图片大小

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w ...

2677
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(三)渐变,background属性

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变...

881
来自专栏Young Dreamer

canvas绘图不清晰的解决方案

现象描述   同样大小的图片(60x60px)用canvas和DOM绘制,结果发现canvas的画面质量要差很多。结果如下图所示。 ?   上图中,左侧红框中的...

18010
来自专栏lgp20151222

脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

582
来自专栏V站

CSS毛玻璃效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

1382

扫码关注云+社区