944,172 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Need help with Image Swaping in Javascript
Ad:
Permalink
Mar 13th, 2005
0

Need help with Image Swaping in Javascript

Expand Post »
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" 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)
Similar Threads
Reputation Points: 152
Solved Threads: 39
Master Poster
Killer_Typo is offline Offline
778 posts
since Apr 2004
Permalink
Mar 13th, 2005
1

Re: Need help with Image Swaping in Javascript

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>
Reputation Points: 19
Solved Threads: 2
Posting Shark
belama is offline Offline
962 posts
since Mar 2005
Permalink
Mar 13th, 2005
0

Re: Need help with Image Swaping in Javascript

going to test it out first thing tomorrow, thank you very much though for coming up with this, i hope it works.
Reputation Points: 152
Solved Threads: 39
Master Poster
Killer_Typo is offline Offline
778 posts
since Apr 2004
Permalink
Mar 15th, 2005
0

Re: Need help with Image Swaping in Javascript

Quote 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!
Reputation Points: 152
Solved Threads: 39
Master Poster
Killer_Typo is offline Offline
778 posts
since Apr 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: New Language combines: Asynchronous JavaScript+CSS+DOM+XMLHttpRequest
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Submit Button Help





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC