• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4157
  • Last Modified:

Replace image without reloading or opening another page.

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.
0
Janrow
Asked:
Janrow
1 Solution
 
buddistskaterCommented:
0
 
hieloCommented:
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

0
 
JanrowAuthor 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!
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now