前面我们有谈到了通过图片定位给一张图片添加多个链接，现在用另外一种方法来实现，用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. bootstrap中如何使input中的小图标获得点击事件

    bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...

  2. 笔记：写Java程序，并输出

    建一个文件名为 demo.java的文件 //写框架文件 public class Demo{ //写入口文件 public static void main(String[] args){ Syst ...

  3. mysql数据库中，通过一条insert into语句，同时插入多个值

    需求描述: 今天在看一本mysql的书籍,发现一个mysql中insert into好用的技巧,就是通过 1条insert into语句,插入多行数据,而不是多个insert into语句.在此记录下 ...

  4. Hash表 hash table 又名散列表

    直接进去主题好了. 什么是哈希表? 哈希表(Hash table,也叫散列表),是根据key而直接进行访问的数据结构.也就是说,它通过把key映射到表中一个位置来访问记录,以加快查找的速度.这个映射函 ...

  5. 什么原因接触接触impala的

    最近一个项目,关于大数据的改造项目,底层选择Impala还是sparkSQL呢? 最后选择Impala.这样就开启了我的Impala学习之旅.我大部分负责Imapa接口开发工作. 我是控制不住的想整个 ...

  6. C++11新特性之六——元编程

    C++11新特性之六——元编程

  7. js array.filter实例(数组去重)

    语法: 循环对数组中的元素调用callback函数, 如果返回true 保留,如果返回false 过滤掉,  返回新数组,老数组不变 var new_array = source_array.filt ...

  8. 如何让IOS中的文本实现3D效果

    本转载至 http://bbs.aliyun.com/read/181991.html?spm=5176.7114037.1996646101.25.p0So7c&pos=9       zh ...

  9. android基础组件---->Picker的使用

    Android为提供了一个随时可用的对话框,方便用户选取时间或者日期.今天我们就简单的学习一下Picker的使用.我们的爱,比死亡还要理所当然. Picker的使用 项目结构如下:

  10. android基础组件---->Spinner的使用

    Spinner提供了一个快速的方式从集合中选择值.在默认状态下,一个Spinner显示的是当前选择的值.触摸Spinner会显示一个下拉菜单,用户可以从中选择一个值.今天我们就开始Spinner的学习 ...