Home Site Map Gallery Your Two Cents Service Order

               

Home 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

Get Your Free E-Mail Account


Isn't it time you
updated your site?


WEB DEVELOPMENT
AID

 

 

 

 

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!! ]

BizRate Customer Certified (GOLD) Site We are members of the Chamber or Commerce!

Verify our security!
Verify Our Security

Better Business!

OVER 28 MULTIPLE 
AOL Members Choice Award
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

PlanetWebDesign LogoCopyright © 1998, 1999, 2000 PLANETWEBDESIGN TECHNOLOGIES, Inc. All rights reservedBye Bye!!