...

View Full Version : 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?


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:


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:


<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum