Log in

View Full Version : beginner in css need your help for preload image thanks


arian6
12-20-2008, 02:37 PM
hello noble assembly i will ask your expert knowledg about using css preload image in absolute position . Somebody can help me about my page exemple http://boudhatour.wapath.com/fr/kora/step2.b i have added in this page two preload image script first in javascript and second using css code . But i am beginner and i start learn about css only few days before . I try to learn css using different tutorial but there dont have always the answare of my question and some times its really heart to find it . Honestly i will tell you i am really confused about that css preload image using absolute position i dont know how to do in my document i try by my feeling but its not sure and i like know how to do please somebody can give me clear advise for i could a bit understand first wich aera in my document xhtml i could add the
div#preload-images{
position: absolue ;
overflow: hidden ;
left: -9999px ;
top: -9999px ;
height: 1px ;
width: 1px ;
}
if i understand a bit its a class declaration then need add it under the body tag ?but i am not sure about that please can you tell me if my suggestion its right or wrong ?? Below i have make an page with that css code please help me
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pas2</title>
<style type="text/css"><!--body{cursor:crosshair}-->
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
</style>

<!--code javascript preload image-->
<code>
<SCRIPT LANGUAGE="JavaScript"><
image1 = new Image(200,150);
image1.src = "http://boudhatour.wapath.com/files/kora/Step3.jpg";

image2 = new Image(114,111);
image2.src = "http://boudhatour.wapath.com/files/kora/Map01.jpg";

image3 = new Image(93,3);
image3.src = "http://boudhatour.wapath.com/files/kora/linija3.gif";
>
</script>
</code>
</head>
<body style="background-color: #800000">
<!--css code for preload image-->
<div#preload-image{
overflow:hidden;}
left:-9999px ;
top:-9999px ;
height: 1px ;
width: 1px ;
>

<img src="http://boudhatour.wapath.com/files/kora/Step2.jpg" alt="" />
<br />
<b>
<i style="color: #FFFF00">faite un pas de plus:</i>
<br />
<br />
<a href="http://boudhatour.wapath.com/fr/kora/step3.b" style="color: #FF0000">next pas3&gt;&gt;&gt;</a>
<br />
<a href="http://boudhatour.wapath.com/fr/home.b" style="color: #FFFF00">&lt;&lt;&lt;retour a la home page</a>
<br />
<img src="http://boudhatour.wapath.com/files/linija3.gif" alt="" />
<br />
<img src="http://boudhatour.wapath.com/files/kora/Map01.jpg" alt="" />
<br />
<img src="http://boudhatour.wapath.com/files/linija3.gif" alt="" />
<br />
<div id="preload-images">
<img src="http://boudhatour.wapath.com/files/kora/Step3.jpg" width="1" height="1" alt="Step4" />

<img src="http://boudhatour.wapath.com/files/kora/Map01.jpg" width="1" height="1" alt="Map01" />

<img src="http://boudhatour.wapath.com/files/kora/linija3.gif" width="1" height="1" alt="linija3" />

</body>
</html>
thanks a lot i need your advise
bluewalrus
12-20-2008, 03:33 PM
Ok first div#preload-images the # means div to the browser so take out the div it should just be #preload-images { and don't forget to close the div at the end of the images </div> in the html.
Also with this code the image is not going to display it is set to be one image high by one image wide above the page 9999 pixels and to the left of the page 9999 pixels as well as being hidden there.
Is that what you want?
jscheuer1
12-20-2008, 04:41 PM
Actually, this:


div#preload-images{
position: absolue ;
overflow: hidden ;
left: -9999px ;
top: -9999px ;
height: 1px ;
width: 1px ;
}

belongs in your stylesheet:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pas2</title>
<style type="text/css"><!--body{cursor:crosshair}-->
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
</style>

Which is totally invalid, but that's probably just owing to a mistake in how you put it into the code, the above should be like (the highlighted part is the now valid stylesheet), that other stuff needs to come before it and not be duplicated:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pas2</title>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<style type="text/css"><!--
body{cursor:crosshair}
-->
</style>

Now we can add the preload division's css codes to the valid stylesheet:


<style type="text/css"><!--
body{cursor:crosshair}
div#preload-images {
position: absolue;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
-->
</style>

Once you have that, you may place a division right after the opening <body> tag:


<body style="background-color: #800000">
<div id="preload-images">
<img src="http://boudhatour.wapath.com/files/kora/Step3.jpg" width="1" height="1" alt="Step4" />
<img src="http://boudhatour.wapath.com/files/kora/Map01.jpg" width="1" height="1" alt="Map01" />
<img src="http://boudhatour.wapath.com/files/kora/linija3.gif" width="1" height="1" alt="linija3" />
</div>

Don't forget to close the division as shown. Get rid of (from the beginning of the body):


<!--css code for preload image-->
<div#preload-image{
overflow:hidden;}
left:-9999px ;
top:-9999px ;
height: 1px ;
width: 1px ;
>

and (from the end of the body):


<div id="preload-images">
<img src="http://boudhatour.wapath.com/files/kora/Step3.jpg" width="1" height="1" alt="Step4" />

<img src="http://boudhatour.wapath.com/files/kora/Map01.jpg" width="1" height="1" alt="Map01" />

<img src="http://boudhatour.wapath.com/files/kora/linija3.gif" width="1" height="1" alt="linija3" />


Once you are preloading in this fashion, you no longer need (which is also invalid by the way):


<!--code javascript preload image-->
<code>
<SCRIPT LANGUAGE="JavaScript"><
image1 = new Image(200,150);
image1.src = "http://boudhatour.wapath.com/files/kora/Step3.jpg";

image2 = new Image(114,111);
image2.src = "http://boudhatour.wapath.com/files/kora/Map01.jpg";

image3 = new Image(93,3);
image3.src = "http://boudhatour.wapath.com/files/kora/linija3.gif";
>
</script>
</code>

You may now place all images you want preloaded in the preload-images division.

A note about preloading, it takes as long as loading does, so if these images appear on the page when it loads anyway (are not rollovers or other dynamic content), there is no reason to preload them. Preloading works best with small images. All images for the web, preloaded or not, should be optimized for the smallest possible byte size that still yields acceptable resolution.
arian6
12-21-2008, 04:08 AM
hello sir jscheuer1 i am verry glade of your clear explain about that preloading image using css with absolute position . I am so happy to got that clear answare i will say billion thanks and now i will applyed that advice in my 192 page of my website thanks you verry much (merci beaucoup mon ami) friend jscheuer1