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

<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. 基于TINY4412的Andorid开发-------简单的LED灯控制

    参考资料: <Andriod系统源代码情景分析> <嵌入式Linux系统开发完全手册_基于4412_上册> 作者:彭东林 邮箱:pengdonglin137@163.com 平 ...

  2. Eclipse 真机调试检测不到手机解决方案

    想用Eclipse真机调试,但是死活检测不到手机. 手机已经打开了usb调试模式. 开始用的华为Mate9,后面试了下小米,都不行. 在网上搜了一堆,什么安全驱动.adb占用.删除360手机助手.修改 ...

  3. elk日志分析与发掘深入分析

    elk日志分析与挖掘深入分析 1 为什么要做日志采集? 2 挖财自己的日志采集和分析体系应该怎么建? 2.1 日志的采集 2.2 日志的汇总与过滤 2.3 日志的存储 2.4 日志的分析与查询 3 需 ...

  4. 【BZOJ1787】[Ahoi2008]Meet 紧急集合 LCA

    [BZOJ1787][Ahoi2008]Meet 紧急集合 Description Input Output Sample Input 6 4 1 2 2 3 2 4 4 5 5 6 4 5 6 6 ...

  5. 【BZOJ3727】PA2014 Final Zadanie 树形DP

    [BZOJ3727]PA2014 Final Zadanie Description 吉丽YY了一道神题,题面是这样的:“一棵n个点的树,每条边长度为1,第i个结点居住着a[i]个人.假设在i结点举行 ...

  6. 集成tomcat插件到eclipse

    Eclipse中Tomcat的配置及简单例子 环境: 系统: Windows 7 64位专业版 Eclipse: Eclipse Java EE IDE for Web Developers.     ...

  7. centos7 iptables/firewalld docker open port

    here are multiple "hackish" ways to do it: scan kernel logs, as mentioned by Jiri (but you ...

  8. Django - 模型层 - 下

    一.多表 sql 单表 多表 多对一 多对多 一对一 =============================================== 一对多:Book id title price p ...

  9. 转!!spring @component 详解 默认初始化bean的名字 VNumberTask类 就是 VNumberTask

    参考链接:信息来源 今天碰到一个问题,写了一个@Service的bean,类名大致为:CUser xml配置: <context:component-scan base-package=&quo ...

  10. 安装Ruby、Sass在WebStrom添加Watcher实现编辑scss文件时自动生成.map和压缩后的.css文件

    前言 这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见< ...