图解img标签的usemap使用

最新推荐文章于 2021-04-16 15:19:31 发布
最新推荐文章于 2021-04-16 15:19:31 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： 前端
原文地址：图解img标签的usemap使用 作者：刘超

各位在看这篇文章之前请先到w3school来了解一下<img>标签中的usemap属性是什么:

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

 

在有些概念之后,文章将要开始介绍<img>标签的usemap详细使用方法了.

 

usemap属性在w3school描述为: usemap 属性提供了一种“客户端”的图像映射机制.

 

事实上我个人觉得它就是在一个图像上描绘了多个“热点”.这样解释好像比较容易理解一点.

 

让我们先来看看在Dreamweaver中一个图像上被描绘上了两个热点的最终效果吧:

[转载]图解img标签的usemap使用

我们可以在上图很明显的看到,这个图片上有两个热点,分别在图像的左上角和右下角.只要点击不同区域时,就可以超链接到不同的地方.

 

现来看看页面中的代码吧,这个应该比较重要些,代码如下:

<body>

   <img src="images/loginfoot.jpg" border="0" usemap="#Map1" name="foot" width="100" height="100"/>

    <map name="Map1">   

    <area shape="rect" coords="50,50,100,100" style="cursor:hand" href="login.jsp" />

    <area shape="rect" coords="0,0,50,50" style="cursor:hand" href="main.jsp"/>  

</map>

</body>

让我来解释一下这段代码吧:

先解释这一段:<img src="images/loginfoot.jpg" border="0" usemap="#Map1" name="foot" width="100" height="100"/>

其实不用多说,这段就是在页面上插入一个图像.

图像为: images目录下的loginfoot.jpg.

边框为0,页面中名称为foot,宽100,高100:( border="0" name="foot" width="100" height="100")

重点是这个: usemap="#Map1",我想它应该描述为在此图像中使用图像映射,映射的具体描述为页面中的一个<map>,而它的名称为Map1.

 

接下来就要讲到<map>了, 这个<map>的名字为Map1,在<map></map>之间有两个<area/>,这两个<area/>分别代表了图片上的两个热点区域.

下面就<area/>标签的属性来作一些介绍:

shape="rect":热点的形状shape为矩形rect(rectangular);

style="cursor:hand":鼠标指针cursor的样式为手hand;

href="login.jsp":超连接到login.jsp页面;

coords="50,50,100,100":这用属性用来描述这个指点区域的具体位置.

 

我不知道描述位置的属性为什么要使用coords ,这很让人想不明白.如果你不明白coords里面几个值具体是什么意思,我按照个人理解,画了下面这张图.希望你看完之后能够明白:

(将coords="a,b,c,d"里面的几个值分别看作是a,b,c,d ).

                            [转载]图解img标签的usemap使用


这副图像大小为100*100,中只有一个热点<area/>位于图像的右下角.中间用来描述位置的属性及其值为: coords="50,50,100,100",即:a=50,b=50,c=100,d=100.

 

看完之后不知道你明白了吗?

以上均为我个人的理解,我将他分享出来.如有错误,还请各位帮忙指正,谢谢!!


Mr.`xp

2012-05-03

Hacker天使马晓培
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于HTML5中图像标签usemap属性的解读
weixin_59556133的博客
09-30 1662
图像标签 标签 描述 <img> 定义图像 <map> 定义带有可单击区域的图像映射 <area> 定义图像地图中的可单击区域 <figure> 定义媒介内容的分组，以及他们的标题 <figcaption> 定义figure元素的标题 <img>是一个空元素（单标签)，以下是<img>图像标签的属性： <img >标签的属
<IMG>中UserMap的用法
weixin_34025051的博客
01-08 1435
usemap是&lt;img&gt;标签的一个属性，用作指明所使用的图像地图名。 后面的#Map的Map就是用&lt;map&gt;标签定义的一个图像地图，它的name属性是Map,像下面这样定义： &lt;map name="Map"&gt; &lt;area shape=rect coods="100,100,200,200" href="test1.html"&gt; &
img标签的usemap的用法
jwfpd
02-28 360
  java 代码 &lt;img src="/images/test.jpg" border="0" usemap="#Map1" name="flag"/&gt;       &lt;map name="Map1"&gt;      &lt;area shape="rect" coords="
IMG中UserMap的使用示例
09-28
总结来说，`<img>`标签的`usemap`属性和`<map>`标签配合使用，可以创建图像地图，为图像的不同部分添加交互性。这使得我们可以用一张图来表示多个链接，提升了用户体验，同时在设计上提供了更多的灵活性。理解并熟练...
map标签的参数详细介绍及使用示例
09-28
这里的`id`和`name`属性是必需的，它们为图像映射提供了一个唯一的标识符，以便在`<img>`标签中引用它。例如： ```html <img src="image.jpg" usemap="#mapName" /> ``` `usemap`属性的值（#mapName）应与`<map>`...
Html image 标签 配合 map使用
05-27
在上面的代码中，`<map>`标签的`name`属性定义了映射的名称，与`<img>`标签的`usemap`属性值相对应（#前缀表示本地引用）。`<area>`标签有三个主要属性： 1. `shape`：定义区域的形状，可以是`rect`（矩形）、`...
详解 html area标签
09-22
`<map>` 的 `name` 属性用于关联到`<img>` 标签的 `usemap` 属性，创建图像与映射之间的联系。同时，为了兼容性，`<map>` 还可以设置 `id` 属性，两者都可以被 `usemap` 引用，但浏览器可能会优先使用 `id`。 示例...
html标签使用
10-26
`<img>`标签除了基本的`src`和`alt`属性，还可以设置`width`和`height`调整大小，`title`属性提供鼠标悬停提示，`usemap`用于创建图像映射。 HTML 使用技巧 - 保持代码结构清晰，使用缩进和空行。 - 遵循语义化原则...
img 标签的 usemap 属性
weixin_33705053的博客
01-08 260
<img src="1.gif" alt="Planets" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="11,10,180,180" href="detail/Best_marketing.html"> <area shape="rect" coords="198,13,3...
img标签usemap属性
zhouruitao的专栏
06-23 416
html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。   看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。   但点击地图上的省份却可以出发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。   当然还要定义一个map标签。整份代码如下：   &lt;html&gt; &lt;head...
img usemap attribute
mychao的专栏
04-11 1374
usemap是标签的一个属性，用作指明所使用的图像地图名。 后面的#Map的Map就是用标签定义的一个图像地图，它的name属性是Map,像下面这样定义： ... 使用时： 图像地图把一幅图像分成若干个区域，点击不同的区域会进入不同的页面。为了创建客户端图像映像，需要增加新属性USEMAP如下：〈IMG SRC="map_name.gif"
HTML 图片热区（img usemap）
热门推荐
司马懿的西山居
02-13 1万+
<img> element ‘s attribute: usemapMDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img The partial URL (starting with ‘#’) of an image map associated with the element. Usage note:
img usemap属性 中国地图链接
zhanyu1984的专栏
08-24 236
html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。 　　看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。 　　但点击地图上的省份却可以触发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。 　　当然还要定义一个map标签。整份代码如下： 　　 　　 　　...
[html] html如何创建图片热区（img usemap）？
歌谣的博客
04-16 808
[html] html如何创建图片热区（img usemap）？ <img src="china.gif" usemap="#mymap"> <map name="mymap"> <area shape="rect" href="a.html" coords="0,0,50,50"> <area shape="circle" href="b.html" coords="120,80,50"> <area sha
html<img>标签的usemap属性
zhouyan_ll的专栏
01-02 990
详细内容见http://www.w3school.com.cn/tags/att_img_usemap.asp 其中usemap中coords="788,43,917,67"是指左上角的坐标和右下角的坐标。 例：                            http://www.2909999.com/swt/" target="_blank" />
html<img><map><area>标签总结
阿斯卡Asika的博客
04-04 3660
html<img><map><area>标签总结
html img标签里属性介绍
最新发布
05-10
在 HTML 中，`<img>` 标签用于在网页上嵌入图像。...这些属性可以通过在`<img>` 标签中使用键值对的方式来设置，例如： ```html <img src="image.jpg" alt="A beautiful image" width="500" height="300"> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值