Member Avatar for Killer_Typo

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)

  • 2 Contributors
  • 3 Replies
  • 162 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Killer_Typo
Member Avatar for belama

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>
commented: Thanks for the help it was much appreciated, that script worked wonders. +1
Member Avatar for Killer_Typo

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

Member Avatar for Killer_Typo

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!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.