Image fade and chosen image


First of all, I’m a beginner with Javascript.

  1. Can anyone help me adding some code to this script that makes one image fade into another when it is clicked on?

I found this code which works very well:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>
<html xmlns=“”>
<title>Image Change Demo</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<script type=“text/javascript”>
function changeIt(objName)
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);

//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();

//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here

//A counter variable going to use for iteration
var i;

//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;

//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
	if(objName == objId[i])
	{ = "block";
		tempObj = document.getElementById(objId[i]); = "none";	



<div id=“image1”>
<img src=“1.jpg” border=“0” alt=“one” />

<div id=“image2” style=“display:none”>
<img src=“2.jpg” border=“0” alt=“two” />

<div id=“image3” style=“display:none”>
<img src=“3.jpg” border=“0” alt=“three” />

<div id=“image4” style=“display:none”>
<img src=“4.jpg” border=“0” alt=“four” />

<div id=“image5” style=“display:none”>
<img src=“5.jpg” border=“0” alt=“five” />
<a id=“one” href=“#” onclick=“changeIt(‘image1’);”>one</a>
<a id=“two” href=“#” onclick=“changeIt(‘image2’);”>two</a>
<a id=“three” href=“#” onclick=“changeIt(‘image3’);”>three</a>
<a id=“four” href=“#” onclick=“changeIt(‘image4’);”>four</a>
<a id=“five” href=“#” onclick=“changeIt(‘image5’);”>five</a>

  1. I want the image link name (“one”, “two”, “three” etc.) in the html file to change color when the (activated)image is shown. Can anyone help me do that?

Thank you! :wink:

:wink: Sille