简单搭建网站
从零开始学习

html图像映射

上次讲超链接的时候就讲过图像超链接,非常的简单好用,上文提到过html图像映射,html图像映射听名字好像非常的高端非常的难,其实不然,简单来说html图像映射其实就是图像超链接的升级版,图像超链接是一整张图片点一下就跳转网页,而html图像映射就更为好用,它是指定一块区域来跳转,一张图片可以创建无数个区域,一张图片一点就跳转还是不怎么好,小图片的的话就还好,但是如果你是设置的大图的话就最好使用图像映射,大的图片容易让用户误触,但是你缩小跳转的范围,比如在图片中间加一个点我跳转的字眼,然后创建一个图像映射上去,这样用户就只能点中间才能跳转,点图片其它地方就不会跳转,这样就不会导致误触这一类问题

还不懂html是什么或者不知道图像超链接怎么做的请看下面文章了解一下

html图像映射

下面是图像映射的基本标签,可能有点难理解,但是你看后面的演示就会明白

标签标签作用
<map>图像映射标签
usemap图像处映射标记
<area>定义映射区域
name或idmap映射区对应usemap标记
shape定义映射区形状
coords定义映射图像坐标
rect矩形
circle圆形
poly多边形

矩形图像映射

#矩形图像映射代码#
<img src="1.jpg" usemap="#map">
<map id="map" name="map">
<area shape="rect" coords="x1,y1,x2,y2" href="url"/>
</map>

(x1,y1)定义矩形左上角,(x2,y2)定义右下角,你可以用图像编辑工具查看位置,坐标和半径都是相对于像素而言,html映射和数学坐标不同,距离理解看下图

矩形图像映射示例

提示:你可以先修改部分代码再运行。

圆形图像映射

<img src="1.jgp" usemap="#map"
<map id="map" name="map">
<area shape="circle" coords="x1,y1,r" href="url">
</map>

x1,y1为圆形的中心坐标,r为圆形的半径

圆形图像映射示例

提示:你可以先修改部分代码再运行。

多边形图像映射

<img src="1.jpg" usemap="#map">
<map id="map name="map>
<area shape="poly" coords="x1,y1,x2,y2,xn,yn,">
</map>

多边形和矩形没什么两样,要注意的是最后一个点应该和第一个点相同,有些浏览器会自动补全,但是还是建议大家还是规范自己的写法

多边形图像映射示例

提示:你可以先修改部分代码再运行。

图像映射可以规范你的图片超链接,防止误触,矩形和圆形都是非常简单的,就是多边形要复杂一点,但是多边形也比较自由,你想做什么形状就可以做什么形状,大家多多练习,一定要了解这个坐标是怎么定位的才可以使用图像映射

赞(1) 打赏梁某人
未经允许不得转载:每篇文章都是博主的心血,偷盗文章事最可耻的事情梁某人的个人网站 » html图像映射

发表评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

梁某人的个人网站

免费云存储免费云存储

靓仔!打赏一元试试看啊

支付宝扫一扫打赏

微信扫一扫打赏