?
Solved

fading image using opacity

Posted on 2008-10-14
4
Medium Priority
?
754 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:vidhubala
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 7

Accepted Solution

by:
mltsy earned 2000 total points
ID: 22711856
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

0
 

Author Closing Comment

by:vidhubala
ID: 31505914
very nice. can u tell me the best way to preload in an array as i may have many images?
0
 
LVL 7

Expert Comment

by:mltsy
ID: 22717860
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>

Open in new window

0
 

Author Comment

by:vidhubala
ID: 22721466
great. thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question