用Dreamweaver制作鼠标悬浮翻转图片

    我们在浏览网页的时候，经常能看到鼠标经过一张图片时变换成另一张图片的效果，看起来很炫，但用Dreamweaver做起来其实很简单。

    我们先准备两张尺寸一样大的图片，如图一，将第一张命名为hover1.gif，第二张命名为hover2.gif。
新建一个空白网页，新建一个一行两列的表格，分别设置两个单元格宽为150像素，高为90像素，并使内容居中对齐，将hover1.gif图片插入到第一个单元格中，如果还不会制作表格，请看前面的文章《如何在Dreamweaver中制作嵌套的表格》。

    接下来就要制作悬浮翻转效果了，将光标指到第二个单元格中，点击“插入工具栏”中图像按钮边上的下箭头，在下拉菜单中选择“鼠标经过图像”，如图二，随后填写弹出的对话框中的信息,参照图三。

  
图像名称，就是给图片命名的名称，是<img>标签的id；
  
原始图像，就是网页加载完毕后该位置显示的默认图片；
  
鼠标经过图像，即鼠标悬浮在图片上时的翻转图像；
  
预载鼠标图像，这个选项最好勾选，选中后它会在打开页面时预载悬浮图像，不会出现鼠标悬在图片上时再重新加载而变成空白块的现象，勾选此项同时会在页面源代码的body中加入一段onload="MM_preloadImages('abang2.gif')"的代码，意思就是页面加载时预载此图片。
  
替换文本，这个选项会在鼠标悬浮和加载不出图片时显示你所填的文字作为提示；
  
按下时，前往的URL，顾名思义，它就是你点击图片后进入的网页，这里所填的是相对地址，如果要转到其他外部网址一定要以http://开头。


　　以上内容全部填好后点击确定按钮，Dreamweaver就会自动在页面中加入一段Javascript代码，看不懂它没关系，只要会用就可以了。鼠标悬浮翻转图片效果就完成了。好了，按下F12预览一下，左面的图片是怎么动都不会变的，右面的则是带翻转效果的，的确很简单吧。