PDA

Click to See Complete Forum and Search --> : image preloading

dsdsdsdsd
08-07-2004, 10:39 AM
hello;


<script language="JavaScript" type="text/javascript">
image1 = new Image();
image1.src = "../server_graphics/bullet.gif";
image2 = new Image();
image2.src = "../server_graphics/to_checkout_button.gif";

function f2(image2)
{ document.getElementById("id").style.background = "url(" + image2.src + ") #ff0000";
};
function f1(image1)
{ document.getElementById("id").style.background = "url(" + image1.src + ") #00ff00";
};
</script>

<body>
<table>
<tr>
<td id="id"
onmouseover="f2(image2);"
onmouseout ="f1(image1);"
style=" border:#00ffff solid;
height:200;
width:200;
background:url(../server_graphics/bullet.gif);
vertical-align:middle;
text-align:center;">
<a href="http://www.yahoo.com">
blah
</a>
</td>
</tr>
</table>
</body>



that is the textbook solution but yet it does not work; you should never be able to see any red or green; if you do then that is an indication that the browser is in the process of fetching an image; which it dhould not have to do because the images are supposed to have been preloaded;

my problem (http://www.toddanddotty.com/mock_public_html/server_content/test_buttons_images_text.htm)

HOWEVER if you click the 'blah' link (to yahoo.com) in the middle of the <td> and then hit the browser's 'back' button the red-green problem will no longer exist because now the images are truly cached;

any thoughts on a legitimate pre-loading/caching method;

thanks
dsdsdsdsd
steelersfan88
08-07-2004, 11:34 AM
If you are trying to do a rollover scheme as such, you need only 1 picture.

... I could write the css, but I'll try to scramble it up somewhere here. The real CSS way to do it is more of moving one picture, rather than swapping two or more.
dsdsdsdsd
08-07-2004, 11:40 AM
hello steelersfan88;

that is a good point - I could have two divs inside the cell, each with a picture, and swap the z-index of each div;

I did not think about that; it does seem to be a bit excessive though;

tonight I will give it a shot; now I have a birthday party to go to;

thanks
dsdsdsdsd
a.k.a. raidersfan21
steelersfan88
08-07-2004, 11:44 AM
stupid raiders fan ... if you told me, I wouldn't be helping!

Actually, the way I was talking about involved putting both pictures together and switching the alignment between top and center. Although your algorithm will work just as well.

Good luck to you, and your Raiders.
dsdsdsdsd
08-07-2004, 12:06 PM
hello steelersfan88;

that is a good point - I could have two divs inside the cell, each with a picture, and swap the z-index of each div;

I did not think about that; it does seem to be a bit excessive though;

tonight I will give it a shot; now I have a birthday party to go to;

thanks
dsdsdsdsd
a.k.a. raidersfan21
dsdsdsdsd
08-07-2004, 12:14 PM
steelersfan88 - problem sort of fixed (http://www.toddanddotty.com/mock_public_html/server_content/test_buttons_images_text.htm)


<script language="JavaScript" type="text/javascript">
function f2()
{ document.getElementById("id").style.background = "#ff0000";
document.getElementById("div1").style.zIndex = 3;
document.getElementById("div2").style.zIndex = 4;
};
function f1()
{ document.getElementById("id").style.background = "#00ff00";
document.getElementById("div1").style.zIndex = 4;
document.getElementById("div2").style.zIndex = 3;
};
</script>

<body>
<table>
<tr >
<td id="id"
onmouseover="f2();"
onmouseout ="f1();"
style=" position:absolute;
border:#00ffff solid;
left:200;width:200;
top:200;height:200;
vertical-align:middle;
text-align:center;">
<div id="div1"
style="z-index:4;
position:absolute;
top:0;left:0;
width:200;height:200;">
<img src="../server_graphics/bullet.gif"
style="position:static;
width:100%;height:100%;"/>
</div>
<div id="div2"
style="z-index:3;
position:absolute;
top:0;left:0;
width:200;height:200;">
<img src="../server_graphics/to_checkout_button.gif"
style="position:static;
width:100%;height:100%;"/>
</div>
<a style="z-index:10;" href="http://www.yahoo.com">
blah
</a>
</td>
</tr>
</table>

</body>
</html>


however now i have to assign a z-index to the <a href ...> which requires a position WHICH kills my very nice vertical-align property;

thanks;
dsdsdsdsd
steelersfan88
08-07-2004, 12:54 PM
I've attached the example I was talking about. This doesn't require z-indeces, but it will allow the same a preloaded image.

... You'll need to leave the rollover though using a tags, and it can easily be modified how you want. The reason ... MSIE will only like the :hover pseudo protocol on the anchor tag. You can, however, change className onmouseover and onmouseout to the same effect, more code, but then you don't need the anchor ... to come soon.

(that code will be using same pictures, I will post, not attach it).
attached code was previously posted by lavalamp, and is slightly edited to fit your purpose.

Dr. Script
steelersfan88
08-07-2004, 01:01 PM
Mozilla only:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<title>CSS Image Rollover</title>

<style type="text/css">

ul {
list-style-type:none;
margin:0;
padding:0;
}

ul li {
margin:10px;
padding:0;
}

a {
color:#ff0;
}

/* Start of setting backgrounds. */

div#greenredwhite {
display:block;
background-image:url(rollover.png);
width:100px;
height:100px;
}

div#blueblackwhite {
display:block;
background-image:url(rollover2.png);
width:100px;
height:100px;
}

/* End of setting backgrounds. */

/* Start of rollover code. */

div.roller, div.roller:link, div.roller:visited {
background-position:left top;
}

div.roller:focus, div.roller:hover {
background-position:left bottom;
}

/* End of rollover code. */

</style>
</head>

<body>
<ul>
<li><div id="greenredwhite" class="roller" title="Link 1">LINK</a></li>
<li><div id="blueblackwhite" class="roller" title="Link 2">LINK</a></li>
</ul>
</body>
</html>If you use a td instead, change all instances of div in the style css to td.

I could have sworn this was possible ... back soon ...
IncaWarrior
08-07-2004, 01:14 PM
don't use divs, use <a> with display block so it works in IE too:
/* Start of setting backgrounds. */

#grw a,#bbw a{
display:block;
background-image:url(rollover.png);
width:100px;
height:100px;
}

#bbw a{
background-image:url(rollover2.png);
}

/* End of setting backgrounds. */

/* Start of rollover code. */

#roller a:link, #roller a:visited {
background-position:left top;
}

#roller a:focus, #roller a:hover {
background-position:left bottom;
}

/* End of rollover code. */

</style>
</head>

<body>
<ul id="roller">
<li id="grw"><a href="link1.html">LINK</a></li>
<li id="bbw"><a href="link2.html">LINK</a></li>
</ul>
</body>
</html>
steelersfan88
08-07-2004, 01:16 PM
Can't find it. This is where the problem begins. If you need a rollover which can't be on a link (try your best to use the link though), then you are in the situation:

1) You need to use client-side Javascript to move the background picture, and therefore 13 or so percent of INet users will not get the rollover effect.

2) You can use the non-IE code and prevent 90 or so percent of INet users not have the code work.

3) Use the link, and make 99 percent of INet users have it work, with the remaining 1 percent being old, old browsers, non-image browsers, or users not using a 'puter.

Your best options are 3, then 1, then 2. Dr. Script

... btw, still looking for the code, I can't remember where I saw it before ...
steelersfan88
08-07-2004, 01:18 PM
Originally posted by IncaWarrior
don't use divs, use <a> with display block so it works in IE too That's what I preferred, as you see by my next post, although the goal was to use the rollover on a table element, which would be difficult to get the same effect.

Obviously, the CSS rollover with the link is best, then using clientside scripting. Despite flaws, if it doesn't work in IE, you are really limiting your accessibility, more than the opposite way around.
IncaWarrior
08-07-2004, 01:24 PM
ah you posted twice while i was editing my post
Mr J
08-07-2004, 01:54 PM
Not sure if this will help

<style>
a {background-image:url(butover.gif);width:88px;height:31px}
a:hover{background-position:0 31px}
</style>

Create your image so that is contains both the default and hover then use css to move it.

Example

Image width = 88
Image height = 62

Half the image height is the default and the other half the rollover
steelersfan88
08-07-2004, 01:56 PM
That is what I attached, and what IncaWarrior then posted (we used left top, left bottom, rather than 0 and 31 pixels though).

Dr. Script
dsdsdsdsd
08-08-2004, 03:20 PM
steelersfan88, IncaWarrior, Mr J, thanks for responding;

steelersfan88, I missed the point the first time - now I have created the two separate classes; I have left out the pseudo-class details for my own clarity's sake;


<style type="text/css">
.normal {
background-image:url(../server_graphics/button_normal_1.jpg) ;
background-position:center center ;
background-repeat:no-repeat;
}
.over {
background-image:url(../server_graphics/button_down_1.jpg) ;
background-position:center center ;
background-repeat:no-repeat;
}
</style>
<body>
<table>
<tr>
<td id="id"
onmouseover="this.className = 'over'"
onmouseout ="this.className = 'normal'"
class="normal"
style=" position:static;
width:200;
height:200;
border:#00ffff solid;
vertical-align:middle;
text-align:center;">
<a href="http://www.yahoo.com">
blah
</a>
</td>
</tr>
</table>
</body>

unfortunately still a gap between images (http://www.toddanddotty.com/mock_public_html/server_content/test_buttons_images_text.htm) - am I still missing the point?

Mr J - talk about a work around; combining all button state images into one image and positioning the one image where necessary when necessary - nice; and then combine that with a clipping mask if the need be;

dsdsdsdsd