when you do something like that, you will want to pre-load the images. If you don't then the user will have to wait to view the mouseover image and the effect will be lost. To do this, you pre-load the images into the browsers cache before the page is even loaded, this will make sure they appear on time. For example:
In the head section of the page we have something that looks like this:
Code:
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var numberOfImages = new Number(12); // this is the number of images you want to
// preload
var images = new Array(numberOfImages); // create an array, for easier access to
//the variable names
images[0] = new Image();
images[0].src = "imagepath.gif";
images[1] = new Image();
images[1].src = "imagePath2.gif";
// repeat for as many images as you have (doing it this way is simple, but can get tedious)
// STOP HIDING -->
</script>
That goes in the head section !very important!
The head section of the page is loaded first, because this is where a lot of the information about the page is processed(First the browser looks at what the page is, then it looks at how to display it.)
Next, you'll add the mouseOver on the url for example:
Code:
<!-- NOTE, The following code doesn't need to go within a <script> tag //-->
<a href="#" onmouseover="document.imgOne.src=images[0].src;" onmouseout="document.imgOn.src=images[1].src;" title="My Link"><img name="imgOne" id="imgOne" src="imagePath.gif" border="0" /></a>
Thats pretty much all there is to it. You can add different things to it by using the onmouseout, or other events.
Ok, quick explanation of the <a> tag with the javascript.
Whats going on, is you're telling the browser that when the user mouses over the image, onmouseover, change our image object, which is referred to by name, not id in this case, i gave the image a name of imgOne so we say document.imgOne.src= and we set that = to some value. In this case, it's the first image we pre-loaded into our array. If I didn't make anything clear, just let me know. Hope that helps.
in css, you can't really change the image per-se. However you can change the appearance of the link.
in your css you could do this:
Code:
<style type="text/css">
A
{
color: #6767ef;
text-decoration: none;
background-image: url('urlOfYourImage.gif');
background-position: center;
background-repeat: no-repeat;
}
A:HOVER
{
color: #ef6767;
text-decoration: none;
background-image: url('urlOfSecondImage.gif');
background-position: center;
background-repeat: no-repeat;
}
</style>
Which, changes the color and background image of the link, creating a "mouseover" type effect. Some user's disable javascript as a security feature, so it's up to you how best to present the page.
