Forum Moderators: not2easy
Im after some good tutorials on how to do rollover links using images in css. same kind of thing to like they have on the cssvault at the top.
Can anyone point me in the right direction?
Thanks in advance :)
Ash
Here is how you can control an image with mouse over/out javascript effect that merely changes the classes.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
img.mouseout {
border: 1px solid #FFF;
position: absolute;
left: 400px;
top: 400px;
}
img.mouseover {
border: 2px dotted #333;
position: absolute;
left: 420px;
top: 420px;
}
</style>
</head><body>
<img src="image.gif" alt="you must have alternative txt" onmouseover="this.className='mouseover'" onmouseout="this.className='mouseout'" />
</body>
</html>
You could also take the same Javascript and apply this effect to a DIV. Create a div to have a mouseover and mouseout class, add the javascript, and change the background image accordingly. VERY simple and it's the smallest method possible until IE supports the :hover attribute in CSS.
does that just not change the colour of the border round an image though?
what i meant was how to make navigation from a list, then styling this list to use images, one image for on, one for off
Make a transparant gif (1 pixel).
Make each menu item a link.
<a href="menuitem1.html" class="menuitem" id="menuitem1"><img src="blank.gif"/></a>
Use css to set rollover effects.
Set the correct width and height for the items. Here I assume that each menuitem image has the same size.
a.menuitem img {
border-width: 0px;
width: 64px;
height: 32px;
background: top left no-repeat;
}
a#menuitem1 img {
background-image: url(menuitem1.gif);
}
a#menuitem1:hover img {
background-image: url(menuitem1_hover.gif);
}
Hope this helps.
