User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 361,897 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,355 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 3057 | Replies: 3
Reply
•
•
Join Date: Apr 2004
Location: Tracy
Posts: 743
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Rep Power: 7
Solved Threads: 31
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Need help with Image Swaping in Javascript

  #1  
Mar 13th, 2005
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)

Help with Code Tags 
<!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)
!!!!! WARNING YOUR COMPUTER MAY BE INFECTED WITH SPYWARE!!!! PAY AN OVER PRICED AMMOUNT TO HAVE SOMTHING FIXED WE PLACED THERE IN THE FIRST PLACE!!!!!!!!!

sound familiar, know how to block yourself and keep yourself clean.
_____________________
http://www.lavasoftusa.com/ -->adaware
http://www.safer-networking.org/en/index.html -->spybot S&D
http://www.javacoolsoftware.com/spywareblaster.html -->spywareblaster
http://www.javacoolsoftware.com/spywareguard.html -->spywareguard
_____________________
and dont forget to spread the reputation to those that deserve!
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Mar 2005
Location: Ottawa, Ontario, Canada
Posts: 959
Reputation: belama is an unknown quantity at this point 
Rep Power: 5
Solved Threads: 2
belama's Avatar
belama belama is offline Offline
Posting Shark

Re: Need help with Image Swaping in Javascript

  #2  
Mar 13th, 2005
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.

Help with Code Tags 
<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>
Reply With Quote  
•
•
Join Date: Apr 2004
Location: Tracy
Posts: 743
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Rep Power: 7
Solved Threads: 31
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Re: Need help with Image Swaping in Javascript

  #3  
Mar 13th, 2005
going to test it out first thing tomorrow, thank you very much though for coming up with this, i hope it works.
!!!!! WARNING YOUR COMPUTER MAY BE INFECTED WITH SPYWARE!!!! PAY AN OVER PRICED AMMOUNT TO HAVE SOMTHING FIXED WE PLACED THERE IN THE FIRST PLACE!!!!!!!!!

sound familiar, know how to block yourself and keep yourself clean.
_____________________
http://www.lavasoftusa.com/ -->adaware
http://www.safer-networking.org/en/index.html -->spybot S&D
http://www.javacoolsoftware.com/spywareblaster.html -->spywareblaster
http://www.javacoolsoftware.com/spywareguard.html -->spywareguard
_____________________
and dont forget to spread the reputation to those that deserve!
Reply With Quote  
•
•
Join Date: Apr 2004
Location: Tracy
Posts: 743
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Rep Power: 7
Solved Threads: 31
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Re: Need help with Image Swaping in Javascript

  #4  
Mar 15th, 2005
•
•
•
•
Originally Posted by 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.

Help with Code Tags 
<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!
!!!!! WARNING YOUR COMPUTER MAY BE INFECTED WITH SPYWARE!!!! PAY AN OVER PRICED AMMOUNT TO HAVE SOMTHING FIXED WE PLACED THERE IN THE FIRST PLACE!!!!!!!!!

sound familiar, know how to block yourself and keep yourself clean.
_____________________
http://www.lavasoftusa.com/ -->adaware
http://www.safer-networking.org/en/index.html -->spybot S&D
http://www.javacoolsoftware.com/spywareblaster.html -->spywareblaster
http://www.javacoolsoftware.com/spywareguard.html -->spywareguard
_____________________
and dont forget to spread the reputation to those that deserve!
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
ajax asp developer development firefox home html internet javascript microsoft msdn office site software sql vista web
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 8:36 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC