实现效果说明:一整张背景图片,实现图标区域出现链接,可点击跳转到指定页面。

<div class="brand">
<img src="data:images/bottom.jpg" usemap="#brandimg"/>
<map id="brandimg" name="brandimg">
<area shape="rect" href="http://www.baidu.com" coords="0,0,180,50" target="_blank" alt="百度"/>
<area shape="rect" href="http://www.baidu.com" coords="108,0,283,50" target="_blank" alt="百度"/>
</map>
</div> 注解:使用usemap关联map标签,coords为图标的对角线坐标, alt表示图像加载失败时出现“百度”二字。

利用HTML中map标签实现整张图片带有可点击区域的图像映射:的更多相关文章

  1. HTML <map> 标签-创建带有可点击区域的图像映射

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  2. 带有可点击区域的图像映射:HTML <map> 标签

    实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...

  3. HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  4. html中map标签和area标签的应用(总结)

    html中map标签和area标签的应用(总结) 一.总结 一句话总结: html中map标签和area标签和组成图片地图,在前端优化中可以减少http请求 1.map标签的用途是什么? 图片地图:是 ...

  5. html中map标签和area标签的应用

    map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档. 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name ...

  6. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  7. 踩iviewui中Tabs 标签页数据绑定坑

    今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...

  8. 在hexo静态博客中利用d3-cloud来展现标签云

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

  9. HTML <area><map>标签及在实际开发中的应用

    之前,我一直以为HTML <area>是一个鸡肋HTML,估计到了HTML5时代会被废弃的命.但是,最近一查资料,乖乖了个咚,不仅没被废弃,反而发展了,新增了一些标签属性,例如rel,me ...

随机推荐

  1. JavaScript—文字自动变化为自定义颜色

    效果: JS代码: var ColorTimer; var Colorforn = 0; //颜色代码 var ColorArray = new Array("#00CCCC", ...

  2. 网络下载功能实现(downloader ) ---- HTML5+

    模块:downloader Downloader模块管理网络文件下载任务,用于从服务器下载各种文件,并支持跨域访问操作.通过plus.downloader获取下载管理对象.Downloader下载使用 ...

  3. (转)梯度下降法及其Python实现

    梯度下降法(gradient descent),又名最速下降法(steepest descent)是求解无约束最优化问题最常用的方法,它是一种迭代方法,每一步主要的操作是求解目标函数的梯度向量,将当前 ...

  4. Spring容器装配Bean的三种方式

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  5. Spring 加载配置文件的方式

    我们常用的加载context文件的方法有如下三个: 1.FileSystemXmlApplicationContext 这个方法是从文件绝对路径加载配置文件,例如: ApplicationContex ...

  6. CodeForces 651 C Watchmen

    C. Watchmen time limit per test 3 seconds memory limit per test 256 megabytes input standard input o ...

  7. 2018CCPC秦皇岛站

    这次去秦皇岛,两个队都打铁回来,真的是蛮耻辱的 可以说是有史以来最差成绩了 其实网络赛就打的不好 两个名额一个是省赛分配的一个是排队排来的 去之前拉了几场之前的CCPC的比赛打 感觉打的都还不错的 热 ...

  8. HDU_3183_A Magic Lamp

    A Magic Lamp Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  9. 知乎live 我的读书经验 总结

    https://www.zhihu.com/lives/757587093366009856/messages 碎片化阅读没有意义, 捡硬币捡成富翁 kindle不能全文检索   短篇文章的阅读是否有 ...

  10. flask源码剖析--请求流程

    想了解这篇里面的内容,请先去了解我另外一篇博客Flask上下文 在了解flask之前,我们需要了解两个小知识点 偏函数 import functools def func(a1,a2): print( ...