前面我们有谈到了通过图片定位给一张图片添加多个链接，现在用另外一种方法来实现，用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. Oracle查询优化-插入、更新与删除

    --插入.更新与删除 --1.插入新纪录 --1.1.建立测试表 DROP TABLE TEST; CREATE TABLE TEST( C1 ) DEFAULT '默认1', C2 ) DEFAUL ...

  2. 适配器模式（Adapter Pattern)----------结构型模式

    对象适配器模式的缺点是:与类适配器模式相比,要在适配器中置换适配着类的某些方法比较麻烦.如果一定要置换掉适配者类的一个或多个方法,可以先做一个适配者类的子类,在子类中将适配者类的方法置换掉,然后再把适 ...

  3. 创建并调用 DLL(1)

    //通过 DLL Wizard 建立: library TestDLL; uses   SysUtils,   Classes,   Dialogs; {$R *.res} //建立过程 proced ...

  4. SQL Server死锁的解除方法

    如果想要查出SQL Server死锁的原因,下面就教您SQL Server死锁监控的语句写法,如果您对此方面感兴趣的话,不妨一看. 下面的SQL语句运行之后,便可以查找出SQLServer死锁和阻塞的 ...

  5. linux用户态定时器的使用---19

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ linux操作系统为每一个进程提供了3个内部计时器. ITIMER_REAL;ITIMER_VI ...

  6. Python 爬虫知识点 - 淘宝商品检索结果抓包分析（续一）

    通过前一节得出地址可能的构建规律,如下: https://s.taobao.com/search?data-key=s&data-value=44&ajax=true&_ksT ...

  7. NodeJS-003-自动刷新

    修改index.js之后,发现刷新浏览器,没有任何更改,需要关闭应用重新启动. 为了避免每次修改代码后要自动重启.通过安装supervisor来监控代码修改. 安装:npm install -g su ...

  8. strip() 、lstrip() 、rstrip()

    strip() 用于移除字符串开头和结尾的空格或换行符,如果指定参数,则表示移除指定的字符lstrip() 用于移除字符串开头的空格或换行符,如果指定参数,则表示移除指定的字符rstrip() 用于移 ...

  9. json 数据分析

    /* 健一健康头条 */ try { String url = "http://www.j1health.com/j1api.php/index/getJ1healthHotLists&qu ...

  10. linux系统输入法设置

    首先是要安装了中文输入法,下面以搜狗为例. 2 从system settings 进入language support ,在keyboard input method system 中是看不到自己安装 ...