巧用Behaviors制动态图片说明

　　我们在网站研发的过程中，有时需要制作图片集的网页，当然能给每张图片再配以文字说明，那确是锦上添花的事。但是若一幅图片下面配一段文字说明，那么页面一定显得很允长。若是能使任何图片说明在一个地方显示，且随着鼠标在图片间移动，说明的文字也动态地随之更换，那么页面就简炼多了。Behaviors的Set Text of Layer动作能够帮我们实现这种动态效果。请下面的效果图。

　　图1 鼠标不在图片上

　　图2 鼠标在第一张图片上

　　看到了吧！当鼠标在第一张图片上时，图片的说明文字也改成了第一张图片的说明了。效果还不错吧？这种效果原来都是用Javascript做的，用Behaviors的另一个动作“Show-Hide Layers”也能实现，我在“活用图层”的有关文章中曾介绍过，但操作要稍复杂些。好了，让我们来看看具体的制作方法。
　　1、由于Set Text of Layer动作实际上是往一个图层上写文本，因此要先插入一个图层，注意要记一下图层的名称（在图层的属性面板上），一般在图层上写一些关于图片集总的说明，免得一开始时图层上一片空白。若想使图层醒目一点，就给他加上背景色，另外适当注意一下图层和图片的相对位置；
　　2、插入一张图片，然后选取他，再按F8调出Behaviors面板，在面板上按“ ”图标，在拉出的列表中，把鼠标在“Set Text”上点一下，在其拉出的子列表中选择Set Text of Layer动作，立即弹出如下图所示的对话框：

　　图3 Set Text of Layer动作对话框

　　3、上图Set Text of Layer动作对话框中，“Layer”右面的选择框是选择图层名称的，也就是选择您要往那个图层写信息，这就是我为什么在第一步中要您记住图层名称的目的所在。在本例的网页中，要写信息的图层是“Layer6”，所以我选择了他，您在制作时应选择合适的图层名（也能够点右面那个三角形按钮，他将拉出当前页面上的任何图层名的列表供您选择）；下面那个大框是供您写信息的，但Dreamweaver3在这里有一个小“Bug”，他只支持英文，不支持中文，若您写上中文，写时正常，在浏览时却是乱码。但是问题不大，您在这里什么都不要写，其实写了也白搭。按OK按钮返回Behaviors面板；
　　4、在Behaviors面板上把触发事件改为onMouseOver，也就是使其效果为：当鼠标移到该图片上时向图层上写信息；
　　5、打开源代码检视窗，在Set Text of Layer动作的代码中的最后一个单引号中写上当鼠标移到该图片上时要在图层上显示的信息，若您还不太清楚在那里写，那么就看下这段源代码吧，那是本例中第一张图片的动作调用Javascript程式的代码：
< img src="image/cssp1.jpg" width="200" height="134" onMouseOver="MM_setTextOfLayer('Layer6','',' 这是一张仙人指路的照片，您看那位仙人千万年来，不辞劳苦地给每一个黄山的攀登者指路，其精神是多么值得敬佩！')" >
　　把这个信息写完后，这张图片的操作就结束了，其他图片的说明信息只要仿此操作即可。全部完工后按F12浏览，就能看到预期效果了，但是不要高兴得太早，图层的位置（也就是图片说明信息显示的位置）可能不怎么理想，这是图层的一个缺陷（避免这种定位不准现象的办法是用子层，这一点我在“活用图层”的系列文章中已介绍过），您能够根据浏览时的情况在编辑窗中调整一下图层的位置。
　　Set Text of Layer动作几乎可加载到任何的标记上，这就给我们提供较大的创作空间，如加载到终极链接上，当鼠标移到链接就显示一段链接的说明，使浏览者在未打开链接的网页前就对该网页有一个大致的了解；对于一些比较复杂的操作说明，若把该动作加载到标记上，当浏览者把鼠标移到这段文字上时将显示一段更为周详的帮助信息，是不是使浏览者感到更亲切。不多讲了，开动您的大脑，发挥您的创造力吧！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有