请选择 进入手机版 | 继续访问电脑版

127社区

 找回密码
 立即注册

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

快捷导航
搜索
热搜: Dr.COMIT微讲座微博签名
查看: 126|回复: 0

[问题解答] 制作交互式图像/鼠标经过图像的两种方法 [复制链接]

小平  

网站编辑

发表于 2011-11-20 09:34:43 |显示全部楼层
本帖最后由 小平 于 2011-11-20 09:48 编辑

一、可视化操作法(优点:操作简单)
1.打开DW,依次点击“插入/图像对象/鼠标经过图像”;
2.选择“原始图像”和“鼠标经过图像”,再选择“按下时,要前往的URL”,确定后完成,自动生成的代码如下:
//HTML代码部分
  1. <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/1-2.gif',1)"><img src="images/1-1.gif" name="Image1" width="70" height="25" border="0" id="Image1" /></a>
复制代码
//JavaScript代码部分
  1. <script type="text/javascript">
  2. <!--
  3. function MM_swapImgRestore() { //v3.0
  4.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  5. }
  6. function MM_preloadImages() { //v3.0
  7.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  8.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  9.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  10. }

  11. function MM_findObj(n, d) { //v4.01
  12.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  13.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  14.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  15.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  16.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  17. }

  18. function MM_swapImage() { //v3.0
  19.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  20.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  21. }
  22. //-->
  23. </script>
复制代码
二、手写代码实现法(优点:代码简洁)
  1. <img src="../images/2-1.gif" width="70" height="25" border="0" onmouseover="this.src='images/2-2.gif'" onmouseout="this.src='images/2-1.gif'" />
复制代码
注:onmouserover是指当鼠标移到图片上时的事件;onmouseout是指当鼠标移出图片时的事件;this代表当前对象,src是img的图片源地址。


鼠标, 制作

相关帖子

学无止境,勇攀高峰!我们应该给予学生钥匙和打开知识宝库的方法,而不是宝库本身。

使用道具 举报

高级模式
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|Dr.Com下载|127社区   

GMT+8, 2012-1-11 02:44

127社区-127人的网上家园(网络课堂、二手交易、校园动态...)

© 2001-2011 www.127cq.com

回顶部