图片交换有关问题
日期：2014-05-16 浏览次数：20315 次
图片交换问题
关于交换图片时，载入的问题
在网页设计中，简单图片交换方法的代码是这样的
<img src="button_r.gif" name="the_image">
<a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a>
请问，这个'button_d.gif'文件是在 网页载入是载入的，还是在onMouseOver事件发生是载入的？
谢谢
------解决方案--------------------
onMouseOver
可以预载入
1.js实现
JS的
<script language="JavaScript">
<!--
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];}}
}
//-->
</script>
调用：
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('/images/new_images/left_01_2.gif','/images/new_images/left_02_2.gif','/images/new_images/left_03_2.gif','/images/new_images/left_04_2.gif','/images/new_images/01_mrgx_b.gif','/images/new_images/02_mrtj_b.gif','/images/new_images/03_wywz_b.gif')"
>
2.用css实现：
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(image1.png);
background-image: url(image2.png);
background-image: url(image3.png);
background-image: url(image4.png);
background-image: url();
}
<div id="preloadedImages"> </div>
------解决方案--------------------
楼主的是在onMouseOver事件发生载入的
而1楼的是在onload的时候，就把image封装成image对象，放在数组里面等待调用
关于交换图片时，载入的问题
在网页设计中，简单图片交换方法的代码是这样的
<img src="button_r.gif" name="the_image">
<a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a>
请问，这个'button_d.gif'文件是在 网页载入是载入的，还是在onMouseOver事件发生是载入的？
谢谢
------解决方案--------------------
onMouseOver
可以预载入
1.js实现
JS的
<script language="JavaScript">
<!--
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];}}
}
//-->
</script>
调用：
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
onLoad="MM_preloadImages('/images/new_images/left_01_2.gif','/images/new_images/left_02_2.gif','/images/new_images/left_03_2.gif','/images/new_images/left_04_2.gif','/images/new_images/01_mrgx_b.gif','/images/new_images/02_mrtj_b.gif','/images/new_images/03_wywz_b.gif')"
>
2.用css实现：
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(image1.png);
background-image: url(image2.png);
background-image: url(image3.png);
background-image: url(image4.png);
background-image: url();
}
<div id="preloadedImages"> </div>
------解决方案--------------------
楼主的是在onMouseOver事件发生载入的
而1楼的是在onload的时候，就把image封装成image对象，放在数组里面等待调用
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
