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

<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. 【Wannafly挑战赛4】F 线路规划 倍增+Kruskal+归并

    [Wannafly挑战赛4]F 线路规划 题目描述 Q国的监察院是一个神秘的组织.这个组织掌握了整个帝国的地下力量,监察着Q国的每一个人.监察院一共有N个成员,每一个成员都有且仅有1个直接上司,而他只 ...

  2. 【BZOJ1269/1507】[AHOI2006]文本编辑器editor Splay

    [BZOJ1269][AHOI2006]文本编辑器editor Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目 ...

  3. mysql字符串根据指定字符分割

    1.分割函数:SUBSTRING_INDEX('浙江温州-中国电信','-','1') 2.用例(筛选'-'前至少4个汉字的数据) a.数据分布 b.筛选sql select t.mobile_num ...

  4. Redis高级进阶

    目录 本章目标 Redis配置文件 Redis存储 Redis事务 Redis发布订阅 Redis安全 本章目标 Redis配置文件 Redis的存储 Redis的事务 Redis发布订阅 Redis ...

  5. spring-boot集成redis

    application.properties #redis 配置 # Redis数据库索引(默认为0) spring.redis.database=0 # Redis服务器地址 spring.redi ...

  6. Oracle性能优化之oracle中常见的执行计划及其简单解释

    一.访问表执行计划 1.table access full:全表扫描.它会访问表中的每一条记录(读取高水位线以内的每一个数据块). 2.table access by user rowid:输入源ro ...

  7. 介绍一种android的裸刷机方法（fastboot刷机实质）

      fastboot刷机的前提是你的开发板uboot良好并能正常启动进入fastboot模式,你的开发版的nand分区已存在.对于Android的uboot而言, 已经实现了fastboot命令,当你 ...

  8. 7.1 - CRM系统

    一.简介 crm 客户关系管理软件 ( Customer Relationship Management ) ( 详细内容 ) stark组件(仿admin组件)( 详细内容 ) rbac组件(基于角 ...

  9. Python性能分析指南(未完成)

    英文原文:http://www.huyng.com/posts/python-performance-analysis/ 译文:http://www.oschina.net/translate/pyt ...

  10. thinkcmf安装教程与目录结构详解 快速上手版

    最近接了一个建站项目,要求用thinkcmf来搭建,ytkah在想php都大致一样吧,快速地下载安装包,可是!怎么安装呢?没看到安装指引文件或目录,查看了安装说明public目录做为网站根目录,入口文 ...