Ids must be unique on the page, so you can only have one id of the same name per page. It is invalid (and unnessecary I'd say) to have a div inside an a. Also, your JavaScript is invalid. But you can do this:
Code:
<head>
<script type="text/javascript">
function changeon(a){
a.className="menu_image1";
}
function changeoff(){
a.className="menu_image";
}
</script>
</head>
<a href="?id=1" class="menu_main"><div class="menu_image" onmouseover="changeon(this);" onmouseout="changeoff(this);">Main_1</div></a>
<a href="?id=2" class="menu_main"><div class="menu_image" onmouseover="changeon(this);" onmouseout="changeoff(this);">Main_2</div></a>
<a href="?id=3" class="menu_main"><div class="menu_image" onmouseover="changeon(this);" onmouseout="changeoff(this);">Main_3</div></a>
Even better, would be Event Delegation. Once you set it up, it makes your job much easier. Example (I removed your divs because you shouldn't need them, and it's a menu?).
Code:
<head>
<script type="text/javascript">
window.onload = function(){
var e = document.getElementById("menu_main");
e.onmouseover = change;
e.onmouseout = change;
};
function change(e){
e = e||window.event;
e = e.target||e.srcElement;
if (e.nodeName == "A") {
e.className = e.className=="menu_image1"?"menu_image":"menu_image1";
}
}
</script>
</head>
<div id="menu_main">
<a href="?id=1" class="menu_image">Main_1</a>
<a href="?id=2" class="menu_image">Main_2</a>
<a href="?id=3" class="menu_image">Main_3</a>
</div>
Possible new CSS:
Code:
// Instead of .menu_main use
#menu_main a {}
That's untested, so try it out and read the link. If it doesn't work, ask.
Oh, and by the way, you should only need one class. The default behaviour can be gotten by #menu_main a (that is, all a elements that are contained in something with an id of menu_main), and then the special behaviour can be .menu_image1 or something.
[RESOLVED] Onmouuseover and onmouseout problem..
Reply With Quote
)
Bookmarks