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

<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. css 分栏高度自动相等

    方法2: <div class="ticket_table"> <div class="ticket_l"> <h3>全票& ...

  2. c# Socket通信基础

     一.IP地址操作类   1.IPAddress类 a.在该类中有一个 Parse()方法,可以把点分的十进制IP表示转化成IPAddress类,方法如下: IPAddress address = I ...

  3. Android搜索自动提示功能 AutocompleteTextView

    1.配置main.xml中自动提示控件: <AutoCompleteTextView android:id="@+id/autotv_searchresult" androi ...

  4. 微信小程序 --- 组件

    view组件:小程序使用最多的组件.可以理解为 div: Text组件:用于展示文字.可以理解为 p span 标签.(除了Text组件以外的其他组件都无法被长按选中) Text组件无法解析HTML, ...

  5. MUI事件管理

    模块:事件管理 http://dev.dcloud.net.cn/mui/event/ 事件绑定: 除了可以使用addEventListener()方法监听某个特定元素上的事件外, 也可以使用.on( ...

  6. vue 学习报错 Newline required at end of file but not found

    着不敢了,原因竟然是需要在js css等后面再加一行(空行) Newline required at end of file but not found 翻译:文件末尾需要换行符,但找不到 如下面两处 ...

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

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

  8. SQLAlchemy中scoped_session实现线程安全

    不多说,先上代码 from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from sqlalchem ...

  9. How many ways??---hdu2157（矩阵快速幂）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2157   题意:有一个有向图,含有n个节点,m条边,Q个询问,每个询问有 s,t,p,求 s 到 t ...

  10. 巧用Salt，实现CMDB配置自动发现

    随着互联网+新形势的发展,越来越多的企业步入双态(稳敏双态)IT时代,信息化环境越来越复杂,既有IOE三层架构,也有VCE.Openstack等云虚拟化架构和互联网化的分布式大数据架构.所以,企业急需 ...