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

<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. sping整合quartz

    很简单,一共需要定义三个bean 需要注意的是每个bean的类型 业务bean(就是我们每次调度需要做的工作) <bean id="quantzjobBean" class= ...

  2. 二叉树各种相关操作(建立二叉树、前序、中序、后序、求二叉树的深度、查找二叉树节点，层次遍历二叉树等）（C语言版)

    将二叉树相关的操作集中在一个实例里,有助于理解有关二叉树的相关操作: 1.定义树的结构体: typedef struct TreeNode{ int data; struct TreeNode *le ...

  3. 310实验室OTL问题

    1.首先是下载OTL文件包,网址是:github.com/O-T-L,可以直接点击网页上的下载链接,也可以使用unlix命令,git clone https://github.com/O-T-L/OT ...

  4. intelliij jdea灰色文件处理办法

  5. postgresql数据库创建、修改、删除

    一.数据库创建 语法: Command:     CREATE DATABASEDescription: create a new databaseSyntax:CREATE DATABASE nam ...

  6. Pycharm一直报ImportError: No module named requests

    1.首先检查是否安装了requests l 安装命令:pip install requests如果出现了Requirement already satisfied 代表安装成功 2.系统含有多个版本的 ...

  7. Mongodb3.X版本的 的用户认证

    一直使用公司的mongodb环境,本地的mongodb没有开启认证,为了环境更一致,决定加上本地mongodb的认证,不过在这个过程中发生了点波折. 我使用的是window版本的3.2,公司使用的是2 ...

  8. Puppet学习：Augeas的怪问题

    今天测试部署Zabbix,本来以前是正常的,今天莫名其妙报错.测试后发现是Augeas出现问题,无论如何都不执行.于是采用调试模式: puppet agent --test --verbose --d ...

  9. Mysql数据库安装与配置

    先介绍下dql,dml,ddl,dcl: 安装: 加上这一行: 接下来把mysql设置成随系统自动启动: 开放3306端口(如果是阿里云服务器需要修改安全规则而不是如下): 或者 这里注意,有时候没有 ...

  10. MAVEN项目(仓库中没有jar包)

    E:\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\bajie\WEB-INF\lib 把jar包放 ...