Forum Moderators: not2easy
I have 5 images that make up my main navigation for my site:
nav_01.jpg
nav_02.jpg
nav_03.jpg
nav_04.jpg
nav_05.jpg
Then I have 5 other images that are used for the rollovers such as:
roll_01.jpg
roll_02.jpg
roll_03.jpg
roll_04.jpg
roll_05.jpg
What I need is that when you rollover/mouseover nav_01.jpg , roll_01.jpg shows and so on for the other images, ANY help is GREATLY appreciated, THANKS IN ADVANCED.
Alex
[edited by: AlexPoucher at 6:03 am (utc) on Mar. 2, 2008]
here is an example of a basic CSS hover with javascript preloading of the rollover images...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
#nav ul {
list-style-type:none;
}
#lnk1 {
width:100px; /*change this value to suit*/
height:30px; /*change this value to suit*/
display:block;
background-image:url(nav_01.jpg);
}
#lnk1:hover {
background-image:url(roll_01.jpg);
}
#lnk2 {
width:100px; /*change this value to suit*/
height:30px; /*change this value to suit*/
display:block;
background-image:url(nav_02.jpg);
}
#lnk2:hover {
background-image:url(roll_02.jpg);
}
#lnk3 {
width:100px; /*change this value to suit*/
height:30px; /*change this value to suit*/
display:block;
background-image:url(nav_03.jpg);
}
#lnk3:hover {
background-image:url(roll_03.jpg);
}
#lnk4 {
width:100px; /*change this value to suit*/
height:30px; /*change this value to suit*/
display:block;
background-image:url(nav_04.jpg);
}
#lnk4:hover {
background-image:url(roll_04.jpg);
}
#lnk5 {
width:100px; /*change this value to suit*/
height:30px; /*change this value to suit*/
display:block;
background-image:url(nav_05.jpg);
}
#lnk5:hover {
background-image:url(roll_05.jpg);
}
</style><!-- you may want to use this image preloader for a smoother rollover effect -->
<script type="text/javascript">
var preloads=[];function preload() {
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
}
preload('roll_01.jpg','roll_02.jpg','roll_03.jpg','roll_04.jpg','roll_05.jpg');
</script></head>
<body><div id="nav">
<ul>
<li><a id="lnk1" href="#"></a></li>
<li><a id="lnk2" href="#"></a></li>
<li><a id="lnk3" href="#"></a></li>
<li><a id="lnk4" href="#"></a></li>
<li><a id="lnk5" href="#"></a></li>
</ul></div>
</body>
</html>
nice code there from birdbrain, but if you prefer no script, you can join all the images together and avoid the scripted "preload" and use pure CSS.
say for example your image (or link size) is 300 x 100 and your images are all 300 x 100
take nav_01 and roll_01 and join them together making a 600 x 100 graphic (you can possibly extend this to join all 10 images together but I'll use one for describing)
so your new image is 600 x 100 with the first half the normal state and the the second half the hover state
<ul id="nav">
<li class="nav1"><a href="#">this is link 1</a></li>
</ul>CSS:
ul#nav .nav1 a {
display: block;
width: 300px;
height: 100px;
background: #000 url(joinedimage1.jpg) no-repeat 0 0;
/* 0px from left and 0px from top */
}ul#nav .nav1 a:hover {
background-position: -300px 0;
/* 300px from the left 0px from the top */
}
what that's doing is setting the whole image as a background to the link, no matter what state, you can only see what's in the 300x100 "window" created by the link dimensions - while in the normal state the background image is sitting at the default background position (0 0), then when you hover over it is moving the background 300px negatively (to the left) so it's showing the second half of the image in your link "window"
the image has already loaded with the page load all it's doing is moving on hover, so there is no momentary flicker while it loads a second image
like I said that's the basic idea - you could probably join all 10 images together and create a CSS Sprite and then you would also use the other co-ordinate to move up/down, but you should leave some whitespace between the images to allow for text resizing or the like.
a search for "css rollovers no preload" should bring up some visual examples of this technique.
-Suzy
