HTML元素 - map的用法

本文详细介绍了在HTML中使用map标签为图像创建映射和超链接的方法,包括坐标系统的应用,以及如何通过坐标定义图像上的特定区域作为链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在Html中,给图像使用map标签,可以给图像的某个部分建立超连接,用法如下:

<img src=img.gif usemap="MAP-Name">
<map name="MAP-Name">
<area shape="rect|circle|poly" coords="#" href="url">
</map>

其中,坐标coords对各个shape的解释如下:

shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right

即,当shape是矩形时,coords表示矩形左上及右下(x2, y2)的坐标
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius

即,当shape是圆形时,coords表示圆中心点坐标(x, y)及半径

shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...

即,当shape是poly多边形时,coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...



注意:以上所有坐标都是相对于图形img.gif左上脚坐标而言的



以下是一个例子:

<img src="mapimg.gif" usemap="#Face">
<map name="Face">
<area shape="rect" href="page.html" coords="140,20,280,60">
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<area shape="circle" href="new.html" coords="80,100,60">
</map>

-------------------------------------------------------------------------------------------------------------

HTML元素 - map


包含客户端图像映射的坐标数据。

Contains coordinate data for client-side image maps.

所谓图像映射,就是带有预先定义区域的图像,这些区域包含了指向其它文档或锚的链接。例如,你可以在一副太阳系的图像上创建用户点击后可浏览不同星球的链接。

map 对象由 IMG 元素的 USEMAP 属性引用,格式如下:

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

MAP 元素包含一组定义图像中链接区域的 AREA 元素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值