前面我们有谈到了通过图片定位给一张图片添加多个链接，现在用另外一种方法来实现，用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. jquery的委托处理

     1.基本用法: javascript的事件模型,采用”冒泡”模式,也就是说,子元素的事件会逐级向上”冒泡”,成为父元素的事件. 利用这一点,可以大大简化事件的绑定.比如,有一个表格(table元素) ...

  2. C# 多线程操作队列

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  3. Java精选笔记_集合【List(列表)接口】

    List(列表)接口 简介 List接口继承自Collection接口,是单列集合的一个重要分支,习惯性地会将实现了List接口的对象称为List集合. 元素是有序的,即元素的存入顺序和取出顺序一致, ...

  4. HTML表单的应用

    <html> <head> <title>HTML表单的应用</title> </head> <body> <!-- bo ...

  5. JDK1.8在LINUX下安装步骤

    JDK1.8在LINUX下安装步骤: 在/usr/lib/目录下新建jvm文件夹,如果已有jvm文件夹,则将之前的JDK版本删除,即在jvm目录下执行命令:rm –rf * 将JDK文件jdk-8u4 ...

  6. pythonday

    python学习          http://www.cnblogs.com/fengyuhao/p/7168903.html pythonday    http://www.cnblogs.co ...

  7. Java初学者笔记三：关于字符串和自实现数组常见操作以及异常处理

    一.字符串常见的操作 1.结合我在python中对于字符串常见处理总结出下面三个应该能算是字符串造作的TOP 3 //字符串查找子串,存在返回index,不存在返回-1 等于python的find: ...

  8. 高中生的IT之路-1.3那一幕

    上一篇讲到,当时我认为自己的命运就是小时候上学,长大后外出打工,所以高中毕业后就来到了天津,到爸爸的店铺打工. 我爸的店铺就在天津大学校园里,幸运的是,我人生的转折点也就在此. 刚到店里那段时间,每天 ...

  9. 【BZOJ3727】PA2014 Final Zadanie 树形DP

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

  10. 微信小程序 --- 设置页面的标题

    第一种方式:修改 page.json文件 { "navigationBarTitleText": "豆瓣 - 电影" } 第二种方式:使用 JS 修改: wx. ...