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

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



acid2 ajax ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC