Wow, its been awhile since ive posted, but hopefully some of you still remember me :-P

well here goes. im desiging a site and i need help with how to make it so when i click one link, not only will it load a new page within an iframe, it will swap a picture on the current page with another one. much help would be greatly appreciated on this!

here is the code i have currently for the page (with no script as i had no basis as for where to start)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Asystem</title>
<link rel="stylesheet" href="stylesheets/privacy.css" type="text/css">
</head>
<body>
 
<map name="topnav" id="topnav">
	<area shape="rect" coords=" 188, 40, 247, 55" href="./index.html" target="_self" />
	<area shape="rect" coords=" 268, 40, 327, 55" href="./products/index.html" target="mid_nav_iframe" />
	<area shape="rect" coords=" 348, 40, 407, 55" href="./technology/index.html" target="mid_nav_iframe" />
	<area shape="rect" coords=" 428, 40, 487, 55" href="./services/index.html" target="mid_nav_iframe" />
	<area shape="rect" coords=" 508, 40, 567, 55" href="./asystem/index.html" target="mid_nav_iframe" />	
	<area shape="rect" coords=" 588, 40, 647, 55" href="./contact/index.html" target="mid_nav_iframe"/>
</map>
<table width="808" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<th colspan="4"><img src="./top_nav_img/top_nav.jpg" border="0" alt="Top Navigation" usemap="#topnav"></th>
	</tr>
 
	<tr>
		<td colspan="4"><img src="./spacer/spacer3.gif" border="0"></td>
	</tr>
 
 
	<tr>
		<td width="145" valign="top">
			<img src="./sid_nav_img/recent_news.jpg" border="0" alt="recent news">
 
			<!-- this will be the location of everything that is new to the site -->
			<table border="0" width="100%" cellpadding="0" cellspacing="0">
				<tr valign="top">
				<td align="left" valign="top">
					<font face="Arial, Helvetica, sans-serif" size="2">Updates for 3/12/05</font>
					<a href="./updates/updates.html" target="mid_nav_iframe"><font face="Arial, Helvetica, sans-serif" size="2">(read more)</a></font>
					<br />
					</td>
				</tr>
			</table>
			<!-- end inlaid table -->
		</td>
		<td width="26"><img src="./spacer/spacer1.gif" border="0"></td>
		<td width="483"><img src="./mid_nav_img/home.jpg" border="0"><img src="mid_nav_img/_nav.jpg" border="0">
		<!-- Location for Inlaid Frame -->
			<iframe width="483" height="700" src="welcome.html" frameborder="0" name="mid_nav_iframe" id="mid_nav_iframe"></iframe>
		<!-- end inlaid frame -->
		</td>
		<td width="154"><img src="./spacer/spacer2.gif" border="0"></td>
	</tr>
</table>
</body>
</html>

I hope i didnt confuse. what it comes down to is this


each one of those area maps links to a new page within an iframe, but i also need them to swap an image that is located on the same page (not in the iframe)

so its

Clicking Link>Swap Image>load new iframe window


somthing like that. I hope someone can help, and it would be much appreciated (will make a note on the site to your help too if it means anything to anyone)

Here you go, I coded this. Hope it is what you want. When you click the llink on the page it links the iframe to google.com and I added an onclick that executes a javascript function that changes the src of the image.

<html>
	<head>
		<script language="javascript">
function ChangeImage(){
	document.getElementById("image1").src= "http://www.daniweb.com/certificates/badge1.jpg";
}
		</script>
	</head>
	<body>
		<iframe width="800" height="600" src="http://www.daniweb.com/" frameborder="1" name="mid_nav_iframe"
			id="mid_nav_iframe"></iframe>
		<br>
		<a href="http://www.google.com/" target="mid_nav_iframe" onclick="ChangeImage();">google</a>
		<br>
		<img src="http://www.daniweb.com/certificates/badge30764.jpg" id="image1"> </TABLE>
	</body>
</html>
Comments
Thanks for the help it was much appreciated, that script worked wonders.

going to test it out first thing tomorrow, thank you very much though for coming up with this, i hope it works.

Here you go, I coded this. Hope it is what you want. When you click the llink on the page it links the iframe to google.com and I added an onclick that executes a javascript function that changes the src of the image.

<html>
	<head>
		<script language="javascript">
function ChangeImage(){
	document.getElementById("image1").src= "http://www.daniweb.com/certificates/badge1.jpg";
}
		</script>
	</head>
	<body>
		<iframe width="800" height="600" src="http://www.daniweb.com/" frameborder="1" name="mid_nav_iframe"
			id="mid_nav_iframe"></iframe>
		<br>
		<a href="http://www.google.com/" target="mid_nav_iframe" onclick="ChangeImage();">google</a>
		<br>
		<img src="http://www.daniweb.com/certificates/badge30764.jpg" id="image1"> </TABLE>
	</body>
</html>

THank you very very much, it worked like a charm, just made a few modifications and it works great ( iadded more functions so that i could have it call to them seperatly per image)


THANK YOU!

This article has been dead for over six months. Start a new discussion instead.