Rollovers in IE.

dorts · 10-06-2006, 04:57 AM

Hi all,

I created a new little website. But now the problem is that IE doesn't cache my rollovers. So it always loads from the source of the picture. One is at the top, while the rest are all the navigations on the right. Not completed yet but, I will just post a link.
http://dorts.cabspace.com/
I tried many methods, from CSS to javascript. Nothing works. I thought it may be because of my CSS file.

Here is the CSS file.

/*#############################################################
Name: Bitter Sweet
Date: 2006-10-02
Description: Lime flavoured template with two columns.
Author: Viktor Persson
URL: http://templates.arcsin.se

Feel free to use and modify but please provide credits.
#############################################################*/

/* standard elements */
* {
margin: 0;
padding: 0;
}
a {color: #682;}
a:hover {color: #9A6;}
body {
background: #5F8000 url(img/bg6.gif) repeat-y center top;
color: #333;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
}
input {
color: #555;
font: normal 1.1em "Lucida Sans Unicode",sans-serif;
}
p,cite,code,ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
ul {margin-left: 1.2em;}
li {list-style-image: url(img/li.gif);}
h1 {font-size: 1.4em;}
blockquote {
background: #FFF;
border-bottom: 1px solid #EEE;
border-top: 1px solid #EEE;
color: #333;
display: block;
font-size: 0.9em;
margin-bottom: 1.2em;
padding: 6px 12px;
}
blockquote p {padding: 3px 0;}
h1,h2,h3 {color: #654;}

/* misc */
.clearer {clear: both;}

/* structure */
.container {
background: url(img/bgcontainer.gif) repeat-y;
margin: 0 auto;
width: 702px;
}

/* top */
.top {
background: url(img/top.gif);
font: normal 2.4em Verdana,sans-serif;
height: 60px;
margin: 0 auto;
width: 630px;
}
.top a {
color: #FFF;
display: block;
line-height: 60px;
text-decoration: none;
width: 100%;
}
.top span {padding-left: 24px;}
.top a:hover {
background: url(img/top2.gif);
color: #FFF;
}

/* header */
.header {
background: url(img/header.jpg) no-repeat;
height: 180px;
margin: 0 auto;
width: 630px;
}

/* item */
.item {clear: both;}
.item .date {
background: url(img/titledate.gif) no-repeat;
color: #FDD;
float: left;
height: 40px;
text-align: center;
width: 36px;
}
.item .date div {padding-top: 4px;}
.item .date span {font: normal 1.6em serif;}
.item .content {
float: left;
width: 420px;
}
.item h1 {
background: #1f8ed3 url(img/title.gif);
color: #FFF;
line-height: 40px;
padding-left: 16px;
}
.item .body {padding: 12px 18px;}

/* main */
.main {float: left;}

/* navigation */
.navigation {
float: left;
margin-left: 1px;
width: 208px;
}
.navigation h1 {
background: #dfdfdf url(img/bgnavigation2.gif);
color: #FFF;
font-size: 1.3em;
line-height: 40px;
padding-left: 12px;
}
.navigation ul {margin: 0; padding: 0;}
.navigation li {
border-bottom: 1px solid #D5E8AD;
list-style: none;
}
.navigation li a {
background: url(img/bgnavigation.gif) repeat-x;
color: #553;
display: block;
padding: 8px 4px 8px 12px;
text-decoration: none;

}

.navigation li a:hover {
background: url(img/hover.gif) repeat-x;
color: #553;
}

/* footer */
.footer {
background: url(img/bgfooter.gif) repeat-x;
color: #FFF;
font-size: 1.1em;
line-height: 40px;
margin: 0 auto;
text-align: center;
width: 626px;
}
.footer a {color: #FFF;}
.footer a:hover {color: #FAFCB0;}

**DJ-Zep** · 10-06-2006, 02:12 PM

Very strange. I'm going to guess that it is because of a IE security setting. Try adding the CSS directly into the page in between the head tags.

HTML Code:

<head>
<style type="text/css">
.navigation li a {
background: url(img/bgnavigation.gif) repeat-x;
color: #553;
display: block;
padding: 8px 4px 8px 12px;
text-decoration: none;

}

.navigation li a:hover {
background: url(img/hover.gif) repeat-x;
color: #553;
}

.top {
background: url(img/top.gif);
font: normal 2.4em Verdana,sans-serif;
height: 60px;
margin: 0 auto;
width: 630px;
}
.top a {
color: #FFF;
display: block;
line-height: 60px;
text-decoration: none;
width: 100%;
}
.top span {padding-left: 24px;}
.top a:hover {
background: url(img/top2.gif);
color: #FFF;
}
</style>
</head>

The reason I'm guessing it is a security setting is because it needs to ask the external style sheet what to do.

dorts · 10-07-2006, 12:02 AM

Thanks DJ-Zep. But it doesn't work. IE is still redownloading the image.

I wondered how Microsoft got their Vista website to hover without redownloading.
http://www.microsoft.com/windowsvista/

**DJ-Zep** · 10-07-2006, 12:55 PM

Aww man, why didn't I think of this. Sorry dorts, totally forgot about preloading images.

I used javascript.internet.com to create a better rollover script for you. This will preload the images into the viewers cache so that it won't have to reload the picture on every mouseover.

Insert this between the head tags:

HTML Code:

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

image1 = new Image();
image1.src = "http://usera.imagecave.com/keneth/top2.gif";

// End -->
</script>

Use this where you want your banner to be displayed:

HTML Code:

<a href="http://dorts.cabspace.com/index.html" onmouseover="image1.src='http://usera.imagecave.com/keneth/top2.gif';"
onmouseout="image1.src='http://usera.imagecave.com/keneth/top.gif';">
<img name="image1" src="http://usera.imagecave.com/keneth/top.gif" border=0></a>

dorts · 10-07-2006, 08:50 PM

Thanks DJ-Zep.

I am not sure how to place the banner part as well as adapting it for my navigation. If you visit the page again, you can see that it loads faster, because I uploaded the images to a faster host. But when you rollover them quickly, you can see that it seems to be loading from the image host.

Will this work?

Code:

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images) 
{
   img1 = new Image();
   img2 = new Image();
   img3 = new Image();
   img4 = new Image();
   img5 = new Image();
   img1.src = "http://usera.imagecave.com/keneth/bgnavigation.gif";
   img2.src = "http://usera.imagecave.com/keneth/hover.gif"
   img3.src = "http://usera.imagecave.com/keneth/top.gif";
   img4.src = "http://usera.imagecave.com/keneth/top2.gif";
   img5.src = "http://usera.imagecave.com/keneth/header.jpg";
}
</SCRIPT>

**DJ-Zep** · 10-07-2006, 09:42 PM

That just defines all of your variables. You need to take the variable definitions and define them. In the code I gave you, onmouseover and onmouseout apply the script.

dorts · 10-07-2006, 09:45 PM

I get it.

But how do I apply that script? My loading of the banner and the navigation are in the CSS part.

**DJ-Zep** · 10-08-2006, 07:46 AM

Remove the hover information in the CSS code.

Now, use this as your image code:

HTML Code:

<img src="http://usera.imagecave.com/keneth/top.gif" name="image1" onmouseover="image1.src='http://usera.imagecave.com/keneth/top2.gif';" onmouseout="image1.src='http://usera.imagecave.com/keneth/top.gif';" alt="">

Just change the name, image numbers, and image srcs for a different picture.

dorts · 10-08-2006, 08:05 AM

Thanks a lot!

Now I have a new question. So I'll post it in a new thread.

IanS · 10-11-2006, 05:01 PM

I have same problem with IE always pulling the rollover images from the server.
Despite various preload scripts it always downloads them.
However - it works fine off-line - the images ARE cached - and the switch is instant.

Its not just my site. Other sites I visit do the same thing.

I've tried various settings in IE, and been on many, many forums on this subject for about a year, including JavaScript specialist sites - no answer. I gave up!

Its not a problem for most people, fast connections make it irrelevant, but those who are on dial-up - as I often am, moving about so much - its just a slow, unsightly process. And not what its SUPPOSED to be doing!
Interesting to see someone else getting the same problem.
IanS

dorts · 10-11-2006, 06:05 PM

Thanks for your comments IanS. I got very slow rollovers is also because of the image host. After changing host, the rollovers was instant.

IanS · 05-19-2007, 10:59 AM

I'm coming back to this topic because this is a continuing problem that isn't solved by any of the above suggestions.

Now I'm running my own site, I can see from the stats that some people's browsers are always pulling the image files from the server, while others are using the preload script properly.

One person left the page running on their screen for a few hours - the stats showed over three hours of continuous image loading from the server, over and over and over again as the rotator script worked...

I can only guess there must be some setting in the browser (it seems only to be MSIE) that causes this, but I just can't figure it out. This problem has been persistent for years now and I still can't get an answer for, even from seasoned JS pros.

Its not the script - the problem only occurs sometimes - its a browser thing.
Thing is, my browser does it too! And I don't know why.

Posting this again just in case someone out there has a clue!

cheers,
Ian

10-06-2006, 04:57 AM	#1 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Rollovers in IE. Hi all, I created a new little website. But now the problem is that IE doesn't cache my rollovers. So it always loads from the source of the picture. One is at the top, while the rest are all the navigations on the right. Not completed yet but, I will just post a link. http://dorts.cabspace.com/ I tried many methods, from CSS to javascript. Nothing works. I thought it may be because of my CSS file. Here is the CSS file. /############################################################# Name: Bitter Sweet Date: 2006-10-02 Description: Lime flavoured template with two columns. Author: Viktor Persson URL: http://templates.arcsin.se Feel free to use and modify but please provide credits. #############################################################/ /* standard elements / { margin: 0; padding: 0; } a {color: #682;} a:hover {color: #9A6;} body { background: #5F8000 url(img/bg6.gif) repeat-y center top; color: #333; font: normal 62.5% "Lucida Sans Unicode",sans-serif; } input { color: #555; font: normal 1.1em "Lucida Sans Unicode",sans-serif; } p,cite,code,ul { font-size: 1.2em; padding-bottom: 1.2em; } ul {margin-left: 1.2em;} li {list-style-image: url(img/li.gif);} h1 {font-size: 1.4em;} blockquote { background: #FFF; border-bottom: 1px solid #EEE; border-top: 1px solid #EEE; color: #333; display: block; font-size: 0.9em; margin-bottom: 1.2em; padding: 6px 12px; } blockquote p {padding: 3px 0;} h1,h2,h3 {color: #654;} /* misc / .clearer {clear: both;} / structure / .container { background: url(img/bgcontainer.gif) repeat-y; margin: 0 auto; width: 702px; } / top / .top { background: url(img/top.gif); font: normal 2.4em Verdana,sans-serif; height: 60px; margin: 0 auto; width: 630px; } .top a { color: #FFF; display: block; line-height: 60px; text-decoration: none; width: 100%; } .top span {padding-left: 24px;} .top a:hover { background: url(img/top2.gif); color: #FFF; } / header / .header { background: url(img/header.jpg) no-repeat; height: 180px; margin: 0 auto; width: 630px; } / item / .item {clear: both;} .item .date { background: url(img/titledate.gif) no-repeat; color: #FDD; float: left; height: 40px; text-align: center; width: 36px; } .item .date div {padding-top: 4px;} .item .date span {font: normal 1.6em serif;} .item .content { float: left; width: 420px; } .item h1 { background: #1f8ed3 url(img/title.gif); color: #FFF; line-height: 40px; padding-left: 16px; } .item .body {padding: 12px 18px;} / main / .main {float: left;} / navigation / .navigation { float: left; margin-left: 1px; width: 208px; } .navigation h1 { background: #dfdfdf url(img/bgnavigation2.gif); color: #FFF; font-size: 1.3em; line-height: 40px; padding-left: 12px; } .navigation ul {margin: 0; padding: 0;} .navigation li { border-bottom: 1px solid #D5E8AD; list-style: none; } .navigation li a { background: url(img/bgnavigation.gif) repeat-x; color: #553; display: block; padding: 8px 4px 8px 12px; text-decoration: none; } .navigation li a:hover { background: url(img/hover.gif) repeat-x; color: #553; } / footer / .footer { background: url(img/bgfooter.gif) repeat-x; color: #FFF; font-size: 1.1em; line-height: 40px; margin: 0 auto; text-align: center; width: 626px; } .footer a {color: #FFF;} .footer a:hover {color: #FAFCB0;} __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.*

10-06-2006, 02:12 PM	#2 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Very strange. I'm going to guess that it is because of a IE security setting. Try adding the CSS directly into the page in between the head tags. HTML Code: <head> <style type="text/css"> .navigation li a { background: url(img/bgnavigation.gif) repeat-x; color: #553; display: block; padding: 8px 4px 8px 12px; text-decoration: none; } .navigation li a:hover { background: url(img/hover.gif) repeat-x; color: #553; } .top { background: url(img/top.gif); font: normal 2.4em Verdana,sans-serif; height: 60px; margin: 0 auto; width: 630px; } .top a { color: #FFF; display: block; line-height: 60px; text-decoration: none; width: 100%; } .top span {padding-left: 24px;} .top a:hover { background: url(img/top2.gif); color: #FFF; } </style> </head> The reason I'm guessing it is a security setting is because it needs to ask the external style sheet what to do. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier." Last edited by DJ-Zep; 10-06-2006 at 02:13 PM.

10-07-2006, 12:02 AM	#3 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Thanks DJ-Zep. But it doesn't work. IE is still redownloading the image. I wondered how Microsoft got their Vista website to hover without redownloading. http://www.microsoft.com/windowsvista/ __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-07-2006, 12:55 PM	#4 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Aww man, why didn't I think of this. Sorry dorts, totally forgot about preloading images. I used javascript.internet.com to create a better rollover script for you. This will preload the images into the viewers cache so that it won't have to reload the picture on every mouseover. Insert this between the head tags: HTML Code: <SCRIPT LANGUAGE="JavaScript"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin image1 = new Image(); image1.src = "http://usera.imagecave.com/keneth/top2.gif"; // End --> </script> Use this where you want your banner to be displayed: HTML Code: <a href="http://dorts.cabspace.com/index.html" onmouseover="image1.src='http://usera.imagecave.com/keneth/top2.gif';" onmouseout="image1.src='http://usera.imagecave.com/keneth/top.gif';"> <img name="image1" src="http://usera.imagecave.com/keneth/top.gif" border=0></a> __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-07-2006, 08:50 PM	#5 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Thanks DJ-Zep. I am not sure how to place the banner part as well as adapting it for my navigation. If you visit the page again, you can see that it loads faster, because I uploaded the images to a faster host. But when you rollover them quickly, you can see that it seems to be loading from the image host. Will this work? Code: <SCRIPT LANGUAGE = JAVASCRIPT> if (document.images) { img1 = new Image(); img2 = new Image(); img3 = new Image(); img4 = new Image(); img5 = new Image(); img1.src = "http://usera.imagecave.com/keneth/bgnavigation.gif"; img2.src = "http://usera.imagecave.com/keneth/hover.gif" img3.src = "http://usera.imagecave.com/keneth/top.gif"; img4.src = "http://usera.imagecave.com/keneth/top2.gif"; img5.src = "http://usera.imagecave.com/keneth/header.jpg"; } </SCRIPT> __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-07-2006, 09:42 PM	#6 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	That just defines all of your variables. You need to take the variable definitions and define them. In the code I gave you, onmouseover and onmouseout apply the script. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-07-2006, 09:45 PM	#7 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	I get it. But how do I apply that script? My loading of the banner and the navigation are in the CSS part. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-08-2006, 07:46 AM	#8 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Remove the hover information in the CSS code. Now, use this as your image code: HTML Code: <img src="http://usera.imagecave.com/keneth/top.gif" name="image1" onmouseover="image1.src='http://usera.imagecave.com/keneth/top2.gif';" onmouseout="image1.src='http://usera.imagecave.com/keneth/top.gif';" alt=""> Just change the name, image numbers, and image srcs for a different picture. __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."

10-08-2006, 08:05 AM	#9 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Thanks a lot! Now I have a new question. So I'll post it in a new thread. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

10-11-2006, 05:01 PM	#10 (permalink)
IanS Registered User Join Date: Aug 2006 Location: UK, London Posts: 60 OS: all sorts	I have same problem with IE always pulling the rollover images from the server. Despite various preload scripts it always downloads them. However - it works fine off-line - the images ARE cached - and the switch is instant. Its not just my site. Other sites I visit do the same thing. I've tried various settings in IE, and been on many, many forums on this subject for about a year, including JavaScript specialist sites - no answer. I gave up! Its not a problem for most people, fast connections make it irrelevant, but those who are on dial-up - as I often am, moving about so much - its just a slow, unsightly process. And not what its SUPPOSED to be doing! Interesting to see someone else getting the same problem. IanS

10-11-2006, 06:05 PM	#11 (permalink)
dorts Analyst, Security Team Join Date: Mar 2006 Location: Singapore Posts: 1,599 OS: Windows XP SP2 My System	Thanks for your comments IanS. I got very slow rollovers is also because of the image host. After changing host, the rollovers was instant. __________________ If you think TSF have helped you, please kindly donate to TSF and help keep this site free to all.

05-19-2007, 10:59 AM	#12 (permalink)
IanS Registered User Join Date: Aug 2006 Location: UK, London Posts: 60 OS: all sorts	Re: Rollovers in IE. I'm coming back to this topic because this is a continuing problem that isn't solved by any of the above suggestions. Now I'm running my own site, I can see from the stats that some people's browsers are always pulling the image files from the server, while others are using the preload script properly. One person left the page running on their screen for a few hours - the stats showed over three hours of continuous image loading from the server, over and over and over again as the rotator script worked... I can only guess there must be some setting in the browser (it seems only to be MSIE) that causes this, but I just can't figure it out. This problem has been persistent for years now and I still can't get an answer for, even from seasoned JS pros. Its not the script - the problem only occurs sometimes - its a browser thing. Thing is, my browser does it too! And I don't know why. Posting this again just in case someone out there has a clue! cheers, Ian