Preloading images is a technique often used in Rollover Effects or other image scripts which work more quickly when the images for them are loaded as soon as possible.
What javascript does is allow you to start loading the images in the HEAD section of your page, which means that with this technique (unless the images are large or great in number) your viewers will have the necessary images in their browser's cache before the script starts to run. This way, an image rollover will be less likely to make the viewers wait for the browser to download the second image, because it is in their browser's cache.
To get this going, you need to have a small section of script in the HEAD section of your page. Here is a sample of a script that preloads a single image:
<SCRIPT language="JavaScript"> <!-- pic1= new Image(100,25); pic1.src="http://someplace.com/image1.gif"; //--> </SCRIPT> The first command defines a new image object, giving it a width of 100 and a height of 25. You would replace these with the width and height of your image. The second defines the url or web address of the image. You would replace this with the url of your image. Not too bad now, is it?
However, there is a chance your viewer will come through with an older browser which doesn't support the image object. So, to be on the safe side you may wish to implement a form ofBrowser Detection or Object Detection to keep from giving the older browsers a javascript error. I will use the shorter one here, which is object detection. For more on object detection, see the tutorial on what it can do.
Here, we want to know if the image object exists, which in javascript is "document.images". So, we just need to check for it with an if condition, and then run the preloading code:
<SCRIPT language="JavaScript"> <!-- if (document.images) { pic1= new Image(100,25); pic1.src="http://someplace.com/image1.gif"; } //--> </SCRIPT>There, now you have the code to preload (what a rhyme!). If you want to do this for multiple images, just be sure to assign them a different name-- such as pic2, pic3, and so on. Adjust your width, height, and urls accordingly. You will have two lines for each image. For example, to preload three images, you would use a code like this:
<SCRIPT language="JavaScript"> <!-- if (document.images) { pic1= new Image(100,25); pic1.src="http://someplace.com/image1.gif"; pic2= new Image(240,55); pic2.src="http://someplace.com/image2.gif"; pic3= new Image(88,31); pic3.src="http://someplace.com/image3.gif"; } //--> </SCRIPT> In the next section you will see an example of how preloading works with the image rollover script. The first section will use browser detection, while the following sections will use object detection like we did here.
Using a javascript to change an image when someone moves their mouse over it has become quite popular. I've heard it called many things: "hover buttons", "rollover", and "image highlighter" are a few. What happens is that we use two images, a link, and a javascript to make a clickable image link that is "highlighted" when a mouse passes over it.
To begin, you will need to make yourself two images of the same size, making whatever changes you would like to the second one. Below is an example where I chose to make an image with blue text and one in red text. The red-text image is what I want people to see when they move their mouse over the blue-text image.
OK, that is the easy part. Now we have to have a script that will do all the work for us. I'm going to go ahead and put the whole thing below, and explain the script in parts afterward. I got this script from a free script page, did some formatting for readability, changed some variable names, and added a check for the image object. Here is the code for the HEAD section of your page:
<HEAD>
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1on= new Image(100,25);
pic1on.src="shoes2.gif";
pic1off= new Image(100,25);
pic1off.src="shoes1.gif";
}
function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName "on.src");
document[imgName].src= imgOn;
}
}
function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName "off.src");
document[imgName].src= imgOff;
}
}
//-->
</SCRIPT>
</HEAD>
Now, go down into your BODY section and find out where you would like your image to go. You will then put in the following linked image code. You should place everything on one line, I have it this way only for readability.
<A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="../images/shoes1.gif" name="pic1" width="100" height="25" border="0"></A>
Notice how we call our function "lightup" with the parameter 'pic1' on the Mouseover. We then call the function "turnoff" with the parameter 'pic1' on the Mouseout. The action is all done in our link tag. You can link to any url you wish here, and that will be where the user goes if they click the image. In the image tag, use your first (default) image as the image source. Also, be sure you use the name="pic1" attribute, as well as defining your height and width. This will make sure the script knows the name, height, and width of your image and will run smoothly. The border attribute is up to you. I chose zero for mine because I wanted the image to look like text.
Above article is taken from this site
Always search @ Fukat ka Gyan for better answers
