Forum Moderators: open
I have specified table background images in css, for ex: (here as an inline style)
<td style="background-image:url(image.gif);">
but even if I preload the image:
if (document.images) {
myimage = new Image();
myimage.src = 'image.gif'; }
...I am not sure how to apply this to the style. These images are used for a rollover, which works by specifying a new style with onMouseover, onMouseout. However, many users have 'every visit to the page' checked in IE, and it makes the page very slow, as the mouseover images are reloaded on every mouseover/mouseout. Any help would be much appreciated.
Do you want the rollover images to load after the rest of the page to speed up download?
Sorry it wasn't clear. No, I want the images to load only once. Here is an example of the problem:
<sorry, no personal URLs>
If you set your IE to 'every visit to the page' the left navigation rollovers don't work well, because although the images are preloaded, I don't know how to specify the preloaded images in my css. do you know how to do that?
thanks for your help.
[edited by: tedster at 10:17 pm (utc) on April 16, 2003]
I'm sure someone here will help you.
This is supposed to switch layer visibility.
-------------------------
<HTML>
<HEAD>
<TITLE>DHTML Mouseover</TITLE>
<STYLE TYPE="text/css">
.off {
position: absolute;
left: 5;
top: 5;
z-index: 1;
visibility: visible;
}
.on {
position: absolute;
left: 5;
top: 5;
z-index: 2;
visibility: hidden;
}
</STYLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<!--These are the static OFF images-->
<DIV CLASS="off">
<A HREF = "#" onMouseOver = "showIt(img1)">
<IMG SRC="stuff/dhtml_off.gif" BORDER=0>
</A><BR></DIV>
<!--These are the hidden ON images-->
<DIV CLASS="on" ID = "img1">
<A HREF = "#" onMouseOut = "hideIt(img1)">
<IMG SRC="stuff/dhtml_on.gif" BORDER=0>
</A><BR></DIV>
<SCRIPT LANGUAGE = "JavaScript">
<!--
/* Corrects Browser Differences */
if (document.layers){
var img1 = document.img1;
var HIDDEN = 'hide';
var VISIBLE = 'show';
} else if (document.all){
var img1 = document.all.img1.style;
var HIDDEN = 'hidden';
var VISIBLE = 'visible';
}
/* Shows an object */
function showIt(object) {
object.visibility = VISIBLE;
}
/* Hides an object */
function hideIt(object) {
object.visibility = HIDDEN;
}
//stop hiding -->
</SCRIPT>
</BODY>
</HTML>
<td id="whatever">some text</td>
i'm sorry to not get it, but can you fill in any of the gaps?
thanks for the help.
document.getElementById works in newer browsers
For IE4 you need to use document.all['whatever']
For NN4 you need to use document.layers('whatever')
Also, this requires that your <td> has a unique ID, as in the example.
<html>
<head>
<script type="text/javascript">
<!--
if (document.images) {
myimage = new Image();
document.getElementById('whatever').style.background="graphics/button_on.gif"; }
//-->
</script>
</head>
<body>
<table>
<tr>
<td id="whatever">some text</td>
</tr>
</table>
</body>
</html>
thanks again.
I've always used the following approach to preloading images, and it should work in this case, too:
if (document.images) {
myImage1 = new Image();
myImage1.src = "pics/someImage.gif";
myImage2 = new Image();
myImage2.src = "pics/someOtherImage.gif";
} // endif (document.images)
Just add a variable for each image you need to pre-load. From there, when the browser needs that image, its in the cache. Good luck!
the code looks something like this:
<td class="ImageOff" onMouseover="this.className='ImageOn'">
where the class is:
.ImageOn {
BACKGROUND-Image: url(myimage.src);
}
but this doesn't work. My understanding (which may be wrong) is that if I don't refer to the images by the variable names, I am not using the preloaded image.
I hope this is more clear. Thanks again for your help.
The browser should track the presence of an image in its cache regardless of how its called on a page.
I agree, and for years that was always my experience. It certainly is the way user agents are supposed to behave.
However, I have seen some very odd problems with IE in recent times, where it seems to forget that a rollover image is preloaded and in the cache, so it needlessly goes back to the server. And I've never seen a workaround that fixed the problem for those particular builds of IE. Maybe referring to the image by its assigned variable name will work in those buggy IE version.
I can't test right now -- my current IE has other problems, but not that one.
Thanks everyone for your help.
Captain H.
