JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Need help with Image Swaping in Javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2004
Posts: 759
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Solved Threads: 35
Sponsor
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Need help with Image Swaping in Javascript

 
0
  #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)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "<a rel="nofollow" class="t" href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
  3. <html>
  4. <head>
  5. <title>Asystem</title>
  6. <link rel="stylesheet" href="stylesheets/privacy.css" type="text/css">
  7. </head>
  8. <body>
  9.  
  10. <map name="topnav" id="topnav">
  11. 	<area shape="rect" coords=" 188, 40, 247, 55" href="./index.html" target="_self" />
  12. 	<area shape="rect" coords=" 268, 40, 327, 55" href="./products/index.html" target="mid_nav_iframe" />
  13. 	<area shape="rect" coords=" 348, 40, 407, 55" href="./technology/index.html" target="mid_nav_iframe" />
  14. 	<area shape="rect" coords=" 428, 40, 487, 55" href="./services/index.html" target="mid_nav_iframe" />
  15. 	<area shape="rect" coords=" 508, 40, 567, 55" href="./asystem/index.html" target="mid_nav_iframe" />	
  16. 	<area shape="rect" coords=" 588, 40, 647, 55" href="./contact/index.html" target="mid_nav_iframe"/>
  17. </map>
  18. <table width="808" border="0" cellpadding="0" cellspacing="0">
  19. 	<tr>
  20. 		<th colspan="4"><img src="./top_nav_img/top_nav.jpg" border="0" alt="Top Navigation" usemap="#topnav"></th>
  21. 	</tr>
  22.  
  23. 	<tr>
  24. 		<td colspan="4"><img src="./spacer/spacer3.gif" border="0"></td>
  25. 	</tr>
  26.  
  27.  
  28. 	<tr>
  29. 		<td width="145" valign="top">
  30. 			<img src="./sid_nav_img/recent_news.jpg" border="0" alt="recent news">
  31.  
  32. 			<!-- this will be the location of everything that is new to the site -->
  33. 			<table border="0" width="100%" cellpadding="0" cellspacing="0">
  34. 				<tr valign="top">
  35. 				<td align="left" valign="top">
  36. 					<font face="Arial, Helvetica, sans-serif" size="2">Updates for 3/12/05</font>
  37. 					<a href="./updates/updates.html" target="mid_nav_iframe"><font face="Arial, Helvetica, sans-serif" size="2">(read more)</a></font>
  38. 					<br />
  39. 					</td>
  40. 				</tr>
  41. 			</table>
  42. 			<!-- end inlaid table -->
  43. 		</td>
  44. 		<td width="26"><img src="./spacer/spacer1.gif" border="0"></td>
  45. 		<td width="483"><img src="./mid_nav_img/home.jpg" border="0"><img src="mid_nav_img/_nav.jpg" border="0">
  46. 		<!-- Location for Inlaid Frame -->
  47. 			<iframe width="483" height="700" src="welcome.html" frameborder="0" name="mid_nav_iframe" id="mid_nav_iframe"></iframe>
  48. 		<!-- end inlaid frame -->
  49. 		</td>
  50. 		<td width="154"><img src="./spacer/spacer2.gif" border="0"></td>
  51. 	</tr>
  52. </table>
  53. </body>
  54. </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)
Dont forget to spread the reputation to those that deserve!
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2005
Posts: 960
Reputation: belama is an unknown quantity at this point 
Solved Threads: 2
belama's Avatar
belama belama is offline Offline
Posting Shark

Re: Need help with Image Swaping in Javascript

 
1
  #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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. 	<head>
  3. 		<script language="javascript">
  4. function ChangeImage(){
  5. 	document.getElementById("image1").src= "http://www.daniweb.com/certificates/badge1.jpg";
  6. }
  7. 		</script>
  8. 	</head>
  9. 	<body>
  10. 		<iframe width="800" height="600" src="http://www.daniweb.com/" frameborder="1" name="mid_nav_iframe"
  11. 			id="mid_nav_iframe"></iframe>
  12. 		<br>
  13. 		<a href="http://www.google.com/" target="mid_nav_iframe" onclick="ChangeImage();">google</a>
  14. 		<br>
  15. 		<img src="http://www.daniweb.com/certificates/badge30764.jpg" id="image1"> </TABLE>
  16. 	</body>
  17. </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2004
Posts: 759
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Solved Threads: 35
Sponsor
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Re: Need help with Image Swaping in Javascript

 
0
  #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.
Dont forget to spread the reputation to those that deserve!
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2004
Posts: 759
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Solved Threads: 35
Sponsor
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Re: Need help with Image Swaping in Javascript

 
0
  #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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. 	<head>
  3. 		<script language="javascript">
  4. function ChangeImage(){
  5. 	document.getElementById("image1").src= "http://www.daniweb.com/certificates/badge1.jpg";
  6. }
  7. 		</script>
  8. 	</head>
  9. 	<body>
  10. 		<iframe width="800" height="600" src="http://www.daniweb.com/" frameborder="1" name="mid_nav_iframe"
  11. 			id="mid_nav_iframe"></iframe>
  12. 		<br>
  13. 		<a href="http://www.google.com/" target="mid_nav_iframe" onclick="ChangeImage();">google</a>
  14. 		<br>
  15. 		<img src="http://www.daniweb.com/certificates/badge30764.jpg" id="image1"> </TABLE>
  16. 	</body>
  17. </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!
Dont forget to spread the reputation to those that deserve!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser captchaformproblem checkbox child close codes css debugger decimal dependent disablefirebug dom download editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php player position problem programming prototype redirect regex runtime safari scale scriptlets search security select size software sql textarea unicode w3c window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC