Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JS rollover menu with toggle type buttons?

Status
Not open for further replies.
iForget

iForget

Programmer
Jul 17, 2002
4
US
Hi,

//oversimplified--->

I have made a page with a nav bar at the top, consisting of a table with images for the buttons. It is scripted to swap the image with a "highlighted" image using onmouseover and returns to "normal" onmouseout.

what i would like to do is have an onmousedown(?) event that keeps the button highlighted until another button is pressed. When another button is pressed, it should become highlighted and the previous one return to "normal."

any suggetions on how this can be done?

thanks in advance
 
Sort by date Sort by votes
You can do this. Use the following algorithm:

1. remove all onmouseout actions.
2. for onmouseover write the function that
a) loops through all images and change them to "off mode"
b) highlight the current one

Something like this:
<a href=&quot;#&quot; onmouseover=doit('n2')><img src=&quot;&quot; name=&quot;n2&quot; ...></a>

function doit(current) {

for (n=0; n<imageAmount; n++)
document.images[n].src = &quot;off_state&quot;

document.images['current'].src = &quot;on_state&quot;
}

Use onclick instead of onmouseover if you want it happen only when you click on the image.

good luck
 
Upvote 0 Downvote
thanks! I'll try that.

I do, however, still want the button to respond to mouseout so when you pass over a button without clicking, it does not remain highlighted. For example, when a button is ON, the other buttons still should get highlighted as you pass over them. Then when you click a new button, the other one goes off and the new one is ON. Will this work off your script? Or am i too noob and that is what your script really does in the first place? I won't know w/o trying.

thanks agian for the response.
 
Upvote 0 Downvote
Now you say an opposite to what you wanted first.
To say truth, I don't see any practical use of this - when you highlight everything, nothing is highlighted actually (know what I mean?).

However you can do it if you want:
<a href=&quot;#&quot; onmouseover=&quot;highlightCurrent('n2')&quot; onclick=&quot;doit('n2')&quot;>

where highlightCurrent() changes current image to &quot;on_state&quot;.

In general, combining different event handlers for link (onclick, onmouseover, onmouseout) you can do anything you want.

good luck
 
Upvote 0 Downvote
iForget,

I wrote this example with <input> buttons, but perhaps it will help you out:

Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 FINAL//EN&quot;>
<html>
<head>
<title>retain button state</title>

<script name=&quot;javascript&quot;>
function handleOver(oBtn) {
	if (oBtn.state != &quot;on&quot;)
	oBtn.style.backgroundColor = &quot;#ff0000&quot;;
}

function handleOut(oBtn) {
	if (oBtn.state != &quot;on&quot;)
		oBtn.style.backgroundColor = &quot;&quot;;
}

function handleClick(oBtn) {
	arrButtons = document.all.tags(&quot;input&quot;);
	for (idx = 0; idx < arrButtons.length; idx++) {
		if (arrButtons[idx].getAttribute(&quot;type&quot;) == &quot;button&quot;) {
			arrButtons[idx].state = &quot;off&quot;;
			arrButtons[idx].style.backgroundColor = &quot;#ffffff&quot;;
		}
	}
	oBtn.state = &quot;on&quot;;
	oBtn.style.backgroundColor = &quot;#0000ff&quot;;
}
</script>

<style type=&quot;text/css&quot;>
input {
	width:50px;
	background-color:#ffffff;
}
</style>

<meta name=&quot;author&quot; content=&quot;?&quot;>
<meta name=&quot;keywords&quot; content=&quot;?&quot;>
<meta name=&quot;description&quot; content=&quot;?&quot;>
</head>

<body onload=&quot;&quot;>
<input type=&quot;button&quot; name=&quot;b1&quot; value=&quot;1&quot; onclick=&quot;handleClick(this);&quot; onmouseover=&quot;handleOver(this);&quot; onmouseout=&quot;handleOut(this);&quot; />
<input type=&quot;button&quot; name=&quot;b2&quot; value=&quot;2&quot; onclick=&quot;handleClick(this);&quot; onmouseover=&quot;handleOver(this);&quot; onmouseout=&quot;handleOut(this);&quot; />
<input type=&quot;button&quot; name=&quot;b3&quot; value=&quot;3&quot; onclick=&quot;handleClick(this);&quot; onmouseover=&quot;handleOver(this);&quot; onmouseout=&quot;handleOut(this);&quot; />
</body>
</html>

======================================

if (!succeed) try();
-jeff
 
Upvote 0 Downvote
...or not...it's only IE compliant as-is...sorry
======================================

if (!succeed) try();
-jeff
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
239
gmmastros
gmmastros
trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
627
trevil620
trevil620
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
751
xwb
xwb
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
877
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
953
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top