PDA

View Full Version : Class name change or do it myself?

jaywhy13
02-16-2005, 03:37 AM
I've been recently using a lot of highlight functions and by that I mean... say i hav a menu....
=========
|| Menu ||
=========
| 1. Item |
| 2. Item |
| 3. Item |


Summin like that, use ur imagination.... table by the way.. when i hover over it I want to do summin like... change the backgroud color of 1. Item and make it bold

The concern that I have is that there is a slight delay.... I mouse over and it takes like a lil while to come up... the delay is mayb about a second... but still a bit too slow

Current I get it done summin like so:
<html>
.
.
<script>
function highlight(obj)
{
if (obj.style.backgroundColor=white)
{
change the bgcolor and font weighting
}
else if (obj.style.backgroundColor!=white)
{
reset it! make it white and font normal
}

}
</script>
.
<table>
<tr><td onmouseOver=highlight(this) onmouseOut=highlight(this)>1. Item</td></tr>
.
.
.
.
</table>
</html>
Is it a better idea to simply change tha class name? Or is there a more efficient way to get it done? :cool:
cfc
02-16-2005, 05:19 AM
In Firefox you can do it with CSS, and IE will ignore the :hover pseudo-class on anything other than <a> tags. Unfortunately, the only way to do this in IE is either with a style-switching JavaScript or HTML Behaviours. If you don't need drop-down functionality, pure JavaScript is the best way to go for cross-browser markup/code.

I can't remember too well; doesn't JavaScript require you to declare strings as literal (use double quotes)? I think class switching would probably be smarter than using colours to define your function's functionality:


<head>
<style type="text/css">
.highlighted {
background-color: grey;
font-weight: bold;
}
.unhighlighted {
background-color: white;
font-weight: normal;
}
</style>
<script language="Javascript">
function highlight(obj)
{
if (obj.class == "highlighted") {
obj.class = "unhighlighted";
} else if (obj.class == "unhighlighted) {
obj.class = "highlighted";
}
}
</script>

...

<td class="unhighlighted" onmouseOver="highlight(this)" onmouseOut="highlight(this)">1. Item</td>


I don't know if changing class names will make it any more efficient, but it seems like better coding practice at least because you just have to change the stylesheet to define how your script alters the formatting of the text.
jaywhy13
02-16-2005, 09:13 PM
Thanks for tha insight and glad u mentioned in passin that the ":hover" thing is ignored by Explorer. I really never knew that....

I'm gonna try that and see if it makes a difference