前面我们有谈到了通过图片定位给一张图片添加多个链接,现在用另外一种方法来实现,用html<map>标签给图片加链接

<img src="/images/hlj.jpg" border="0" usemap="#Map" alt="">
<map name="Map" id="Map"><area shape="rect" coords="798,298,956,340" href="/dot.html" />
</map>

shape 属性为 "rect",表示方形,该值规定矩形左上角坐标(798,298)和右下角的坐标(956,340)。

参考资料:

<area> 标签

http://www.w3school.com.cn/tags/tag_area.asp

http://www.w3school.com.cn/tags/att_area_coords.asp

方形和圆形案例http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

通过html<map>标签给图片加链接的更多相关文章

  1. H5的段落标签、图片标签、列表标签与链接标签

    段落标签 (1)<p>段落标签</p> (2)<nobr>强制不换行标签,会出现滚动条</nobr> (3)<pre>保留原始排版标签< ...

  2. <img> 标签 图片加载失败时候处理方案

    应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...

  3. Android 图片加载库Glide 实战(二),占位符,缓存,转换自签名高级实战

    http://blog.csdn.net/sk719887916/article/details/40073747 请尊重原创 : skay <Android 图片加载库Glide 实战(一), ...

  4. 利用HTML中map标签实现整张图片带有可点击区域的图像映射:

    实现效果说明:一整张背景图片,实现图标区域出现链接,可点击跳转到指定页面. <div class="brand"> <img src="images/b ...

  5. Android 框架练成 教你打造高效的图片加载框架(转)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41874561,本文出自:[张鸿洋的博客] 1.概述 优秀的图片加载框架不要太多, ...

  6. map标签的详细使用参数

    map标签必须成对出现,即 <map> ....</map> 同时map必须和area配合使用. img标签里的usermap属性值必须与map标签里的id和name值完全一致 ...

  7. HTML <area><map>标签及在实际开发中的应用

    之前,我一直以为HTML <area>是一个鸡肋HTML,估计到了HTML5时代会被废弃的命.但是,最近一查资料,乖乖了个咚,不仅没被废弃,反而发展了,新增了一些标签属性,例如rel,me ...

  8. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  9. Picasso 图片加载库

    Picasso 英文意思国外一个很有名的画家毕加索的名字,国外项目取名还是很有意思的! 从github新下载的picasso项目有依赖其他第三方开源项目okhttp和okio,这两个项目也是相当经典的 ...

随机推荐

  1. SharePoint 沙盒无法启动新的解决方案服务的SPUserCodeV4

    开发部署时报错: 错误原因:没有启动该服务: 解决方式:打开管理中心—应用程序管理—服务应用程序--管理服务器上的服务,启动该服务即可.

  2. MFC中控件添加了变量后修改

    新增一个变量这个变量存在于两个位置,一个是头文件中项目名+Dlg.h文件,另一个是源文件中项目名+Dlg.cpp文件

  3. 记录下Lambda常用的表现形式

    纯粹记录下Lambda的表现形式: (x, y) => x * y;//多参数,隐式类型=>表达式 x => x * ;//单参数,隐式类型=>表达式 x => { ; ...

  4. day07<面向对象+>

    面向对象(构造方法Constructor概述和格式) 面向对象(构造方法的重载及注意事项) 面向对象(给成员变量赋值的两种方式的区别) 面向对象(学生类的代码及测试) 面向对象(手机类的代码及测试) ...

  5. org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 12 in XML document from

    org.springframework.beans.factory.xml.XmlBeanDefinitionStoreException: Line 12 in XML document from ...

  6. Python 爬虫知识点 - 淘宝商品检索结果抓包分析(续二)

    一.URL分析 通过对“Python机器学习”结果抓包分析,有两个无规律的参数:_ksTS和callback.通过构建如下URL可以获得目标关键词的检索结果,如下所示: https://s.taoba ...

  7. ios 图片处理( 1.按比例缩放 2.指定宽度按比例缩放

    本文转载至 http://blog.sina.com.cn/s/blog_6f29e81f0101tat6.html //按比例缩放,size 是你要把图显示到 多大区域 CGSizeMake(300 ...

  8. 2.6 CMMI2级——供应商协议管理(Supplier Agreement Management)

    做软件开发的,不免要购买一些软硬件.软件可能是中间件.控件.插件.组件等,硬件可能是一些服务器.PDA.单片机等.只要稍微复杂的项目,都不可避免的会有采购的问题,就算目前没有采购,以后也会不可避免.另 ...

  9. [置顶] Linux协议栈代码阅读笔记(二)网络接口的配置

    Linux协议栈代码阅读笔记(二)网络接口的配置 (基于linux-2.6.11) (一)用户态通过C库函数ioctl进行网络接口的配置 例如,知名的ifconfig程序,就是通过C库函数sys_io ...

  10. MQTT-SN协议乱翻之实现要点

    前言 本篇是MQTT-SN 1.2协议最后一篇翻译了,主要涉及实现要点,很简短. 需要支持QoS 值为 -1 QoS虽默认设置有0,1,2三个值,但还有一种情况其值为-1.来自客户端的PUBLISH消 ...