主题:  初学者请教--HTML--图像映像图

洋洋

职务:普通成员
等级:1
金币:0.0
发贴:26
注册:2003/2/20 9:30:31
#12003/2/23 13:41:53
对不起打扰大家了:

图像映像图是一个连接吗?
他的主要作用是什么?
(我看书越看越晕~~)



我佛山人

职务:版主
等级:4
金币:16.0
发贴:2269
注册:2002/8/7 15:09:27
#22003/2/23 16:35:38
可以算是链接的一种,主要用作图片的局部链接



洋洋

职务:普通成员
等级:1
金币:0.0
发贴:26
注册:2003/2/20 9:30:31
#32003/2/24 1:39:38
什么叫“算”是链接的一种,它和链接有什么不同呢?



不是高手

职务:普通成员
等级:3
金币:5.0
发贴:1352
注册:2002/8/23 2:27:18
#42003/2/24 7:09:25
1楼说的是热点连接吗?
那就是用图片的一个区域作为连接的区域。

编辑历史:[这消息被aquarior编辑过(编辑时间2003-02-24 07:11:58)]


南宫彩虹

职务:普通成员
等级:2
金币:5.0
发贴:684
注册:2002/1/17 10:13:36
#52003/2/24 7:33:10
通过属性面板的工具可以把图片划分成不同的区域,然后把它做成超链接,比较方便。
另外 ,映像图有两类,服务器端的和客户端的。



mantou_5d

职务:普通成员
等级:3
金币:1.0
发贴:437
注册:2002/10/27 0:08:41
#62003/2/24 8:48:09
什么?映像图有两类,服务器端的和客户端的,怎么回事?给讲讲!谢谢!我只知道图象热点,那应该算是客户端的吧!



洋洋

职务:普通成员
等级:1
金币:0.0
发贴:26
注册:2003/2/20 9:30:31
#72003/2/24 13:19:19

服务器端的图像映像图存在一些较大的问题,现在很少用到。
缺点一:对于一次特定的点击,用户不知道对应的URL,惟一能看到的是当前的xy的坐标值。
缺点二:在转到下一网页之前,必须请求服务器。

使用客户端的图像映像图的优点:
1.在确定目标一址时,不用访问服务器。
2.在用户的鼠标指针指向图像时,可以显示地址的URL
3.可以在本地生成和测试图像映像图
_____多谢大家!



{ 在指尖上绽放的花朵 }

职务:普通成员
等级:5
金币:14.0
发贴:3209
注册:2002/7/25 21:24:11
#82003/2/25 12:18:13
图像映像称为“可点击图像”,当使用鼠标单击网页上的图像时,可以链接到指定的URL。图像映像的格式有两种:一种是服务器端图像映像(NCSA),创建的图像映像描述在不同于HTML文件的单独的HTML映像文件中,其映像保存在WWW服务器上;二是客户端图像映像(CSIM),它是指客户仅在Web浏览器上能处理的图像映像,由于其映像保存在HTML文件中,并可在浏览器上进行处理,所以具有管理简单,使用方便的优点。
在HomePage Builder 2001中,我们可以通过一定的形状(多边形、圆形、矩形)及其坐标定义图像上的每一个区域。例如,如果单击网页上任意位置时,则可以为其提供该位置的详细信息。那么,如何充分利用图像映像来创建精美,同时又可为访问者提供导航信息的页面呢?下面我们来仔细看看具体实施过程。

绘制图像映像区域
进入“标准”编辑窗口,在当前页面的适当位置插入一幅图像,用鼠标右键点击该图像,选择关联菜单中的“编辑图像映像”菜单项,被选定的图像将显示在“图像映像编辑器”对话框中(图1)。
要创建多边形的图像映像时,请单击“多边形”按钮,然后在对话框中所显示的图像上单击鼠标左键,创建标记多边形的一个起始点。在图像另一位置单击鼠标,可以指定多边形的另一端点,双击鼠标左键,则起始点和最后点成直线连接,完成多边形区的绘制。
要创建圆形图像映像时,单击“圆形”按钮。首先按住鼠标左键并拖动,随鼠标的移动,绘制出圆形线,然后释放鼠标键。
要创建矩形图像映像时,请单击“矩形”按钮。在起始点按住鼠标左键,向其对角线位置拖动,以框选目标区域,释放鼠标键则完成所需的矩形区。
要创建图像映像的类型时,可在映像类型文件列表框中选择。由于HomePage Builder仅支持客户端图像映像(Client-Side Image Map),所以我们选择CSIM映像类型。

为图像映像设置链接目标
在“图像映像编辑器”对话框中,单击“显示/隐藏映像列表”按钮,对话框向下伸展,列出设置的映像。从映像文件列表框中,选择编辑链接内容的外形,再在图像上选择显示大小调节块(黑色小方块)的图形。单击“编辑”按钮,显示指定链接目标属性对话框(图2)。直接在映像列表中所选定的位置单击鼠标右键,然后选择关联菜单中的“编辑”命令,也可以打开此对话框。
在“至文件”标签中,“文件名”方框用于指定链接目标的文件名。单击“浏览”按钮,可以在硬盘中选择映像链接的目标HTM文件。如果单击“通过浏览器获取URL”按钮,则可在“文件名”方框中获取在当前使用的浏览器中显示的URL。“目标”下拉列表用于指定用户单击链接时显示的页面显示在哪个页栏中。可以指定如下已定义的值:新窗口(打开新窗口以显示页面)、同一页栏(在当前显示页栏的相同位置显示页面)、父级页栏(在当前显示页栏的父级页栏显示页面)、整个窗口(在整个窗口显示页栏)。
如果需要为图像映像或字符串建立电子邮件链接,可以在“至URL”或者“至电子邮件”标签中(图3)进行设置。只需在“发送到”字段中指定电子邮件地址,例如,soft@cce.com.cn,然后在“主题”字段中指定电子邮件的主题(Subject)即可。通过建立电子邮件链接,当使用鼠标单击图像映像或字符串时,就可以启动微软Outlook Express邮件程序来撰写、发送电子邮件到指定的邮件地址。
此外,还可以在“至标签”中,指定标签的字符串。在此指定的标签可作为链接的跳转目标使用;至于“其它”标签,可以设置存取帐号和标签索引,一般情况下请不要在字段中做其它任何设置。
提示:1、要更改链接目标,可将光标移至链接的字符串或图像处,从菜单栏中选择“编辑”→“链接”,然后在“属性”对话框中更改链接目标。
2、要释放目标链接,可将光标移至链接的字符串或图像处,从菜单栏中选择“编辑”→“释放链接”命令。

为链接目标设置替换文本
所谓替换文本,既指向该链接时显示的提示信息。虽然图像映像提供了精巧的布局,如果不能看见图像,则不可能链接。例如,对于使用不能显示图像的Web浏览器的人,以及使用嵌入音频弥补视觉缺陷的页面,图像映像中的链接可能是不可访问的。但是如果使用图像映像时,同时提供普通的文本链接,则可以弥补这一缺点。
为链接目标设置替换文本或更改替换文本,可采用以下方法之一:
1、单击“图像映像编辑器”对话框中的“显示/隐藏映像列表”按钮,对话框向下伸展,列出设置的映像(图4);
2、从映像文件列表中选择设置替代文本的外形,然后在图像上选择显示大小调节块(黑小方块)的图形;
3、在“替换文本”文本框内中输入区域的含义和链接目标的说明,以更新选定图形的替代文本栏。
更改替换文本最快捷的方法是:用鼠标右键单击图像映像,选择关联菜单中的“更改属性”,弹出“属性”对话窗口,在“替换文本”文本框内修改链接目标的说明即可。

注意事项:1、更改“图像映像编辑器”对话框中的“映像”字段时,如果是客户机端则指定映像名,如果是服务器端则指定映像文件名(.map)。在保存图像映像后,如果要释放图像映像,可以从菜单栏中选择“编辑”→“图像映像”→“删除”命令。
2、当“映像”字段中指定的映像已在当前编辑页面中使用,或指定名称的文件已存在显示信息,需要重新指定其它的映像名称或映像文件。如果是客户机端图像映像,可在“映像”字段中更改映像名。如果是服务器端图像映像,则请在“映像”字段中更改映像文件名。

                      文转《中国电脑教育报》



5DDreamweaver版主

职务:版主
等级:3
金币:10.0
发贴:1031
注册:2001/10/13 14:38:50
#92003/2/25 21:42:26
创建图象地图

图象地图就是将一个图片切分或者使用“热区”分隔成块,当点击热区时,将引发一个动作,比如打开一个新文件。你可以使用图象属性监测器来创建和编辑灵活的客户端站点地图。

客户端图象地图将链接信息保存在HTML文件中,而不是想服务端图象地图那样将链接信息单独存放在文件中。当访问者点击图片中的热区时,相关的URL地址被直接送到服务器。这使得客户端图象地图比服务端图象地图更快,因为服务器不用再去解释访问者究竟点击了哪里。以下浏览器支持客户端地图:Navigator 2.0以上版本、NCSA Mosaic 2.1和3.0版、以及Internet Explorer所有版本。

Dreamweaver不会改变服务端站点地图已有的参数,你可以在同一个文件中同时使用服务端和客户端图象地图。对于支持客户端图象地图的浏览器,将优先使用客户端图象地图。如果想要在文件中包含服务端图象地图,就必须写入合适的HTML代码。

创建客户端图象地图:

1 选中图片。
2 点击属性监测器 右下角的展开箭头显示出全部属性。
3 在Map Name(地图名称)栏中,输入地图的名字,这个名字必须是唯一的。
注:如果你在同一个文件中使用多个图象地图,请确定每个图象地图的名字都是唯一的。
4 用以下方法之一定义图象地图区域:
选中圆形工具,在图片上拖动,创建一个圆形热区。
选中矩形工具,在图片上拖动,创建一个矩形热区。
选中多边形工具,设定不规则形状的热区。单击要设定的形状的每个角,然后点击箭头工具闭合图形。
当热区创建完成后,热区属性检测器就显示出来。(关于热区属性监测器,详情请见设置热区属性。)
5 在热区属性监测器的Link(链接)栏,点击文件夹图标浏览选择当点击热区后要打开的文件,或者直接输入要打开的文件名。
6 要设置链接文件打开的窗口,请在目标栏中输入目标窗口的名字,或者直接在目标弹出窗口中选择框架名。
7 在Alt栏,输入在纯文本浏览器中替代图片显示的文字。
有些浏览器会在访问者将鼠标指向热区时显示这些文字。
8 重复步骤4至7在图象地图中添加其他热区。
9 当你完成了图象地图的制作,点击文件空白区域转换属性监测器。



5DDreamweaver版主

职务:版主
等级:3
金币:10.0
发贴:1031
注册:2001/10/13 14:38:50
#102003/2/25 21:43:12


设置热区属性

当热区被选中时,热区属性列表显示在属性监测器中。

Map(地图)指定图象地图的名称。在用一文件中,为每个图象地图设定不重复的名字。

Link(链接)指定了当访问者区击热区后显示的文件或URL地址。如果链接的文件是在同一个站区里面的,请使用相对路径。(文件名以file://打头的不是相对路径)。

Target(目标)指定了链接页面打开的窗口或帧。只有当热区设置了链接后,目标选项才是可用的。

当前文件中所有帧的名字都会显示在列表中。如果你所指定的帧不存在于当前页面的话,链接文件将在一个以你所指定的名字命名的新窗口中打开。你也可以从以下预设的目标名称中选择:

_blank在一个新的未命名的窗口中打开链接文件。
_parent在包含这个链接的窗口或帧中打开链接文件。如果包含这个链接的帧不是嵌套的,那么链接文件将用完整的浏览器窗口显示。
_self链接文件将在原来的窗口或帧中打开。这个目标设置是默认的,因此,一般来说不需要另行设置。
_top在整个浏览器中显示链接文件,因此会移除所有的分帧。


Alt设定在纯文本浏览器和需要手工下载图片的浏览器中替代图片显示的文字。



5DDreamweaver版主

职务:版主
等级:3
金币:10.0
发贴:1031
注册:2001/10/13 14:38:50
#112003/2/25 21:43:49

修改图象地图

编辑图象地地图的热区非常方便。你可以移动热区的位置,调整热区的大小或移动热区到层的前面或者后面。

你可以从一个文件复制图片和热区到另一个文件,也可以从一个图片复制一个或多个热区到另一个图片。图片和热区会以前被复制到另外的文件。

在一个图象地图中选择多个热区:

1 用热区选择工具选中一个热区。
2 用以下方法:
按住Shift键点击其他想要选择的热区。
按Ctrl+A键(Windows系统)或Command+A(Macintosh系统)选择所有的热区。



移动热区:

1 用热区选择工具选中要移动的热区。
2 用以下方法:
拖动热区到新的地方。
用Shift + 方向键朝选择的方向移动热区10象素。
用方向键朝选定方向移动热区1象素。



调整热区大小:

1 用热区选择工具选中要调整尺寸的热区。
2 拖动热区选择句柄改变热区形状或大小。



5DDreamweaver版主

职务:版主
等级:3
金币:10.0
发贴:1031
注册:2001/10/13 14:38:50
#122003/2/25 21:45:49

初学者有不懂的名词或对应菜单、命令不熟悉的话
可以先查一下DW的HELP