Member Avatar for Killer_Typo

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}
</script>
<title>Untitled Document</title>
</head>
<body>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
	<div><img src="nav_test/home.jpg" border="0"></div>
	<div onclick="SwitchMenu('sub1')"><img src="nav_test/nav_home.jpg" border="0"></div>
	<span class="submenu" id="sub1">
		- <a href="new.htm">What's New</a><br>
		- <a href="hot.htm">What's hot</a><br>
		- <a href="revised.htm">Revised Scripts</a><br>
		- <a href="morezone/">More Zone</a>
	</span>
	<div onclick="SwitchMenu('sub2')"><img src="nav_test/nav_services.jpg" border="0"></div>
	<span class="submenu" id="sub2">
		- <a href="notice.htm">Usage Terms</a><br>
		- <a href="faqs.htm">DHTML FAQs</a><br>
		- <a href="help.htm">Scripts FAQs</a>
	</span>
	<div onclick="SwitchMenu('sub3')"><img src="nav_test/nav_products.jpg" border="0"></div>
	<span class="submenu" id="sub3">
		- <a href="<A href="http://www.codingforums.com">coding/">http://www.codingforums.com">Coding Forums</a><br>
	</span>
	
	<div onclick="SwitchMenu('sub4')"><img src="nav_test/nav_support.jpg" border="0"></div>
	<span class="submenu" id="sub4">
		- <a href="<A href="http://www.javascriptkit.com">javascript/">http://www.javascriptkit.com">JavaScript Kit</a><br>
		- <a href="<A href="http://www.freewarejava.com">freewarejava</a><br">http://www.freewarejava.com">Freewarejava</a><br>
		- <a href="<A href="http://www.cooltext.com">cool/">http://www.cooltext.com">Cool Text</a><br>
		- <a href="<A href="http://www.google.com">google.com</a">http://www.google.com">Google.com</a>
	</span>
	<div onclick="SwitchMenu('sub5')"><img src="nav_test/nav_download.jpg" border="0"></div>
	<span class="submenu" id="sub5">
		- <a href="<A href="http://www.dynamicdrive.com/link.htm">Link">http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
		- <a href="<A href="http://www.dynamicdrive.com/recommendit/">Recommend">http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
		- <a href="<A href="http://www.dynamicdrive.com/contact.htm">Email">http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
	</span>
	<div onclick="SwitchMenu('sub6')"><img src="nav_test/nav_contact.jpg" border="0"></div>
	<span class="submenu" id="sub6">
		- <a href="<A href="http://www.dynamicdrive.com/link.htm">Link">http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
		- <a href="<A href="http://www.dynamicdrive.com/recommendit/">Recommend">http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
		- <a href="<A href="http://www.dynamicdrive.com/contact.htm">Email">http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
	</span>
</div>
</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 270 Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by rafael.franco

Dani AI

Generated

A straightforward, robust way to keep the existing “one submenu open at a time” behavior and also swap the button graphic is to store the open/closed image URLs on the button (data attributes), toggle the submenu display, and change only the image src (no innerHTML rewrites). This keeps layout stable, is easy to preload, and works with progressive enhancement. This follows the intent from and avoids the heavier applet approach suggested by ; it also avoids replacing whole blocks like ’s innerHTML method, which can cause reflows and accessibility loss.

Example (HTML + JS):

<div id="masterdiv">
  <div class="toggle" data-target="sub1">
    <img src="img/home-closed.png"
         data-open="img/home-open.png"
         data-closed="img/home-closed.png"
         alt="Home" />
  </div>
  <div id="sub1" class="submenu" style="display:none"> ... links ... </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
  var master = document.getElementById('masterdiv');
  preloadImages(master);
  master.addEventListener('click', function(e){
    var btn = e.target.closest('.toggle');
    if(!btn) return;
    var panel = document.getElementById(btn.dataset.target);
    var wasOpen = panel && panel.style.display === 'block';

    master.querySelectorAll('.submenu').forEach(p => p.style.display = 'none');
    master.querySelectorAll('.toggle img').forEach(img => img.src = img.dataset.closed);

    if(!wasOpen && panel){
      panel.style.display = 'block';
      var img = btn.querySelector('img');
      img.src = img.dataset.open;
      img.setAttribute('aria-expanded','true');
    }
  });

  function preloadImages(root){
    root.querySelectorAll('.toggle img').forEach(img=>{
      ['open','closed'].forEach(k=>{
        if(img.dataset[k]) new Image().src = img.dataset[k];
      });
    });
  }
});
</script>

Notes and troubleshooting: prefer a real <button> (or set tabindex/keyboard handlers) for accessibility and set aria-expanded on the toggles. Remove deprecated border="0" in favor of CSS. If you want to keep the original SwitchMenu() approach, pass this from the inline onclick (e.g. SwitchMenu('sub1', this)) and change the function to update the clicked image’s src. Preload images to avoid flicker, and check paths in the console if swaps don’t show.

Member Avatar for carlino

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:

And the code to be used in the web page in the body is like this:

<APPLET CODE="TreeApplet" NAME="TreeApplet" WIDTH="220" HEIGHT="340">
<PARAM NAME="Copyright" VALUE="(c)1998 Robert Della Malva (robdella@webshuttle.ch)">
<PARAM NAME="Tree_ScriptFile" VALUE="os_script.txt">
<PARAM NAME="Tree_DefaultUrlTarget" VALUE="_self">
<PARAM NAME="Tree_MouseOverLinkSound" VALUE="drip.au">
<PARAM NAME="Tree_MouseOverMenuSound" VALUE="drip.au">
<PARAM NAME="Tree_MouseClickLinkSound" VALUE="piano.au">
<PARAM NAME="Tree_MouseClickMenuClosedSound" VALUE="chirp.au">
<PARAM NAME="Tree_MouseClickMenuOpenSound" VALUE="return.au">
</APPLET>

The names(values) in the code above are in swedish but that shouldn't be too confusing I think.
Good luck!

Member Avatar for rafael.franco

I've use it at website mega bonus. The code is very short and optimized, look:

function rede(num, acao, obj) {
	quadro = document.getElementById("quadro-exemplos");
	if(acao==1) {
		if(navigator.appVersion.indexOf("MSIE") != -1) {
			arrVersao = navigator.appVersion.split("MSIE"); 
			if (parseFloat(arrVersao[1]) < 7) obj.style.backgroundColor = "#f7fff6";
		}
		quadro.style.background = 'url(/images/loading.gif) center no-repeat';
		if(num == 1) quadro.innerHTML = '<img src="/images/exemplo-rede-pequena.gif" alt="Exemplo de Círculo de Relacionamento Pequeno" />';
		if(num == 2) quadro.innerHTML = '<img src="/images/exemplo-rede-media.gif" alt="Exemplo de Círculo de Relacionamento Médio" />';
		if(num == 3) quadro.innerHTML = '<img src="/images/exemplo-rede-grande.gif" alt="Exemplo de Círculo de Relacionamento Grande" />';
		if(num == 4) quadro.innerHTML = '<img src="/images/exemplo-rede-mega.gif" alt="Exemplo de Círculo de Relacionamento Mega" />';
	} else {
		if(navigator.appVersion.indexOf("MSIE") != -1) {
			arrVersao = navigator.appVersion.split("MSIE"); 
			if (parseFloat(arrVersao[1]) < 7) obj.style.backgroundColor = "#F8FCFF";
		}
		quadro.style.background = '';
		quadro.innerHTML = '<p>Passe o mouse sobre um dos exemplos à esquerda.</p>';
	}
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.