源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 296|回复: 27

[HTML/Xhtml] map标签的参数详细介绍及使用示例

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-9-9 18:26:50 | 显示全部楼层 |阅读模式
map标签定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像,下面为大家介绍下map标签的使用,感兴趣的朋友可以了解下 map标签必须成对出现,即

<map> ....</map>

同时map必须和area配合使用。

img标签里的usermap属性值必须与map标签里的id和name值完全一致

area标签:定义图片的点击区域 area 是单标签,不成对。

属性:

accesskey 快捷键

alt 图片提示文字

coords 定义和点击区域的图形的坐标

href 链接地址

nohref 图像点击可排除的区域,当不是有href时,需要使用nohref

shape 可点击区域的形状

tabindex tab键遍历

target 链接目标

代码实例:

复制代码代码如下:
<img src="images/logo.gif" usermap="#map"/>
<map id="map" name="map">
<area shape="rect" coords="a,b,c,d" target="_blank" href=""/>
<!-- a,b,c,d分别是矩形的左上角和右下角的坐标值 !>
<area shape="circle" coords="a,b" target="_blank" href="" />
<!-- a,b分别是圆形的圆心的坐标值 !>
<area shape="poly" coords="a,b..." target="_blank" href="" />
<!-- a,b分别是多边形的各个定点的坐标值 !>
</map>
回复

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2022-8-8 18:17:45 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-6 03:15:35 | 显示全部楼层
搞个免费的用用
回复 支持 反对

使用道具 举报

7

主题

2万

回帖

288

积分

中级会员

Rank: 3Rank: 3

积分
288
发表于 2022-9-28 18:22:12 | 显示全部楼层
不错的源码论坛
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2022-10-9 23:21:30 | 显示全部楼层
终于找到了,我擦
回复 支持 反对

使用道具 举报

4

主题

1万

回帖

60

积分

注册会员

Rank: 2

积分
60
发表于 2022-10-18 13:37:25 | 显示全部楼层
啦啦啦啦啦啦啦啦!
回复 支持 反对

使用道具 举报

0

主题

8878

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-13 20:28:06 | 显示全部楼层
66666666666666666666
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2023-3-10 20:48:53 | 显示全部楼层
66666666666
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2023-8-30 17:20:22 | 显示全部楼层
管灌灌灌灌灌灌灌灌灌灌
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

307

积分

中级会员

Rank: 3Rank: 3

积分
307
发表于 2023-11-10 23:05:41 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-12-5 03:30 , Processed in 0.068419 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表