View Full Version : fading images script


laura85
01-06-2005, 05:56 AM
Does anyone know of a very specific script where there's a picture and then when you hoover over it it slowly fades away and another picture shows up and when you move the mouse away, it slowly fades back to the original picture?

starlet
01-06-2005, 04:07 PM
Try searching here, there should be something!

http://dynamicdrive.com/dynamicindex15/index.html

laura85
01-06-2005, 09:07 PM
ok I tried one and I want it to fade out. It says it can support that but how do I do it? And when I tried it, it didn't dissolve like it would do. I tried the Dissolving Image Rollover All. Here's the code I used:



<script type="text/javascript">

trgf/*****************************************
* Dissolving Image Rollover- By Roy Whittle (http://www.javascript-fx.com/)
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/

//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');

//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:fadeinTrans(duration=0.4) }</STYLE>');

var onImages=new Array();
function Rollover(imgName, imgSrc)
{
onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;
}

function turnOn(imgName){
if(document.images[imgName].filters != fadeIn)
document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src = onImages[imgName].src;
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].play();
}

function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;
}

//Specify name of participating images, plus paths to their onMouseover replacements:
Rollover("camera", "camera.gif");
Rollover("about", "avatar.jpg");

</script>


and it the body I used this:

<a href = "http://www.dynamicdrive.com"
onMouseOver="turnOn('avatar');"
onMouseOut="turnOff('camera');"><img name="camera" class="imgTrans"
src="camera.gif" border="0"></a><br>

<a href = "http://www.dynamicdrive.com/contact.htm"
onMouseOver="turnOn('avatar');"
onMouseOut="turnOff('camera');"><img name="camera" class="imgTrans"
src="avatar.jpg" border="0"></a><br>

What's wrong?

darklitch
01-08-2005, 09:00 PM
sounds like you need an applet

MaGiCSuN
01-08-2005, 11:54 PM
<a href = "http://www.dynamicdrive.com"
onMouseOver="turnOn('avatar');"
onMouseOut="turnOff('camera');"><img name="camera" class="imgTrans"
src="camera.gif" border="0"></a><br>

<a href = "http://www.dynamicdrive.com/contact.htm"
onMouseOver="turnOn('avatar');"
onMouseOut="turnOff('camera');"><img name="camera" class="imgTrans"
src="avatar.jpg" border="0"></a><br>

they have to match. Bold words both should be "camera" and the underlinedd words both should be changed to "about"

Love,
Mirna