JavaScript
JavaScript

fading image using opacity

i have a code that shows a fade in image onload.
i have 2 other images and needs to be replaced when i click on the buttons "one" and "two" in the same place. pl help. attached images in zip.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Onload image fades without Flash | clagnut/sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#photoholder {
	width:450px;
	height:338px;
	border:1px solid #666;
}
#thephoto {
	width:450px;
	height:338px;
}
TABLE {
	margin-bottom:1em;
	border-collapse:collapse;
}
TH {
	font-weight:normal;
	font-style:italic;
	white-space:nowrap;
	text-align:left;
}
TD, TH {
	vertical-align:top;
	padding:0.25em 0.5em;
	border:1px solid #ddd;
}
</style>
 
<script type="text/javascript">
<!--
document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");
 
function initImage() {
	imageId = 'thephoto';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>
</head>
 
<body>
 
<p id="photoholder">
<img src="ithaka.jpg" alt="Picturesque fishing village on Ithaka." id="thephoto" />
</p>
 
<input type="button" onclick="initImage()" value="one">
<input type="button" onclick="initImage()" value="two">
 
</body>
 
</html>

Open in new window

vidhubalaAsked: 2008-10-14

Who is Participating?

LVL 7

mltsyCommented: 2008-10-14

It looks like you've got it all setup except for the part where you replace the image with a new image. I would add that into the initImage function, like below:

(You might also want to preload the images, so they are loaded before they start fading in)

function initImage(newImageSrc) {
   imageId = 'thephoto';
   image = document.getElementById(imageId);
   setOpacity(image, 0);
   image.style.visibility = "visible";
   if(newImageSrc) image.src = newImageSrc;
   fadeIn(imageId,0);
}
 
...
 
<input type="button" onclick="initImage('one.jpg')" value="one">
<input type="button" onclick="initImage('two.jpg')" value="two">

Open in new window

vidhubalaAuthor Commented: 2008-10-14

very nice. can u tell me the best way to preload in an array as i may have many images?

LVL 7

mltsyCommented: 2008-10-14

The easiest thing to do is stick a "preload" div at the bottom of your document like in the first example below. You can also use a function, like the second example.

<!-- Example 1 -->
<div style="display:none" id="preloads">
  <img src="image1.src" alt="" />
  <img src="image2.src" alt="" />
</div>
 
<!-- Example 2 -->
<script>
function preload() {
var d=document;
if(d.images){
  if(!d.imgs) d.imgs=new Array();
  var i,j=d.imgs.length,a=preload.arguments;
  for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){
      d.imgs[j]=new Image;
      d.imgs[j++].src=a[i];
    }
  }
}
 
//in body.onload ...
preload("image1.jpg", "image2.jpg", ...);
</script>