imitating java hover class with javascript

miranda · 04-03-2003, 02:34 AM

I am trying to imitate the java hover class using javascript and css. What i have works perfectly in IE but it doesn't work in Netscape. I can write an individual function for each button to get it to work in Netscape but there has to be a better way to determine the individual id of each button. Here is what i use.

var ns6=document.getElementById&&!document.all

function LiteOn () {
if (ns6){
document.getElementById("button").style.backgroundColor = '#6666ff';
}
else {
window.event.srcElement.className = 'on';
}
}
function LiteOff () {
if (ns6){
document.getElementById("button").style.backgroundColor = '#0000ff';
}
else {
window.event.srcElement.className = 'clsButton';
}
}

at first I tried to assign the id of button to each one but that changed color on only the first button no matter which button i was hovering over. Any ideas on what i can try next?

you can see this in action at http://www.dataconnective.net/

cg9com · 04-03-2003, 06:53 AM

couldnt you just use basic event handlers?

Choopernickel · 04-03-2003, 02:06 PM

Even simpler than basic event handlers, why not just use CSS?

Code:

a {
   background-color: #00f;
}
a:hover {
   background-color: #66f;
}

(the three-hex notation is for web-safe and "web-smart" colors. #00f is actually color code #0000ff. It auto-doubles.)

miranda · 04-03-2003, 05:37 PM

they may function as links but only an anchor tag will respond to what you show these are actually buttons like so
<input type="button" class="clsButton" onmousedown=LiteDown() value="About" onClick="WinOpen('about.asp')" width="100" onMouseOver="LiteOn()" onMouseOut="LiteOff()" id="button" name=about>

Choopernickel · 04-03-2003, 06:08 PM

If they serve as link in function, why not make them links?

For your stylesheet:

Code:

body {
   margin-left: 10em;
}
div#navContainer {
   position: absolute;
   top: 110px;
   left: 0;
   width: 8.5em;
   margin: 0;
   border: 0;
   padding: 0;
}
div#navContainer a {
   display: block;
   float: left;
   width: 8em;
   margin: 0;
   border: 2px outset #00f;
   padding: 2px 1px 2px 1px;
   background-color: #00f;
   color: #fff;
}
div#navContainer a:hover {
   background-color: #66f;
   color: #fff;
}
div#navContainer a:active, 
div#navContainer a:focus {
   padding: 3px 0 1px 2px;
   background-color: #00f;
   color: #fff;
}

For your html:

Code:

<body>
...
<div id="navContainer">
<a href="...">About</a>
etc.
</div>

Try that out. Just use a test file first. Bonus of doing it this way: my preffered browser will honor this.

miranda · 04-03-2003, 06:15 PM

thanks for the idea, but i know all about doing something like that. That isnt what i want here though. But thanks anyway.

cg9com · 04-03-2003, 07:48 PM

i meant something more along the lines of this:

<style type="text/css">
.button {
background-color:#fff;
}
.buttonover {
background-color:#000;
}
</style>
<input type="button" value="Button" class="button" onmouseover="this.className='buttonover';"
onmouseout="this.className='button';">

as far as your ID problem, you can only use one value, one time i believe.

miranda · 04-03-2003, 07:55 PM

here is the present stylesheet for use with the above javascript

.clsButton
{
FONT-WEIGHT: bold;
BORDER-COLOR: #0000ff;
BORDER-LEFT-COLOR: #0000ff;
BORDER-BOTTOM-COLOR: #0000ff;
BORDER-RIGHT-COLOR: #0000ff;
BORDER-TOP-COLOR: #0000ff;
BACKGROUND-COLOR: #0000ff;
WIDTH: 100px;
COLOR: #ffffff;
CURSOR: HAND;
}
.on
{
FONT-WEIGHT: bold;
BORDER-COLOR: #6666ff;
BORDER-LEFT-COLOR: #6666ff;
BORDER-BOTTOM-COLOR: #6666ff;
BORDER-RIGHT-COLOR: #6666ff;
BORDER-TOP-COLOR: #6666ff;
BACKGROUND-COLOR: #6666ff;
WIDTH: 100px;
COLOR: #FFFFFF;
CURSOR: HAND;
}
.down
{
FONT-WEIGHT: bold;
BORDER-COLOR: #6666ff;
BORDER-LEFT-COLOR: #6666ff;
BORDER-BOTTOM-COLOR: #6666ff;
BORDER-RIGHT-COLOR: #6666ff;
BORDER-TOP-COLOR: #6666ff;
BACKGROUND-COLOR: #6666ff;
WIDTH: 100px;
COLOR: #000000;
CURSOR: HAND;
}

I figured the id could only be used one time
I thought about using an array to put them in but didnt know how to determine which one had focus

04-03-2003, 02:34 AM	PM User \| #1
miranda Senior Coder Join Date: Dec 2002 Location: Fort Worth, Texas USA Posts: 1,009 Thanks: 0 Thanked 5 Times in 5 Posts	imitating java hover class with javascript I am trying to imitate the java hover class using javascript and css. What i have works perfectly in IE but it doesn't work in Netscape. I can write an individual function for each button to get it to work in Netscape but there has to be a better way to determine the individual id of each button. Here is what i use. var ns6=document.getElementById&&!document.all function LiteOn () { if (ns6){ document.getElementById("button").style.backgroundColor = '#6666ff'; } else { window.event.srcElement.className = 'on'; } } function LiteOff () { if (ns6){ document.getElementById("button").style.backgroundColor = '#0000ff'; } else { window.event.srcElement.className = 'clsButton'; } } at first I tried to assign the id of button to each one but that changed color on only the first button no matter which button i was hovering over. Any ideas on what i can try next? you can see this in action at http://www.dataconnective.net/ Last edited by miranda; 04-03-2003 at 02:36 AM..

04-03-2003, 02:06 PM	PM User \| #3
Choopernickel Regular Coder Join Date: Apr 2003 Location: Atlanta, GA Posts: 487 Thanks: 0 Thanked 0 Times in 0 Posts	Even simpler than basic event handlers, why not just use CSS? Code: a { background-color: #00f; } a:hover { background-color: #66f; } (the three-hex notation is for web-safe and "web-smart" colors. #00f is actually color code #0000ff. It auto-doubles.)

04-03-2003, 05:37 PM	PM User \| #4
miranda Senior Coder Join Date: Dec 2002 Location: Fort Worth, Texas USA Posts: 1,009 Thanks: 0 Thanked 5 Times in 5 Posts	because these are not hyperlinks they may function as links but only an anchor tag will respond to what you show these are actually buttons like so <input type="button" class="clsButton" onmousedown=LiteDown() value="About" onClick="WinOpen('about.asp')" width="100" onMouseOver="LiteOn()" onMouseOut="LiteOff()" id="button" name=about>

04-03-2003, 07:48 PM	PM User \| #7
cg9com Senior Coder Join Date: Jul 2002 Posts: 1,630 Thanks: 0 Thanked 0 Times in 0 Posts	i meant something more along the lines of this: <style type="text/css"> .button { background-color:#fff; } .buttonover { background-color:#000; } </style> <input type="button" value="Button" class="button" onmouseover="this.className='buttonover';" onmouseout="this.className='button';"> as far as your ID problem, you can only use one value, one time i believe. Last edited by cg9com; 04-03-2003 at 07:51 PM..

04-03-2003, 07:55 PM	PM User \| #8
miranda Senior Coder Join Date: Dec 2002 Location: Fort Worth, Texas USA Posts: 1,009 Thanks: 0 Thanked 5 Times in 5 Posts	present stylesheet looks like this here is the present stylesheet for use with the above javascript .clsButton { FONT-WEIGHT: bold; BORDER-COLOR: #0000ff; BORDER-LEFT-COLOR: #0000ff; BORDER-BOTTOM-COLOR: #0000ff; BORDER-RIGHT-COLOR: #0000ff; BORDER-TOP-COLOR: #0000ff; BACKGROUND-COLOR: #0000ff; WIDTH: 100px; COLOR: #ffffff; CURSOR: HAND; } .on { FONT-WEIGHT: bold; BORDER-COLOR: #6666ff; BORDER-LEFT-COLOR: #6666ff; BORDER-BOTTOM-COLOR: #6666ff; BORDER-RIGHT-COLOR: #6666ff; BORDER-TOP-COLOR: #6666ff; BACKGROUND-COLOR: #6666ff; WIDTH: 100px; COLOR: #FFFFFF; CURSOR: HAND; } .down { FONT-WEIGHT: bold; BORDER-COLOR: #6666ff; BORDER-LEFT-COLOR: #6666ff; BORDER-BOTTOM-COLOR: #6666ff; BORDER-RIGHT-COLOR: #6666ff; BORDER-TOP-COLOR: #6666ff; BACKGROUND-COLOR: #6666ff; WIDTH: 100px; COLOR: #000000; CURSOR: HAND; } I figured the id could only be used one time I thought about using an array to put them in but didnt know how to determine which one had focus Last edited by miranda; 04-03-2003 at 07:57 PM..

04-03-2003, 06:53 AM	PM User \| #2
cg9com Senior Coder Join Date: Jul 2002 Posts: 1,630 Thanks: 0 Thanked 0 Times in 0 Posts	couldnt you just use basic event handlers?

04-03-2003, 06:15 PM	PM User \| #6
miranda Senior Coder Join Date: Dec 2002 Location: Fort Worth, Texas USA Posts: 1,009 Thanks: 0 Thanked 5 Times in 5 Posts	thanks for the idea, but i know all about doing something like that. That isnt what i want here though. But thanks anyway.

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread: