Mouse Over

Isn't it time you
updated your site?

Some Advanced JavaScript
MOUSEOVERS

Open the sample HTML document and view the source code. Copy and paste this bit of javascript into the <HEAD> of the document:

(Note: To use this code with your own images, simply change the image names)

<SCRIPT LANGUAGE = "javascript">
<!--

if (document.images) {
  image1on = new Image();
  image1on.src = "button1_on.jpg";

  image1off = new Image();
  image1off.src = "button1_off.jpg";

  otherImageDefault = new Image();
  otherImageDefault.src = "default.gif";

  otherImage1 = new Image();
  otherImage1.src = "third_image01.gif";

}

function changeImages() {
  if (document.images) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
      document[changeImages.arguments[i]].src = eval
      (changeImages.arguments[i+1] + ".src");
    }
  }
}

// -->
</SCRIPT>

And in the <BODY> of the document, where you want the buttons to appear, copy and paste the following code. Again, the values you will need to change for use with your own images and pages.

<A HREF="page1.htm" onMouseOver="changeImages('image1',
'image1on', 'otherImage', 'otherImage1')"
onMouseOut="changeImages('image1', 'image1off', 'otherImage',
'otherImageDefault')"><img name="image1" src="button1_off.jpg"
alt="mouseover button" width="?" height="?" VSPACE="0" 
HSPACE="0" BORDER="0"></A>

In the <BODY> of the document where you want the third image to appear, copy and paste the following:

<IMG NAME="otherImage" SRC="default.gif" HEIGHT="?" WIDTH="?"
HSPACE="0" VSPACE="0" ALT="default image">

Save the changes to your page and open or refresh it in your browser. You should now see the images change when you pass your cursor over the button.

To add more buttons and third images, all you need to do is add a few lines to the code that goes in the <HEAD> of the page and then add another piece of <IMG> code in the <BODY>.

Here's the code for the <HEAD> again, this time with another button and third image added. The code for the new button and third image is in yellow so you can see what has been added:

<SCRIPT LANGUAGE = "javascript">
<!--

if (document.images) {
  image1on = new Image();
  image1on.src = "button1_on.jpg";

  image2on = new Image();
  image2on.src = "button2_on.jpg";

  image1off = new Image();
  image1off.src = "button1_off.jpg";

  image2off = new Image();
  image2off.src = "button2_off.jpg";  
  
  otherImageDefault = new Image();
  otherImageDefault.src = "default.gif";

  otherImage1 = new Image();
  otherImage1.src = "third_image01.gif";

  otherImage2 = new Image();
  otherImage2.src = "third_image02.gif";

}

function changeImages() {
  if (document.images) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
      document[changeImages.arguments[i]].src = eval
      (changeImages.arguments[i+1] + ".src");
    }
  }
}

// -->
</SCRIPT>

In the <BODY> of the document, add the following code for the second button:

<A HREF="page2.htm" onMouseOver="changeImages('image2',
'image2on', 'otherImage', 'otherImage2')"
onMouseOut="changeImages('image2', 'image2off', 'otherImage',
'otherImageDefault')"><img name="image2" src="button2_off.jpg"
alt="another mouseover button" width="?" height="?" VSPACE="0" 
HSPACE="0" BORDER="0"></A>

For complete mouseover tutorials I yield to Dax's site just click on the link below:

WEB DEVELOPMENT
AID

[ HTML Basics ] [ Headlines ] [ Paragraphs ] [ Links ] [ Free Links ] [ Mail-to ] [ Bold Italic ] [ Font Color ] [ Font Size ] [ Background Image ] [ Graphics ] [ Background Color ] [ Aligning Text ] [ Aligning Images ] [ HTML -Adding Audio ] [ HTML - Frames ] [ HTML Tables ] [ Meta Tags ] [ Forms ] [ Mouse Over ] [ Mega Search ] [ Browser Support ]

[ Webdesign ] [ Banners and Graphics ] [ Promotional Services ] [ HTML Tutorials ] [ Consulting ] [ Hosting ] [ Domain Registration ] [ WIN PRIZES!! ]

Verify Our Security

OVER 28 MULTIPLE

AWARD WINNING SITES

Webmaster-at-Large: webmasteratlarge@planetwebdesign.com

Planet T-Shirt Logo �
�PLANETWeBDESIGN TECHNOLOGIES��

PO Box 22157 Knoxville, Tennessee 37933-0157

Telephone: 865-300-3804 FAX: 865-692-9247