Help with Swapping Images onclick

Expand Post »

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)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<a rel="nofollow" href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
<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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<a rel="nofollow" href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
<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>

Similar Threads

Question About Dreamweaver CS3 / Menus? in HTML and CSS
Swapping images in html in HTML and CSS
How to overcoming a .NET ListView CheckBoxes quirk in VB.NET

Killer_Typo

Reputation Points: 152

Solved Threads: 39

Master Poster

Offline

778 posts
since Apr 2004

Permalink

Jul 22nd, 2004

Re: Help with Swapping Images onclick

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)
<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>
<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!

carlino

Reputation Points: 11

Solved Threads: 0

Newbie Poster

Offline

14 posts
since Jul 2004

Permalink

Apr 12th, 2008

Re: Help with Swapping Images onclick

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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>';
	}
}
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>';
	}
}

rafael.franco

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Apr 2008

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.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: JavaScript and VBScript

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Dynamic pull out menus

DaniWeb Message

Cancel Changes

User Name
Password