Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Change Image shown on mouse click

  1. #1
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Change Image shown on mouse click

    Greetings all,

    I'm wanting to spice up a page of mine. Currently it shows 4 different images of the same items, but in different colours. What I'm wanting to do is, have 1 image on the page, and 4 links underneath. Clicking on the link will change the image shown...

    For example, the page starts with the black verion shown. Clicking on the word "blue" will show the blue image, clicking on red will show the red image etc.

    Sounds simple enough, but every seach I conduct for "change image" gives me ones that provide mouse over effects... can anyone point me to a script that will do this?

    Ta!

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <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.
    	for(i=0;i<objId.length;i++)
    	{
    		if(objName == objId[i])
    		{
    			obj.style.display = "block";
    		}
    		else
    		{
    			tempObj = document.getElementById(objId[i]);
    			tempObj.style.display = "none";	
    		}
    	}
    	return;	
    }
    </script>
    </head>
    
    <body>
    <div id="image1">
    <img src="1.jpg" border="0" alt="one" />
    </div>
    
    <div id="image2" style="display:none">
    <img src="2.jpg" border="0" alt="two" />
    </div>
    
    <div id="image3" style="display:none">
    <img src="3.jpg" border="0" alt="three" />
    </div>
    
    <div id="image4" style="display:none">
    <img src="4.jpg" border="0" alt="four" />
    </div>
    
    <div id="image5" style="display:none">
    <img src="5.jpg" border="0" alt="five" />
    </div>
    <br><br>
    <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>
    </body>
    </html>
    1.Copy the above code into an editor say notepad or macromedia dreamweaver.

    2. Save it with an .htm or .html extension

    3. Make sure that you have 5 images whose names will be 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg in the same directory/folder where your main web page lies.

    Note: You can change the image names in the HTML source code according to your images but keep the Ids like i've mentioned in the above code.

  3. #3
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Is that from a script page? I don't want the images to replace over each other...

  4. #4
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Is that from a script page? I don't want the images to replace over each other...
    I don't think i understand your comment properly. You are loading all the five image at the initial time but displaying only one image rest of the images are hidden.

    Then based on your link clicking it hide the previous image and display another image..

  5. #5
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Um... not really following that.

    As I mentioned in my first post, I want 1 image to load when the page does. I then want 4 links underneath the image. When you click on any of those four links, it replaces the original image with the new one. I don't want 4 images on the page that replace each other.

    To be honest I have a lot of trouble with the script you posted because I'm not a coder, it doesn't make sense to me (which is why I'm looking to be pointed to a script, preferably one that has an example)

    *edit* Think I've found what I want, just have to figure out how to make it work ><

  6. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,626
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Image Change Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    function changeIt(imageName,objName)
    {
    	var obj = document.getElementById(objName);
    	
    	var imgTag = "<img src='"+imageName+"' border='0' />";
    	
    	obj.innerHTML = imgTag;
    	
    	return;	
    }
    </script>
    </head>
    
    <body>
    <div id="image1">
    <img src="1.jpg" border="0" alt="one" />
    </div>
    
    <br><br>
    
    <a id="one" href="#" onclick="changeIt('1.jpg','image1');">one</a>
    <a id="two" href="#" onclick="changeIt('2.jpg','image1');">two</a>
    <a id="three" href="#" onclick="changeIt('3.jpg','image1');">three</a>
    <a id="four" href="#" onclick="changeIt('4.jpg','image1');">four</a>
    <a id="five" href="#" onclick="changeIt('5.jpg','image1');">five</a>
    </body>
    </html>
    Check this out

  7. #7
    Join Date
    Feb 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Quote Originally Posted by codeexploiter View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <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.
    	for(i=0;i<objId.length;i++)
    	{
    		if(objName == objId[i])
    		{
    			obj.style.display = "block";
    		}
    		else
    		{
    			tempObj = document.getElementById(objId[i]);
    			tempObj.style.display = "none";	
    		}
    	}
    	return;	
    }
    </script>
    </head>
    
    <body>
    <div id="image1">
    <img src="1.jpg" border="0" alt="one" />
    </div>
    
    <div id="image2" style="display:none">
    <img src="2.jpg" border="0" alt="two" />
    </div>
    
    <div id="image3" style="display:none">
    <img src="3.jpg" border="0" alt="three" />
    </div>
    
    <div id="image4" style="display:none">
    <img src="4.jpg" border="0" alt="four" />
    </div>
    
    <div id="image5" style="display:none">
    <img src="5.jpg" border="0" alt="five" />
    </div>
    <br><br>
    <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>
    </body>
    </html>
    1.Copy the above code into an editor say notepad or macromedia dreamweaver.

    2. Save it with an .htm or .html extension

    3. Make sure that you have 5 images whose names will be 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg in the same directory/folder where your main web page lies.

    Note: You can change the image names in the HTML source code according to your images but keep the Ids like i've mentioned in the above code.

    Hey cool code!

    Can you do one where the image will change to another one?
    like say in the above, if I click on link one over and over it will load a different image every time I click and so on..?

    Thanks again for the cool code!!

  8. #8
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    798
    Thanks
    86
    Thanked 2 Times in 2 Posts

    Default

    Hey codeexploiter,
    Can that script be adapted to the following:
    If I want a <td left> with small images, and a <td right> where a bigger version of the img appears on click ?
    See here: http://www.dynamicdrive.com/forums/s...ad.php?t=17817

  9. #9
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help needed

    Hi all,

    Can any one suggest any code where the image keeps on changing at one place with single button...

    Like if i click on a button once first image appears, then if i click on the button again the image changes to second image and so on...

    Plz helppppppppp
    Last edited by naminder; 02-13-2008 at 04:07 AM.

  10. #10
    Join Date
    Mar 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This code worked greatly. But can someone make it to be with cookies? That way when a link is clicked, the image is still there?

    Quote Originally Posted by codeexploiter View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Image Change Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    function changeIt(imageName,objName)
    {
    	var obj = document.getElementById(objName);
    	
    	var imgTag = "<img src='"+imageName+"' border='0' />";
    	
    	obj.innerHTML = imgTag;
    	
    	return;	
    }
    </script>
    </head>
    
    <body>
    <div id="image1">
    <img src="1.jpg" border="0" alt="one" />
    </div>
    
    <br><br>
    
    <a id="one" href="#" onclick="changeIt('1.jpg','image1');">one</a>
    <a id="two" href="#" onclick="changeIt('2.jpg','image1');">two</a>
    <a id="three" href="#" onclick="changeIt('3.jpg','image1');">three</a>
    <a id="four" href="#" onclick="changeIt('4.jpg','image1');">four</a>
    <a id="five" href="#" onclick="changeIt('5.jpg','image1');">five</a>
    </body>
    </html>
    Check this out

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •