PDA

Click to See Complete Forum and Search --> : slow-loadin' rollover buttons

vic123
08-06-2003, 02:31 AM
Charles....... Anybody?

My nav rollovers worked in an instant
when rolled-over while I was coding the page.
Uploaded however, I'm getting this 5-second
lag until the 'On' state of the button can be
seen, and when I roll-off of the button the
'On' state of the button stays there for a while.

Could someone please take a look for me?
http://www.brandishdesign.com/sam

Thank you all.
Vic
ps: I'm hoping this isn't all because the page
is so image heavy to begin with.....!!!
Ice3T
08-06-2003, 02:59 AM
It works fine for me
AdamGundry
08-06-2003, 04:12 AM
It works fine for me also, but I'm on DSL. I think it's probably the time for the browser to load the images, in which case you might want to look in to compressing the images and preloading them.

Adam
vic123
08-06-2003, 08:37 AM
I'm on a good ol' fashioned 56K modem...
Isnt' all the code up in the head of my HTML an image preloader? If not, where can I grab the code for that.

The buttons themselves are about as compressed as can be.

But really guys, super thanks for your quick replies!
kdcgrohl
08-06-2003, 01:42 PM
I had the same problem. I ended up rewriting the whole page to use divs that were either visible or not overtop of another image. Works very well now. See if they're fast enough on your connection, main page. The first line still uses the standard src changing rollover method, the rest use what I talked about above.
sneakyimp
10-25-2004, 02:31 PM
i'm wondering if the lag might be due to your browser checking for a more recent version of the image. i know that IE has a setting where you can specify how it behaves when visiting a page...

maybe you could try that and see if it helps? i have a similar problem with sluggish mouseovers. lavalamp has posted some CSS code that supposedly does lightning fast mouseovers.
mikemay
10-25-2004, 10:56 PM
I am a newbie at javascript and css but here css code I use for rollovers

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rollovers</title>
<style type="text/css" media="screen">

#image a{
background:url(seadoofast.jpg) no-repeat top left;
width: 225px;
height: 148px;
float: left;
margin: 5px;
}
#image a:hover {
background:url(fast.jpg) no-repeat top left;
}
#image1 a{
background:url(seadoowet.jpg) no-repeat top left;
width: 225px;
height: 148px;
float: left;
margin: 5px;
}
#image1 a:hover {
background:url(powder.jpg) no-repeat top left;
}
#image2 a{
background:url(seadootail.jpg) no-repeat top left;
width: 225px;
height: 148px;
float:left;
margin: 5px;
}
#image2 a:hover {
background:url(tail.jpg) no-repeat top left;
}
.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
font-style: italic;
font-size: 24px;
margin: 5px;
}
body {
background-color: #00CCFF;
}
</style>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<span class="style1">Summer &amp; Winter Fun</span><br />
<div id="image"><a href="#"></a></div>
<div id="image1"><a href="#"></a></div>

<div id="image2"><a href="#"></a></div>
</body>
</html>