RSS Forums RSS
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 20825 | Replies: 2
Reply
•
•
Join Date: Apr 2004
Location: Tracy
Posts: 744
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Rep Power: 7
Solved Threads: 32
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Help with Swapping Images onclick

  #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:
<!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>
!!!!! WARNING YOUR COMPUTER MAY BE INFECTED WITH SPYWARE!!!! PAY AN OVER PRICED AMMOUNT TO HAVE SOMTHING FIXED WE PLACED THERE IN THE FIRST PLACE!!!!!!!!!

sound familiar, know how to block yourself and keep yourself clean.
_____________________
http://www.lavasoftusa.com/ -->adaware
http://www.safer-networking.org/en/index.html -->spybot S&D
http://www.javacoolsoftware.com/spywareblaster.html -->spywareblaster
http://www.javacoolsoftware.com/spywareguard.html -->spywareguard
_____________________
and dont forget to spread the reputation to those that deserve!
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Jul 2004
Location: Stockholm, Sweden
Posts: 14
Reputation: carlino is an unknown quantity at this point 
Rep Power: 5
Solved Threads: 0
carlino's Avatar
carlino carlino is offline Offline
Newbie Poster

Re: Help with Swapping Images onclick

  #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:
<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!
Reply With Quote  
•
•
Join Date: Apr 2008
Posts: 2
Reputation: rafael.franco is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
rafael.franco rafael.franco is offline Offline
Newbie Poster

Re: Help with Swapping Images onclick

  #3  
Apr 12th, 2008
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>';
	}
}
Reply With Quote  
Reply

Quick Reply to Thread
•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
Currently Active Users Viewing This Thread: 2 (0 members and 2 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 6:03 am.
Newsletter Archive - Sitemap - Privacy Statement - Acceptable Use Policy - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC