We help IT Professionals succeed at work.

Replace image without reloading or opening another page.

Janrow asked
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.
Watch Question

Expert of the Year 2008
Top Expert 2008
Try this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript"><!--
function swapImage(imgId,otherImg)
	document.getElementById(imgId).src = otherImg;
<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')"/>

Open in new window


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.