Dreamweaver网页制作教程：第五讲--Dreamweaver鼠标经过图像变换图片效果
本文介绍使用Dreamweaver鼠标经过图像变换图片效果，其核心原理还是使用javascript实现鼠标经过图像变换图片，对于不熟悉javascript的用户，其实使用Dreamweaver也可以实现鼠标经过图像变换图片效果，而且浏览器兼容性不错，看看演示。本例使用Dreamweaver 8制作（目前最新的Dreamweaver版本是Dreamweaver CC，或者也有不少用户使用Dreamweaver CS6。其实不论哪个版本，使用方法大体一致。读者不要纠结Dreamweaver版本。小编最早学习Dreamweaver的时候，是从Dreamweaver MX开始学起，后来使用了Dreamweaver MX 2004，到了2005年，Dreamweaver 8发布，最终，Macromedia公司被Adobe公司花费35亿美元收购。Dreamweaver 8是经典版本）。
制作步骤：
1、先用PS准备两个图片（实际应用中，这两个图片可以是导航栏上的图片，图片上打上文字），图片1是默认显示的，图片2是鼠标移到图片1上再显示图片2。
图1
图2
2、在DW中新建一个空白HTML文档。
3、把光标定入到设计视图的空白区域。
4、选择插入鼠标经过图像。
或者：
5、弹出对话框。在这里要选择好你的原始图像和鼠标经过图像。按下时，前往URL也选择好。
6、设置好之后，确定。
7、这样鼠标经过图像就完成了。
8、CTRL+S，保存，F12预览效果。
知识延伸：
仔细研究发现，Dreamweaver在这些图形化操作过程后，给我们生成了相应的动态javascript代码。如图所示是刚才我们制作的效果的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>【www.91ctc.com】Dreamweaver网页制作教程：第五讲——Dreamweaver鼠标经过图像变换图片效果</title>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/2.jpg')">
<p>鼠标移到图片上看看效果</p>
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('image1','','images/2.jpg',1)"><img src="images/1.jpg" alt="关于我们" name="image1" width="332" height="113" border="0" id="image1" /></a>
</body>
</html>不难发现，Dreamweaver为我们自动生成了三个JS函数。有兴趣的访客可以研究一下。
相关推荐：
不用javascript，使用CSS和HTML实现鼠标经过图片变换图片效果