We help IT Professionals succeed at work.

Replace image without reloading or opening another page.

Janrow
Janrow asked
on
I want to replace one image with another larger image but I absolutely don't want to reload a page or open another window. Can this be done using a form INPUT (OnClick) or even an href anchor?

 If not, I guess JavaScript.  I'm using Win2003 server  and Coldfusion 8 standard. I have to assume there's no way to do this with the newer options in CF8.
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
Try this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript"><!--
function swapImage(imgId,otherImg)
{
	document.getElementById(imgId).src = otherImg;
}
//--></script>
</head>
<body>
<img id="someImage" src="http://blog.nanovic.com.au/wp-content/uploads/2006/11/nano-flowers.jpg" alt="">
<input type="button" value="Swap Image" onclick="swapImage('someImage','http://www.missouriplants.com/Yellowopp/Helianthus_divaricatus_flowers.jpg')"/>
</body>
</html>

Open in new window

Author

Commented:
Yes, that gets me on my way. It works. There will be three images, the MAIN image, and two alternate images., FRONT and BACK. But I'll need to display a return to the MAIN image but only if one of the alternate images is displayed.

I'll post a new question later because you've answered this one very well, and I thank you!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.