Roll over image using Javascript
Creating a roll over image with javascript is not as efficient as a roll over image with CSS, but it is a lot easier to implement. There is more code involved in doing a roll over image with javascript, but you can copy and paste it rather then having to create your image and style your CSS. The script code that you will need in your head is (If you are copying and pasting this code and it does not work please re-write the quotations):
intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = “images/roadpic.jpg”
intImage = 2
return(false);
case 2:
IMG1.src = “images/propel1.jpg”
intImage = 1
return(false);
}
}
</script>
Where I have “images/roadpic” and “images/propel1″ is where you will want to put the path for your images. The first image, roadpic, will be the image that is displayed normally on the page. The second image, propel1, is the image that will appear when the mouse hovers over the image. The body code to create the roll over image would look like this:
onMouseOver=”swapImage();”
onMouseOut=”swapImage();” alt=”imageswap” class=”test” width=”890″ height=”301″>
Now you have a working Javascript roll over image. Remember when using this that it may take your visitors a while to see the roll over effect because the image that is being swapped is not pre-loaded onto the page. This means that when the mouse is hovered over the image, it asks the server for the new image it is supposed to display and then it displays it. If you want instant roll overs you would need to make a roll over image using CSS or put more javascript into your page to load all the pictures the user will need when he/she loads the page. If your visitors do not have Javascript enabled for their browser then they will not be able to see this roll over image.
Leave a Reply