...

View Full Version : Need a Pro to help with Image Fades



mikemay
10-29-2004, 05:40 AM
Hi guys I am new here and need some help with a code if anyone could please that would be great. Ok cananyone help me on this I need to have one html file that displays the first picture when first opened if the user clicks on the picture it disappears and another takes its place. Click again and the second picture fades out and the first re-appears

Thanks

Mr J
10-29-2004, 11:30 AM
Here's one way, in IE you get the fade effect but in Moz a normal image swap


<SCRIPT language="javascript">
<!--
pics = new Array()
pics[0]="1.gif"
pics[1]="2.gif"
pics[2]="3.gif"

moz=document.getElementById&&!document.all

var blendtime=1.0 // blend time, in seconds

preloadpics=new Array() // preloads images
for (i=0;i<=pics.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=pics[i]
}

var Objnum=0

function blendme(){
if(!moz){
document.getElementById("imgA").filters.blendTrans.Apply()
}
document.getElementById("imgA").src = pics[Objnum]

if(Objnum==pics.length-1){Objnum=-1}

if(!moz){
document.getElementById("imgA").filters.blendTrans.Play(blendtime)
}

Objnum++

}

// -->
</SCRIPT>

<img id="imgA" src="0.gif" style="filter:blendTrans()" onclick="blendme()">

mikemay
10-29-2004, 08:18 PM
cool thank you very much

mikemay
10-29-2004, 08:31 PM
Is there a way to do this with opacity so it work in Moz and IE if so it would be great if someone could show me a example

Mr J
10-29-2004, 08:44 PM
I am upgrading my pc over the next few days, if no one has done an example for you by the time I get back online I'll see what I can do.

In the meantime have a bash at it yourself and we'll see where you've got up to when I return.

mikemay
10-29-2004, 08:55 PM
Ok cool I will give it a try I been at this for a week lol

mikemay
10-29-2004, 09:35 PM
ok so i have this far but the only thing is i would like the images change to only happen on when i click the images.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Image Fader</title>
<script type="text/javascript">
var SbrowseIE = navigator.appName;
if(SbrowseIE == "Microsoft Internet Explorer") SbrowseIE = true;
else SbrowseIE = false;

function fadeImage(imgName, fadeVal){
var opFilt;
if (SbrowseIE){
opFilt=document.getElementById(imgName).style.filter;
opFilt=opFilt.substr(opFilt.indexOf("=")+1,opFilt.indexOf(")")-(opFilt.indexOf("=")+1));
}
else
opFilt=document.getElementById(imgName).style.MozOpacity*100;

if(opFilt <= 0 || opFilt >= 100)
fadeVal=fadeVal*(-1);
opFilt=opFilt-fadeVal;
if (SbrowseIE)
document.getElementById(imgName).style.filter="alpha(opacity="+opFilt+")";
else
document.getElementById(imgName).style.MozOpacity=opFilt/100;
return fadeVal;
}
var fVal2;
var firstTime=true;
function fadeLoop(){
if (firstTime){
firstTime=false;
fVal2=1;

if (SbrowseIE){
document.getElementById("img1").style.filter="alpha(opacity=90)";
} else {
document.getElementById("img1").style.MozOpacity=.9;
}
}
fVal2=fadeImage("img2",fVal2);
setTimeout("fadeLoop()",100);
}
</script>
</head>

<body onload="fadeLoop();">
<div style="position:absolute;left:33%;top:0px;"><img src="xlionpair.jpg" border="0" id="img1" /></div>
<div style="position:absolute;left:33%;top:0px;"><img src="xlionsideways.jpg" id="img2" /></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum