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

<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. 【BZOJ3529】[Sdoi2014]数表 莫比乌斯反演+树状数组

    [BZOJ3529][Sdoi2014]数表 Description 有一张N×m的数表,其第i行第j列(1 < =i < =礼,1 < =j < =m)的数值为能同时整除i和 ...

  2. Python老王视频习题答案

    基础篇2:一切变量都是数据对象的引用sys.getrefcount('test') 查看引用计数变量命名不能以数字开头编码:ascii.unicode.utf-81.阅读str对象的help文档,并解 ...

  3. gradle下的第一个SpringMVC应用

    新建gradle project 缺少了很多文件夹和文件,我们自己补充,补充完的目录如下: HelloController: package controller; import javax.serv ...

  4. HDCMS留言插件的使用！

    HDCMS留言插件,JS简单示例: <img src='{|U:'code'}' onclick='this.src='{|U:'code'}&'+Math.random()' /> ...

  5. ＯA之框架的搭建

    1.使用框架可以有效的解决耦合性过高的问题,减少代码修改的程度,同时方便添加新的功能.首先创建出基本的几个类库.这个框架就是使用基本的逻辑分层三层架构,然后进一步再使用接口对每个逻辑中的类库调用进行解 ...

  6. Mac下通过远程桌面向Windows发送Ctrl+Alt+Delete

    今天在Mac中通过远程桌面给Windows安装Git Extensions,在安装程序自动关闭资源管理器时,Windows无响应,桌面显示黑屏.于是,想通过Ctrl+Alt+Delete快捷键调出对话 ...

  7. struts2的琐碎知识点

    servlet:void init(ServletConfig cfg):// 读取servlet的配置参数void service(ServletRequest request, ServletRe ...

  8. Object类中常见的方法，为什么wait notify会放在Object里边

    toString():输出一个对象的地址字符串(哈希code码):可以通过重写toString方法,获取对象的属性! equals():比较的是对象的引用是否指向同一块内存地址, 重写equals() ...

  9. 6.安装pyhook报错is not a supported wheel on this platform

    解决方法: 先找到合适的格式: 然后,选择合适的版本: 安装即可成功:

  10. Spark checkpoint机制简述

    本文主要简述spark checkpoint机制,快速把握checkpoint机制的来龙去脉,至于源码可以参考我的下一篇文章. 1.Spark core的checkpoint 1)为什么checkpo ...