...

View Full Version : Rollover effect with images and no preload



jpalazzi
10-19-2004, 06:11 PM
Do you guys know of a way to get rid of the annoying delay when using images as a bg on a menu and an image as the rollover on the menu?

coothead
10-19-2004, 07:11 PM
Hi there jpalazzi,

you may find this thread (http://www.htmlforums.com/showthread.php?s=&threadid=45580) of interest :)

coothead

jpalazzi
10-19-2004, 08:20 PM
That is a neat trick. I am not sure how the rollover works though.
I want an image as teh background color and then i want another image as the rollover color.

How does it change the actual color?

Thanks

bradyj
10-19-2004, 08:32 PM
Like mine:
http://www.igotyourhouse.com

You have one major image that has the rollover as the top or bottom, and vice versa:
http://www.igotyourhouse.com/images/links.png

Then you just code it so that when someone rolls over the link, the background shifts up or down:


#navbar a{
font: normal 14px/26px helvetica, verdana, arial, sans-serif;
text-align: center;
color: #666;
display: block;
text-decoration: none;
background: transparent url(images/myrollover.png) no-repeat scroll 0px 0px;
}
#navbar a:hover{
color: white;
background: transparent url(images/myrollover.png) no-repeat scroll 0px -25px;
}


Make sense? You can even hide the text and just do images, but text + images is a lot more sane -- though, sometimes not needed.

coothead
10-19-2004, 08:41 PM
Hi there jpalazzi,

as bradyj said or in my example from right to left :D
The major advantage apart from no preload problems is no javascript :)

coothead

]|V|[agnus
10-19-2004, 08:55 PM
Credit where its due: http://wellstyled.com/css-nopreload-rollovers.html

And an interesting variation I've not played with myself: http://devilock.mine.nu/pixie/

jpalazzi
10-19-2004, 10:56 PM
Brady J
background: transparent url(images/myrollover.png) no-repeat scroll 0px 0px;
}
#navbar a:hover{
color: white;
background: transparent url(images/myrollover.png) no-repeat scroll 0px -25px;


seems to me you are using the same image? Do you set the intial background in the html or something?

]|V|[agnus
10-19-2004, 11:00 PM
Yes... note that the position of it is shifting by exactly the height of the container...

Also CLICK THE LINKS ABOVE... :thumbsup:

jpalazzi
10-19-2004, 11:17 PM
:confused:

#nav a
{
width: 95px;
display: block;
color: black;
text-decoration: none;
background-color: #D5D5D5;
border: 1px solid #000000;
padding: 4px;
font:12px verdana; /* N6 needs this to cascasde the font style */
background-image: url(menubg2.jpg);

}

/* BMH for IE 5 */

* html #nav a
{
width: 92px;
w\idth: 92px;
}

#nav li
{
float: left;
width: 93px; /* width of the individual bars */
position: relative;

}

#nav li ul
{
position: absolute;
left: -999em;
width: 95px;
}

#nav li a:hover
{
color: #FFFFFF;
background-color: #B40820;
background-image: url(menubg3.jpg);

}

#nav li:hover ul, #nav li.sfhover ul
{
left: auto;
}

#nav ul
{
text-align: center;
display: block;
}



That's my style sheet...can someone tell me what to edit...I have tried all the things you suggest, but no of them work right.

Thanks to anyone who can help.

bradyj
10-20-2004, 05:38 PM
Ok, did you put this on your site yet? Look at your code right there, I can see problems, but I cannot test it affectively. I'll give an example -- say you have this list:


<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>


Now you'd like to style those links:


#nav li a {
width: 100px;
height: 20px;
display: block;
background: transparent url(image/image.png) no-repeat 0px 0px;
}
#nav li a:hover {
background: transparent url(image/image.png) no-repeat -20px 0px;
}


That will shift the background image -25px when someone rolls their mouse over the link. So you would have created an image that is 40px tall, top half being 20px of the rollover image, the bottom half being the original state. You could even make a larger image and do visited or active or all that stuff:)

jpalazzi
10-20-2004, 06:07 PM
OHHHHH
So i take both images i use now...image1.jpg and image2.jpg and combine them into one image. then just shift it up and down!
Gotcha!
Man i am sorry about that...Brain Fart.

bradyj
10-20-2004, 07:56 PM
OHHHHH
So i take both images i use now...image1.jpg and image2.jpg and combine them into one image. then just shift it up and down!
Gotcha!
Man i am sorry about that...Brain Fart.

Bingo ;) It's cool, I didn't really get it at first either, it's rather contradictory to what we're accustomed to.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum