WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>Dreamweaver>>Dreamweaver网页制作教程:第五讲--Dreamweaver鼠标经过图像变换图片效果

Dreamweaver网页制作教程:第五讲--Dreamweaver鼠标经过图像变换图片效果

[ 录入者:91ctc | 时间:2015-06-23 11:35:16 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

本文介绍使用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。

Dreamweaver鼠标经过图像变换图片效果

图1

Dreamweaver鼠标经过图像变换图片效果

图2

2、在DW中新建一个空白HTML文档。

Dreamweaver新建html文档

3、把光标定入到设计视图的空白区域。

4、选择插入鼠标经过图像。

或者:

5、弹出对话框。在这里要选择好你的原始图像和鼠标经过图像。按下时,前往URL也选择好。

DW鼠标经过图像对话框

6、设置好之后,确定。

DW鼠标经过图像

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实现鼠标经过图像变换图片

不用javascript,使用CSS和HTML实现鼠标经过图片变换图片效果

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

下一篇:没有了!
您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号