有些网页制作爱好者提出了这样
个问题——如何使用Dreamweaver制作出交换图像来
今天
我向大家介绍制作复杂交换图像
思路方法相信能够对大家有所帮助 制作效果我们要制作出
列7个按钮图片并且在这列按钮图片前面加上个指针我们要实现效果是当我们在将鼠标移向某个按钮图片时候这个按钮上面文字变换颜色并且指针指向这张图片(效果如图1所示)![](\"http://127.0.0.1/Files/BeyondPic/2007-4/19/0741913333061852.jpg\")
图1
制作原理
交换图像
制作原理是应用到Dreamweaver中行为面板上翻转图像(Swap image)这个工具将它设置成为当产生鼠标悬停在某个按钮图片动作时候让按钮本身实现个图像交换(交换成为黄色文字图片)和此同时设计指针图像交换(交换成为指针指向当前按钮指针图片)以实现上述效果实现^-^:其实网页上
些东西看起来似乎很神秘可究其根源它也只不过是几张图片或几个图层简单变化而已制作材料
这里演示
是7张按钮图片翻转所以我们需要14张按钮图片和7张指针图片共21张图片制作来实现所示效果其中7张前台按钮图片分别命名为B1-1~B1-77张后台按钮图片分别命名为B2-1~B2-7其中7张指针图片分别命名为Z1~Z7它们指针分别指向第到第 7个按钮您可以用Fireworks等图片制作软件Software来制作按钮图片制作思路方法
1、建立网页文件
2、插入
个7乘2表格并且把左面列表格合并用来插入指针图片而右面 7个表格用来插入按钮图片3、在左面
表格中插入第张指针图片Z1在右面7行单元格中分别插入蓝色前台按钮B1-1~B1-7(效果如图2所示)![](\"http://127.0.0.1/Files/BeyondPic/2007-4/19/0741913333055665.jpg\")
图2
4、点击“窗口(Windows)→行为”
调出行为面板5、选中第
个要设置行为图片这里是写有“指导思想”按钮图片即图片B1-16、点击加号按钮
在弹出菜单下选择交换图像(Swap image)弹出交换图像对话框我们主要部分设置将在这个对话框中进行7、点击对话框当中
浏览按钮然后选择好这张按钮图片将要翻转成目图片在本例中是带有黄色文字按钮图片即图片B2-1然后点击确定8、重复第6步
操作在图像文本框中选中指针图片Z1然后再次点击浏览按钮把它翻转成第1个指针文件即Z1点击确定完成上述操作后行为面板上显示结果如图3所示![](\"http://127.0.0.1/Files/BeyondPic/2007-4/19/0741913333035497.jpg\")
图3
9、选中第2张按钮图片B1-2
按照上面思路方法将它本身翻转成按钮B2-2并且将指针图片翻转成第2号指针图片Z210、依以上步骤
分别将下面5张图片分别设置成为交换图像行为11、按F12预览
把鼠标指针悬停在每张图片上如何样感觉还不错吧？整理总结
当我们学习
种新网页制作技术时千万不要只停留在表面定要仔细用心琢磨在基本网页技术基础上不断地有自己创新也只有这样才可以制作出有自己特色网页图片来不断地丰富自己主页空间
最新评论