Simple Javascript for image mouseovers

Date: 17th January 2008 at 12:54 am | Filed under: development, scripts | Author: Sam Burdge

This is a simple javascript for creating a mouseover effect on image links, also known as an image replacement script. It works in two stages. In this example "image 1" is the link image and "image 2" is the mouseover image.

Stage 1

Add this javascript to the head of your page:

function SwapImage1() {
document.image1.src="/images/image2.jpg"
}
 
function SwapImage1Back() {
document.image1.src="/img/image1.jpg"
}

Stage 2

Add the following onmouseover and onmouseout properties to your image:

<img src="/images/image1.jpg"
onmouseout="SwapImage1Back()" onmouseover="SwapImage1()" name="image1" />

Leave a Comment

« Previous PostNext Post »