Menu
I want to change the class of a tag through the dom when it’s hovered. I do know how to program and stuff, but i confess to being quite new to javascript, dom, and the sort. heres my html:
[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>experimental fun with ajax</title>
<meta http-equiv=”Content-Language” content=”EN-US” />
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” href=”sheet.css” type=”text/css” />
<script src=”script.js” />
</head>
<body>
DYNAMIC LISTEY THING
<ul id=”dropdownlist”>
<li>Pirate Words
<ul id=”ul1″>
<li>yar</li>
<li>yar1</li>
<li>yar2</li>
<li>yar3</li>
</ul>
</li>
<li>Computer Words
<ul id=”ul2″>
<li>USB</li>
<li>PORT</li>
<li>BYTE</li>
<li>PROTOCOL</li>
</ul>
</li>
</ul>
</body>
</html>
simple enough. i want the li’s directly under the ‘dropdownlist’ to change class onmouseover. here’s my script:
[code]window.onload = function onload(){
document.getElementById(‘dropdownlist’).getElementsByTagName(“li”).onmouseover = document.getElementById(‘dropdownlist’).getElementsByTagName(“li”).setAttribute(‘class’, ‘hovered’)
}
it wasnt picking up the dropdownlist element before, now it’s telling me setattribute isnt a function. also, in it’s current state the page doesn’t show anything in ie. that might have something to do with the window.onload part, that seems to behave a bit differently in ie. HELP PLEASE!
for those who are interested, the purpose of this is to see if i can use javascript to change the class of something onmouseover, and if the item will then immediately take the traits of that class from the stylesheet on the fly. this would be a good alternative for the :hover with just css, as ie only allows for :hover on <a>.
If i can pull this off, i could write a script that duplicated the styles of all :hover parts of the stylesheet and made them separate classes, and had those elements changed to those classes onmouseover. perhaps even appending :hover to the classes of all elements onmouseover would be enough. that would mean that the addition of a simple script would allow for :hover css to be used on any element in ie. that would be pretty cool.
first priority is the immediate problem expressed above, but if you have any suggestions on this ultimate goal or if someone has already beat me to the same kind of script, please let me know. thanks in advance!