PDA

View Full Version : Image Fade-In Issue



mourenia
12-21-2005, 08:12 PM
First: I'm new, I'm trying....thanks ahead of time.

When my page loads there is an image and a text. When the user puts their mouse over the text I want the image to fade to a different image. The opacity is set to zero and the original (base) image dissapears. But nothing works after that. What am I doing wrong? Opacity is not incrementing in runOpacity().


<html>
<head>
<!--CSS Style Sheet---->
<style type="text/css">
a:hover {color: #660000;}
a {text-decoration: none; cursor:pointer;}


#base {position:absolute; left:600px; top:550px;}


</style>


<script language="javascript" type="text/javascript">


//Image Fader Rollover

var about = new Image();
about.src="indexfiles/images/about2.gif";

function imageFader(setImage)
{
imgId = 'base'
imgObj=document.getElementById(imgId)
imgObj.style.opacity=0;
eval("imgObj.src="+setImage+".src");
runOpacity(imgObj, 0);

}
function runOpacity(iObj,opacity)
{
if (opacity<=100)
{
iObj.style.opacity = opacity/100;
opacity += 3;
window.setTimeOut("runOpacity("+objId+", "+opacity+")",100);
}
}





</script>
</head>

<body bgcolor="black" text="white">

<a href = "#" onmouseover="imageFader('about')"><div id="texts">texts</div>

<!--Base Image--------------------->
<div><img src="indexfiles/images/base.gif" id="base" border="0"width="345" height="230";></div>


</body>
</html>


Thanks!
Wren

jscheuer1
12-21-2005, 08:32 PM
Most importantly, objId should be iObj:


window.setTimeOut("runOpacity("+iObj+", "+opacity+")",100);

There could be other problems. In fact, this will not work for IE because it uses a different method for changing the opacity of objects. Some Mozilla based browsers like FF1.0.7 should be OK with it though.

mourenia
12-22-2005, 12:22 AM
It still doesn't work after making the correction with setTimeOut. I also added code so it would work in IE and older Firefox browsers. Any other suggestions? The image still just blanks out and the new one won't fade in.
Thanks
Wren

jscheuer1
12-22-2005, 03:14 AM
Well, rather than try to debug code that I cannot (since your changes) see, how about you try out my Fade-In Image script unit that I loosely adapted from the the new DD script, Ultimate Fade-in slideshow (v1.5) (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm). Here is a demo of my unit, using the background image of a table cell as the first image, then fading in the new image on top of it onmouseover of text in a table cell in the next row:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fade-In (onmouseover of text) - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
/***********************************************
* Fade-In Images loosely adapted from:
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* by John Davenport Scheuer (jscheuer1) in http://www.dynamicdrive.com/forums
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

////NO need to Edit /////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

if (iebrowser&&dom||dom){
document.write('<style type="text/css">')
document.write('.fadeImg { visibility: hidden; }<\/style>')
}

function fadeshow(speed, opstart, initial_delay, increment, obj){

this.increment=increment
this.initial_delay=initial_delay
this.opDegree=opstart<100&&opstart>=0? opstart : opstart>99? 99 : 0 //initial opacity degree
this.counter=0
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.curcanvas=obj
this.speed=speed

with (this.curcanvas.style){
filter='alpha(opacity='+this.opDegree+')'
MozOpacity=this.opDegree<100? this.opDegree/100 : 99/100
KhtmlOpacity=this.opDegree<100? this.opDegree/100 : 99/100
opacity=this.opDegree<100? this.opDegree/100 : 99/100
visibility='visible'
}
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",this.speed)
}

function fadepic(obj){
if (obj.opDegree<=100&&obj.opDegree>=0&&obj.counter>obj.initial_delay){
obj.opDegree+=obj.increment
if (obj.curcanvas.filters&&obj.curcanvas.filters[0]){
if (typeof obj.curcanvas.filters[0].opacity=="number") //if IE6+
obj.curcanvas.filters[0].opacity=obj.opDegree
else //else if IE5.5-
obj.curcanvas.style.filter="alpha(opacity="+obj.opDegree+")"
}
else if (obj.curcanvas.style.MozOpacity)
obj.curcanvas.style.MozOpacity=obj.opDegree<100? obj.opDegree/100 : 99/100
else if (obj.curcanvas.style.KhtmlOpacity)
obj.curcanvas.style.KhtmlOpacity=obj.opDegree<100? obj.opDegree/100 : 99/100
else if (obj.curcanvas.style.opacity&&!obj.curcanvas.filters)
obj.curcanvas.style.opacity=obj.opDegree<100? obj.opDegree/100 : 99/100
}
else if (obj.opDegree>=100||obj.opDegree<0){
clearInterval(fadeclear[obj.slideshowid])
return;
}
else
obj.counter++
}

function initFade(obj, speed, initial_opacity, initial_delay, increment){
if (iebrowser&&dom||dom){
new fadeshow (speed, initial_opacity, initial_delay, increment, obj)
}
}
</script>
</head>
<body>
<!-- Usage: initFade(imageObject, speed, initial_opacity, initial_delay, opacity_increment) -->
<table>
<tr>
<td style="background:url('photo6.jpg') center no-repeat;"><a href="../blank1.htm"><img src="photo9.jpg" width="140" height="225" border="10" style="border-color:#a0a0a0;visibility:hidden;"></a></td>
</tr><tr>
<td><div align="center" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1);flag=1;};">Change Image</div></td>
</tr>
</table>
</body>
</html>

mourenia
12-22-2005, 08:36 PM
Thanks! Next step. My ultimate goal is this: same thing but I have four texts with four corresponding images to display in one image placeholder as the user scrolls over the texts (hence the img.src replacement in the code I posted). I want to use your code (very impressive) but will need to alter the functions to include an image swap. I can no longer simply use a background image and change the opacity of a foreground picture..right? I'm messing around with it but will probably need your help. Thanks,
Wren

jscheuer1
12-22-2005, 09:36 PM
Well, do you want it to be so that any image may be swapped for any existing image? Or a progression, where once you change to the next one, you can't go back? And, if the latter method, do you want it so that only a certain order can be followed?

mourenia
12-22-2005, 10:44 PM
Sorry, I didn't explain this very well. Alright:
1. page loads and you have four texts and a base image
2. when you scroll over a text a corresponding image fades in to replace the base image
3. when you scroll off the text the base image fades in again

I made some modifications, but don't understand your code well enough to find the bug. It works for one corresonding image i.e. I can scroll over any one text and have the corresponding image replace the base image but only for one text and the onmouseout doesn't work either.

My modifications:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fade-In (onmouseover of text) - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type = "text/css">
a {cursor:pointer; text-decoration:none}
#base {position:absolute; left:600px; top:550px;}
#text {position:absolute; left:500px; top:550px;}
#text1 {position:absolute; left:500px; top:650px;}
#text2 {position:absolute; left:500px; top:700px;}
#text3 {position:absolute; left:500px; top:750px;}
</style>
<script type="text/javascript">
/***********************************************
* Fade-In Images loosely adapted from:
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* by John Davenport Scheuer (jscheuer1) in http://www.dynamicdrive.com/forums
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

////NO need to Edit /////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
var about=new Image();
var services=new Image();
var baseimg=new Image();
var experience= new Image();
var contact= new Image();
about.src="indexfiles/images/about2.gif";
services.src="indexfiles/images/services2.gif";
baseimg.src="indexfiles/images/base.gif";
experience.src="indexfiles/images/experience2.gif";
contact.src="indexfiles/images/contact2.gif";


if (iebrowser&&dom||dom){
document.write('<style type="text/css">')
document.write('.fadeImg { visibility: hidden; }<\/style>')
}

function fadeshow(speed, opstart, initial_delay, increment, obj, image){

this.increment=increment
this.initial_delay=initial_delay
this.opDegree=opstart<100&&opstart>=0? opstart : opstart>99? 99 : 0 //initial opacity degree
this.counter=0
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.curcanvas=obj
this.speed=speed

eval("this.curcanvas.src="+image+".src");


with (this.curcanvas.style){
filter='alpha(opacity='+this.opDegree+')'
MozOpacity=this.opDegree<100? this.opDegree/100 : 99/100
KhtmlOpacity=this.opDegree<100? this.opDegree/100 : 99/100
opacity=this.opDegree<100? this.opDegree/100 : 99/100
visibility='visible'
}
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",this.speed)
}

function fadepic(obj){
if (obj.opDegree<=100&&obj.opDegree>=0&&obj.counter>obj.initial_delay){
obj.opDegree+=obj.increment
if (obj.curcanvas.filters&&obj.curcanvas.filters[0]){
if (typeof obj.curcanvas.filters[0].opacity=="number") //if IE6+
obj.curcanvas.filters[0].opacity=obj.opDegree
else //else if IE5.5-
obj.curcanvas.style.filter="alpha(opacity="+obj.opDegree+")"
}
else if (obj.curcanvas.style.MozOpacity)
obj.curcanvas.style.MozOpacity=obj.opDegree<100? obj.opDegree/100 : 99/100
else if (obj.curcanvas.style.KhtmlOpacity)
obj.curcanvas.style.KhtmlOpacity=obj.opDegree<100? obj.opDegree/100 : 99/100
else if (obj.curcanvas.style.opacity&&!obj.curcanvas.filters)
obj.curcanvas.style.opacity=obj.opDegree<100? obj.opDegree/100 : 99/100
}
else if (obj.opDegree>=100||obj.opDegree<0){
clearInterval(fadeclear[obj.slideshowid])
return;
}
else
obj.counter++
}

function initFade(obj, speed, initial_opacity, initial_delay, increment, image){
if (iebrowser&&dom||dom){
new fadeshow (speed, initial_opacity, initial_delay, increment, obj, image)
}
}
</script>
</head>
<body bgcolor="black"; text="white">
<!-- Usage: initFade(imageObject, speed, initial_opacity, initial_delay, opacity_increment) -->

<div id="base"><a href=""><img src="indexfiles/images/base.gif" width="345" height="230" border="0"></a></div>

<div id="text" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'about');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text</a></div>
<div id="text1" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'services');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text1</a></div>
<div id="text2" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'experience');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text2</a></div>
<div id="text3" onmouseover="if(typeof flag=='undefined'){initFade(document.images[0], 20, 0, 0, 1,'contact');flag=1;};" onmouseout="if(typeof flag=='undefined'){initFade(document.image[0], 20, 0, 0, 1, 'baseimg');flag=1;};"><a href="#">Text3</a></div>
</body>
</html>

jscheuer1
12-23-2005, 08:05 AM
I've gotten a bit further than that but there is a problem. Once fading begins, what happens if the user moves the mouse away and over another text and another before any of the fades have completed? I can get it to postpone the next fade until the current one is complete or to stop the current fade and start the next fade at the previously current one's last opacity state. But, both of these strategies fall apart when a third or forth fade is begun while still processing the second one. It is especially difficult with an image swap. I'll play around with it a bit more though.

jscheuer1
12-24-2005, 08:59 AM
I think I've got it! Rather than use my Fade-Image unit, it was actually easier to adapt the original script from which it was taken for this. My unit is only for single fade events on a page, at least that is what I designed it for. The original script is for a slideshow and by taking control of some of its functions, I believe I have rendered the effect you were looking for. I have left as much of the original script as it was as I could but, the adaptations no longer allow it to be used for anything else and some of the parameters are either meaningless or must remain as I've set them, so you will know, here are the parameters and their usage, anything red, don't mess with, optionalRandomOrder (light gray) is useless, don't use it - I've omitted it from the usage:

Parameters -


new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)

Usage -


new fadeshow(fadeimages, 140, 225, 0, 100, 1)

Configure your images in the array at the top of the script and set the width, height and border. That's it. You can change the layout of the table or use a different HTML layout for things as you see fit. Here is a working demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Image-Fade text controlled - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.control {
width:100px;
background-color:lightblue;
border:2px solid white;
text-align:center;
}
</style>

<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
fadeimages[3]=["photo4.jpg", "", ""] //plain image syntax
fadeimages[4]=["photo5.jpg", "", ""] //plain image syntax

var fadebgcolor="white"

////NO need to edit beyond here/////////////
var flag=1
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.mouseovercheck=flag=1
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
/*var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}*/
}
this.rotateimage()
}

var wait
function switchFade(iNum){
if (flag){
clearInterval(wait)
flag=0
clearInterval(fadeclear[0])
fadearray[0].mouseovercheck=0
fadearray[0].nextimageindex=iNum
fadearray[0].nextcanvas=(fadearray[0].curcanvas==fadearray[0].canvasbase+"_0")? fadearray[0].canvasbase+"_0" : fadearray[0].canvasbase+"_1"
fadearray[0].tempobj=iebrowser? iebrowser[fadearray[0].nextcanvas] : document.getElementById(fadearray[0].nextcanvas)
fadearray[0].populateslide(fadearray[0].tempobj, fadearray[0].nextimageindex)
setTimeout("fadearray[0].rotateimage()", fadearray[0].delay)
}
else{
clearInterval(wait)
wait=setInterval("switchFade("+iNum+");", 100)
}
}

</script>
</head>
<body>
<table>
<tr>
<td colspan="4" align="center"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 100, 1)
</script></td>
</tr>
<tr>
<td><div class="control" onmouseover="switchFade(1)" onmouseout="switchFade(0)">Text #1</div></td>
<td><div class="control" onmouseover="switchFade(2)" onmouseout="switchFade(0)">Text #2</div></td>
<td><div class="control" onmouseover="switchFade(3)" onmouseout="switchFade(0)">Text #3</div></td>
<td><div class="control" onmouseover="switchFade(4)" onmouseout="switchFade(0)">Text #4</div></td>
</tr>
</table>
</body>
</html>

mourenia
01-03-2006, 06:22 PM
Thanks so much! It works perfectly.
~Wren