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

<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. tpcc-mysql安装、使用、结果解读

    请点击:http://www.aikaiyuan.com/8687.html 错误处理: ln -s /usr/local/mysql/lib/libmysqlclient.so. /usr/lib6 ...

  2. OC开发_Storyboard——Core Data

    一 .NSManagedObjectContext 1.我们要想操作Core Data,首先需要一个NSManagedObjectContext2.那我们如何获得Context呢:创建一个UIMana ...

  3. postgresql----数据库表约束----FOREIGN KEY

    六.FOREIGN KEY ---- 外键约束 外键可以是单个字段,也可以是多个字段.所谓的外键约束就是引用字段必须在被引用字段中存在,除非引用字段部分为NULL或全部为NULL(由MATCH TYP ...

  4. Android 小例子服务端

    这是之前发布的Android项目的服务端源码,只是简单的根据请求返回了一些测试数据,没有实现对数据库的操作,可以根据需求自己实现. 这是mvc4 WebAPI项目,需要用vs2012打开. 如果是用的 ...

  5. SaltStack生产案例-服务部署（redis，mysql，apache+php，haproxy+keepalived）

    顺序代码资料链接 课上资料.zip 接上篇:SaltStack生产案例-系统初始化 1,redis 主从 2,mysql 主从 2.1 mysql-install.sls (安装 初始化) 2.2   ...

  6. struts2的琐碎知识点

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

  7. Javascript计算星座

    今天看群里一哥们折腾得挺热乎,手痒随便写了一个DEMO,供初学者参考. 重点,写程序先定注释,明确思路后再写具体代码. //星座定义 var constellations = [ {"Sta ...

  8. kubernetes实战(十)：k8s使用Helm安装harbor

    1.基本概念 对于复杂的应用中间件,需要设置镜像运行的需求.环境变量,并且需要定制存储.网络等设置,最后设计和编写Deployment.Configmap.Service及Ingress等相关yaml ...

  9. day08：软件系统的体系结构&Tomcat详解&Web应用&http协议

        day08 软件系统体系结构     常见软件系统体系结构B/S.C/S 1.1 C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端 ...

  10. 【Python】自动化测试框架-共通方法汇总

    1.滚动滚动条(有的时候页面元素element取得对但是并没有回显正确的数据,可能是因为页面第一次加载很慢,所以页面可能做了滚动到哪里就加载到哪里的效果,此刻我们就需要用到滚动条自动滚动这段代码让页面 ...