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

 找回密码
 立即注册
查看: 597|回复: 17

[CSS/HTML] Lesson01_08 图像地图

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2007-2-9 00:00:00 | 显示全部楼层 |阅读模式

1、图像超链接:
格式为:<a href="url"><img src="url"></a>

2、图像地图是什么?
把一个图分成多个区域,每个区域指向不同的URL地址

3、怎样产生图像地图
(1)先要定义出图像的各热点区域的形状、位置坐标、及其指向的url地址信息,这个过程叫做图像热点映射。
这个过程要用<map name=mapname></map>标签对进行说明,其中的name属性为这个热点映射指定了一个名称。
(2)图像热点中映射中的各个区域用<area>标签说明,<area>标签的格式为:
<area shape="形状" coords="坐标" href="URL">HREF部分也可以用nohref表示,表示在这个区域单击无效。 (3)定义好了后,接着就要在<img>图像标签中增加一个名为usemap的属性设置,如下:
<img src="url" usemap="#mapname">

例:代码如下:
<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="http://www.loncer.cn">
<area shape="rect" coords="0,50,150,50" href="http://www.thinkme.cn">
<area shape="rect" coords="50,0,100,50" href="http://www.sina.cn">
</map>
<img src="200729134227624.gif" usemap="#mymap">
效果如下:

shape属性的设置说明:

  • rect定义一个矩形区域,coords属性设置为矩形的左上角,右下角的坐标,各个坐标值用,号分开;
  • poly定义一个多边形的区域,coords属性设置值为多边形各顶点的坐标值;
  • cicle定义一个圆形区域,coords属性设置值为圆形坐标及半径,前两个为坐标,后一个为半径。

     

    例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下: 例:代码如下: 效果如下:
  • 回复

    使用道具 举报

    0

    主题

    1万

    回帖

    0

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    0
    发表于 2022-8-10 23:20:18 | 显示全部楼层
    额UI废物iuhfujewfiewnnfen
    回复 支持 反对

    使用道具 举报

    3

    主题

    2万

    回帖

    50

    积分

    注册会员

    Rank: 2

    积分
    50
    发表于 2023-1-28 23:08:12 | 显示全部楼层
    哟哟哟哟哟以偶
    回复 支持 反对

    使用道具 举报

    0

    主题

    2万

    回帖

    0

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    0
    发表于 2023-5-16 04:30:46 | 显示全部楼层
    我要金豆金豆金豆
    回复 支持 反对

    使用道具 举报

    2

    主题

    2万

    回帖

    221

    积分

    中级会员

    Rank: 3Rank: 3

    积分
    221
    发表于 2023-9-17 22:31:45 | 显示全部楼层
    这个源码还可以
    回复 支持 反对

    使用道具 举报

    0

    主题

    2万

    回帖

    120

    积分

    注册会员

    Rank: 2

    积分
    120
    发表于 2024-5-8 08:58:41 | 显示全部楼层
    笑纳了老板
    回复 支持 反对

    使用道具 举报

    1

    主题

    2万

    回帖

    59

    积分

    注册会员

    Rank: 2

    积分
    59
    发表于 2024-7-14 06:05:22 | 显示全部楼层
    数据库了多久撒快乐的健身卡啦
    回复 支持 反对

    使用道具 举报

    0

    主题

    2万

    回帖

    186

    积分

    注册会员

    Rank: 2

    积分
    186
    发表于 2024-7-27 06:34:12 | 显示全部楼层
    好东西可以可以可以可以
    回复 支持 反对

    使用道具 举报

    0

    主题

    1万

    回帖

    68

    积分

    注册会员

    Rank: 2

    积分
    68
    发表于 2024-9-15 03:38:13 | 显示全部楼层
    8888888888888888
    回复 支持 反对

    使用道具 举报

    13

    主题

    2万

    回帖

    85

    积分

    注册会员

    Rank: 2

    积分
    85
    发表于 2024-9-30 02:49:37 | 显示全部楼层
    。。。。。。。。。。。。。。。
    回复 支持 反对

    使用道具 举报

    高级模式
    B Color Image Link Quote Code Smilies

    本版积分规则

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

    GMT+8, 2024-11-22 16:14 , Processed in 0.188473 second(s), 26 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

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