Help with Swapping Images onclick

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
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Help with Swapping Images onclick

 
0
  #1
Jun 22nd, 2004
I need help with this script i got from dynamicdrive.com


my main issue is, that besides folding out like that, i need it to swap the image too. because i have created open and closed states for each of the buttons on there. i need it to do the current Jscript action, and swap the image, but i dont know enough javascripting to do that


heres the code:
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. <script type="text/javascript">
  6. if (document.getElementById){ //DynamicDrive.com change
  7. document.write('<style type="text/css">\n')
  8. document.write('.submenu{display: none;}\n')
  9. document.write('</style>\n')
  10. }
  11. function SwitchMenu(obj){
  12. 	if(document.getElementById){
  13. 	var el = document.getElementById(obj);
  14. 	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
  15. 		if(el.style.display != "block"){ //DynamicDrive.com change
  16. 			for (var i=0; i<ar.length; i++){
  17. 				if (ar[i].className=="submenu") //DynamicDrive.com change
  18. 				ar[i].style.display = "none";
  19. 			}
  20. 			el.style.display = "block";
  21. 		}else{
  22. 			el.style.display = "none";
  23. 		}
  24. 	}
  25. }
  26. </script>
  27. <title>Untitled Document</title>
  28. </head>
  29. <body>
  30. <!-- Keep all menus within masterdiv-->
  31. <div id="masterdiv">
  32. 	<div><img src="nav_test/home.jpg" border="0"></div>
  33. 	<div onclick="SwitchMenu('sub1')"><img src="nav_test/nav_home.jpg" border="0"></div>
  34. 	<span class="submenu" id="sub1">
  35. 		- <a href="new.htm">What's New</a><br>
  36. 		- <a href="hot.htm">What's hot</a><br>
  37. 		- <a href="revised.htm">Revised Scripts</a><br>
  38. 		- <a href="morezone/">More Zone</a>
  39. 	</span>
  40. 	<div onclick="SwitchMenu('sub2')"><img src="nav_test/nav_services.jpg" border="0"></div>
  41. 	<span class="submenu" id="sub2">
  42. 		- <a href="notice.htm">Usage Terms</a><br>
  43. 		- <a href="faqs.htm">DHTML FAQs</a><br>
  44. 		- <a href="help.htm">Scripts FAQs</a>
  45. 	</span>
  46. 	<div onclick="SwitchMenu('sub3')"><img src="nav_test/nav_products.jpg" border="0"></div>
  47. 	<span class="submenu" id="sub3">
  48. 		- <a href="<A href="http://www.codingforums.com">coding/">http://www.codingforums.com">Coding Forums</a><br>
  49. 	</span>
  50.  
  51. 	<div onclick="SwitchMenu('sub4')"><img src="nav_test/nav_support.jpg" border="0"></div>
  52. 	<span class="submenu" id="sub4">
  53. 		- <a href="<A href="http://www.javascriptkit.com">javascript/">http://www.javascriptkit.com">JavaScript Kit</a><br>
  54. 		- <a href="<A href="http://www.freewarejava.com">freewarejava</a><br">http://www.freewarejava.com">Freewarejava</a><br>
  55. 		- <a href="<A href="http://www.cooltext.com">cool/">http://www.cooltext.com">Cool Text</a><br>
  56. 		- <a href="<A href="http://www.google.com">google.com</a">http://www.google.com">Google.com</a>
  57. 	</span>
  58. 	<div onclick="SwitchMenu('sub5')"><img src="nav_test/nav_download.jpg" border="0"></div>
  59. 	<span class="submenu" id="sub5">
  60. 		- <a href="<A href="http://www.dynamicdrive.com/link.htm">Link">http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
  61. 		- <a href="<A href="http://www.dynamicdrive.com/recommendit/">Recommend">http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
  62. 		- <a href="<A href="http://www.dynamicdrive.com/contact.htm">Email">http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
  63. 	</span>
  64. 	<div onclick="SwitchMenu('sub6')"><img src="nav_test/nav_contact.jpg" border="0"></div>
  65. 	<span class="submenu" id="sub6">
  66. 		- <a href="<A href="http://www.dynamicdrive.com/link.htm">Link">http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
  67. 		- <a href="<A href="http://www.dynamicdrive.com/recommendit/">Recommend">http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
  68. 		- <a href="<A href="http://www.dynamicdrive.com/contact.htm">Email">http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
  69. 	</span>
  70. </div>
  71. </body>
  72. </html>
Dont forget to spread the reputation to those that deserve!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2004
Posts: 14
Reputation: carlino is an unknown quantity at this point 
Solved Threads: 0
carlino's Avatar
carlino carlino is offline Offline
Newbie Poster

Re: Help with Swapping Images onclick

 
0
  #2
Jul 22nd, 2004
I don't know any java or java script but I can at least share with you some code that does what you looking for.
The files needed are in a package that can be downloaded from here:
http://www.webdesignskolan.com/javas.../dltree101.zip

And the code to be used in the web page in the body is like this:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <APPLET CODE="TreeApplet" NAME="TreeApplet" WIDTH="220" HEIGHT="340">
  2. <PARAM NAME="Copyright" VALUE="(c)1998 Robert Della Malva (robdella@webshuttle.ch)">
  3. <PARAM NAME="Tree_ScriptFile" VALUE="os_script.txt">
  4. <PARAM NAME="Tree_DefaultUrlTarget" VALUE="_self">
  5. <PARAM NAME="Tree_MouseOverLinkSound" VALUE="drip.au">
  6. <PARAM NAME="Tree_MouseOverMenuSound" VALUE="drip.au">
  7. <PARAM NAME="Tree_MouseClickLinkSound" VALUE="piano.au">
  8. <PARAM NAME="Tree_MouseClickMenuClosedSound" VALUE="chirp.au">
  9. <PARAM NAME="Tree_MouseClickMenuOpenSound" VALUE="return.au">
  10. </APPLET>

The names(values) in the code above are in swedish but that shouldn't be too confusing I think.
Good luck!
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2008
Posts: 2
Reputation: rafael.franco is an unknown quantity at this point 
Solved Threads: 0
rafael.franco rafael.franco is offline Offline
Newbie Poster

Re: Help with Swapping Images onclick

 
0
  #3
Apr 12th, 2008
I've use it at website mega bonus. The code is very short and optimized, look:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function rede(num, acao, obj) {
  2. 	quadro = document.getElementById("quadro-exemplos");
  3. 	if(acao==1) {
  4. 		if(navigator.appVersion.indexOf("MSIE") != -1) {
  5. 			arrVersao = navigator.appVersion.split("MSIE"); 
  6. 			if (parseFloat(arrVersao[1]) < 7) obj.style.backgroundColor = "#f7fff6";
  7. 		}
  8. 		quadro.style.background = 'url(/images/loading.gif) center no-repeat';
  9. 		if(num == 1) quadro.innerHTML = '<img src="/images/exemplo-rede-pequena.gif" alt="Exemplo de Círculo de Relacionamento Pequeno" />';
  10. 		if(num == 2) quadro.innerHTML = '<img src="/images/exemplo-rede-media.gif" alt="Exemplo de Círculo de Relacionamento Médio" />';
  11. 		if(num == 3) quadro.innerHTML = '<img src="/images/exemplo-rede-grande.gif" alt="Exemplo de Círculo de Relacionamento Grande" />';
  12. 		if(num == 4) quadro.innerHTML = '<img src="/images/exemplo-rede-mega.gif" alt="Exemplo de Círculo de Relacionamento Mega" />';
  13. 	} else {
  14. 		if(navigator.appVersion.indexOf("MSIE") != -1) {
  15. 			arrVersao = navigator.appVersion.split("MSIE"); 
  16. 			if (parseFloat(arrVersao[1]) < 7) obj.style.backgroundColor = "#F8FCFF";
  17. 		}
  18. 		quadro.style.background = '';
  19. 		quadro.innerHTML = '<p>Passe o mouse sobre um dos exemplos à esquerda.</p>';
  20. 	}
  21. }
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



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxhelp animate api automatically beta boarder box bug calendar card checkbox child class column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file firehose flash form forms game google gwt html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump math matrixcaptcha microsoft mimic mp3 mysql object offline onmouseoutdivproblem onreadystatechange parent passing pdf php player post problem progressbar rated rating regex runtime scroll search select session shopping size sql star stars stretch text textarea twitter validation w3c web website window windowofwords windowsxp wysiwyg xml xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC