Can any body please help me. I need a script that will fade in a image when I move my mouse over a link and fade out the image on moving my mouse off the link.
This script works fine in IE but does not fade in Firefox due to the fact it is using the Microsoft.GradientWipe() function.
I know that this can be replaced but I have'nt had time just now. I will try to post another version later that will work in all popular browsers unless someone already has one.
[CODE] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <head> <title>Untitled</title>
<script type="text/javascript"> <!-- var dynimages=new Array() dynimages[0]=["pic1.jpg"] dynimages[1]=["pic2.jpg"]
//Set image border width var imgborderwidth=0
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE: var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
function returnimgcode(theimg) { var imghtml=""
// change the size here imghtml+='<img src="'+theimg[0]+'" height=345 wisth-200 border="'+imgborderwidth+'">' if (theimg[1]!="") imghtml+='</a>' return imghtml }
function modifyimage(loadarea, imgindex) { if (document.getElementById) { var imgobj=document.getElementById(loadarea) if (imgobj.filters && window.createPopup) { imgobj.style.filter=filterstring imgobj.filters[0].Apply() } imgobj.innerHTML=returnimgcode(dynimages[imgindex]) if (imgobj.filters && window.createPopup) imgobj.filters[0].Play() return false } } //--> </script> </head>
<body> <a href="#" onMouseover="modifyimage('dynloadarea', 0)" onMouseout="modifyimage('dynloadarea', 1)"> Move your mouse in and out of this line.</a><br><br><br> <div id="dynloadarea" style="width:80px;height:225px"></div> </body> </html> [/CODE]
@konithomimoNov 26.2006 — #google "javascript image opacity" and you will find thousands of scripts . . . or you can search this forum since there are many posted here.