5.2.6一般图像链接(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

5.2.6一般图像链接 Dreamweaver中的图像链接主要包括：一般图像链接、图像热点链接、鼠标经过图像超链接等。 创建一般图像超链接步骤： 在网页中插入一张要用来做链接的图片； 在菜单栏中选择【插入】→【图像】命令；或在【插入】面板的【常用】模式中，单击【图像】按钮 。会弹出如图所示的对话框，选择图像源文件。 在【属性】面板的“链接”框中输入链接的目标地址，如图所示： 链接代码是： <a href="http://www.baidu.com/" title="图像超链接"><img src="http://www.baidu.com/img/baidu_logo.gif" /></a> 5.2.7图像热点链接 热点链接也称热区链接，也有的称图像地图。 图像热点链接用来划分同一张图像上不同区域的超链接。图像热点就是带有预先定义区域的图像，这些区域包含了指向其他文档或锚点的链接。例如在网页版中国地图中，单击某省的名称，便会打开新网页以显示该省的地图或介绍。 1. 运行Dreamweaver CS4，打开网页文件，并选择文件内的图像，如下图所示。选中图像后在如下图所示的【属性】面板中选择“矩形热点工具”、“圆形热点工具”、“多边形热点工具”之一，在图像相应位置上给四个直辖市分别绘出不同的区域，即有四个热点或热区。 使用热点工具绘制热点 设置图像热点的热点工具 【属性】面板的4个热点工具按钮名称说明如下表所示： 热点工具按钮 名 称 说 明 指针热点工具按钮 用来选择或移动链接区域范围 矩形热点工具按钮 用来绘制图像地图中的矩形区域 圆形热点工具按钮 用来绘制图像地图中的圆形区域 多边形热点工具按钮 用来绘制图像地图中的多边形区域 2.选择“北京”上面的热点，在“链接”文本框中添加链接地址“beijing.htm” 在“替换”文本框设置选区的提示文字为“北京市”，如图所示： 3.同样方法，将其它三个直辖市的热点也分别链接到不同的网页：tainjin.htm、shanghai.htm、chongqin.htm。 4.保存，预览效果。 5.2.8 鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。必须用以下两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以与第一个图像的属性匹配。鼠标经过图像自动设置为响应 onMouseOver 事件。您可以将图像设置为响应不同的事件（例如，鼠标单击）或更改鼠标经过图像。其步骤如下： 在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 使用以下方法之一插入鼠标经过图像： 在【插入】面板的【常用】模式中，单击【图像】展开式按钮 ，然后选择【鼠标经过图像】图标按钮 。【插入】面板中显示【鼠标经过图像】图标按钮 后，您也可以将该图标拖到“文档”窗口中。 在菜单栏中选择【插入】→【图像对象】→【鼠标经过图像】命令。 执行上述方法之一后，会弹出下图： 设置选项，然后单击【确定】按钮。 图像名称：鼠标经过图像的名称。 原始图像：页面加载时要显示的图像。在文本框中输入路径，或单击“浏览”并选择该图像。 鼠标经过图像：鼠标指针滑过原始图像时要显示的图像。输入路径或单击“浏览”选择该图像。 预载鼠标经过图像：将图像预先加载浏览器的缓存中，以便用户将鼠标指针滑过图像时不会发生延迟。 替换文本： 这是一种（可选）文本，为使用只显示文本的浏览器的访问者描述图像。 按下时，前往的 URL：用户单击鼠标经过图像时要打开的链接网页文件。输入路径或单击“浏览”并选择该文件。 注： 如果您不为该图像设置链接，Dreamweaver 将在 HTML 源代码中插入一个空链接 (#)，该链接上将附加鼠标经过图像行为。如果删除空链接，鼠标经过图像将不再起作用。 在菜单栏中选择【文件】→【在浏览器中预览】，或按【F12】键。 在浏览器中，将鼠标指针移过原始图像以查看鼠标经过图像。 注： 不能在“设计”视图中看到鼠标经过图像的效果。 提示：鼠标经过图像的链接文件路径可在【属性】面板的“链接”框中更改。 $$