[m]
October 11th, 2004, 03:48 PM
If you have an CSS menu:
Put an id into the body of the page, like
<body id="#page-about">
<ul id="menu">
<li id="menu-about"><a>ABOUT</a></li>
<li id="menu-home"><a>HOME</a></li>
<li id="menu-link"><a>LINK</a></li>
<li id="menu-contact"><a>CONTACT</a></li>
</ul>
<h1>About</h1>
<div>
content
content
content
content
</div>
</body>
(this is an example 'about' page)
You can target single buttons with that construct, like this:
#page-contact #menu-contact a {
backround-image: url('some.jpg');
}
#page-link #menu-link a {
backround-image: url('some1.jpg');
}
#page-about #menu-about a {
backround-image: url('some2.jpg');
}
#page-contact #menu-contact a {
backround-image: url('some.jpg');
}
#page-home #menu-home a {
backround-image: url('some3.jpg');
}
Now every page you'll give it a unique id in the body, like id="page-home" for your homepage and id="page-link" for the links section.
Javascript:
get rid of the onmouseover="" and onmouseout="" attributes on the button wich you want to have the hover state, and add the image yourself.