web blazonry web development scripts and tutorials Get best price on Samsung Galaxy S5, Black 16GB (Verizon Wireless)
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

Javascript Home


image scripts
  Image Load Order
  Mouse Overs
  SlideShow

JavaScript Resources
  Free JavaScript Books(new)
  Recommended Sites
  Bestselling Books

Bookmark and Share




JavaScript : Mouse-overs

Move your mouse over the button.

 

Test Button

 

Here's the JavaScript, which you would put in the HEAD portion of your HTML document to use the mouse over hilight:

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

testOff = new Image(22, 123);
testOff.src = "btn.gif";
testHi = new Image(22, 123);
testHi.src = "btn_hi.gif";

function hilight(imgName) {
imgOn = eval(imgName + "Hi.src");
document [imgName].src = imgOn; }

function normalize(imgName) {
imgOff = eval(imgName + "Off.src");
document [imgName].src = imgOff; }

//-->
</SCRIPT>

So what is all that stuff?
I shall try and explain it, section by section.

testOff = new Image(22, 123);
testOff.src = "btn.gif";
testHi = new Image(22, 123);
testHi.src = "btn_hi.gif";

The first part is just creating new image objects. First we assign the name 'testOff' as an Image and the what size the image is. For some weird reason the size is (height, width). The next line is telling JavaScript where it can find the source for the image, ie. the location. We do the same for 'testHi' which will be the hilighted image object.

 

The next section is defining our functions. We need to functions, one when the Mouse goes over the image, and one when the Mouse exits the image.

function hilight(imgName) {
imgOn = eval(imgName + "Hi.src");
document [imgName].src = imgOn; }

function normalize(imgName) {
imgOff = eval(imgName + "Off.src");
document [imgName].src = imgOff; }

The function is passed the imgName, which is just the name of the image it is going to hilight. We then create the hilighted image object, this is done by taking the imgName adding on to it the Hi.src to get the image object variable we created above. The next command uses the imgName to find the object in the document, named in this case 'test', it then changes that objects src to our image object.

The other function does the same thing, but it creates a different image, one that is Off or non-hilighted, usually the image that loads on the page.

To use this JavaScript, you need to call it within your BODY section of your HTML document. If your hilighted image is a link, then the best place to put the function calls is in the anchor tag <A HREF... portion. This is because in early versions of Navigator, the anchor tag or links were considered objects which can be used by JavaScript, and images were not considered objects. Now everything on the page I believe, is considered an object.

If the image you wish to hilight with the mouse over is not a link just put the following code in the IMG tag, but you should make sure that you use version checking (see below).

<A HREF="js_menu.html" onMouseover="hilight('test')" onMouseout="normalize('test')"> <IMG SRC="btn.gif" BORDER=0 NAME="test"></A>

In order to save space I have removed the width, height, and alt tags, these should be in each image you use. This helps the browser's layout manager and people using text-browsers, or screen readers.

There is a problem using just the above code. Netscape Navigator version 2.02 and prior, did not have a image object, so this would not work. So you need to do some version checking to insure that no errors will pop up if some one is using Navigator 2.0.

The script to do version checking is:

var verNum;
verNum = parseInt(navigator.appVersion);

if (verNum >= 3) { ... code goes here ... }

For more information on checking the browser version see the version checking section, page.

You use the same HTML tags in the body as above, so the complete JavaScript with version checking, would look like this:

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

var verNum;
verNum = parseInt(navigator.appVersion);

if (verNum >= 3) {
testOff = new Image(22, 123);
testOff.src = "btn.gif";
testHi = new Image(22, 123);
testHi.src = "btn_hi.gif";
}

function hilight(imgName) {
if (verNum >= 3)
{
imgOn = eval(imgName + "Hi.src");
document [imgName].src = imgOn;
}
}

function normalize(imgName) {
if (verNum >= 3)
{
imgOff = eval(imgName + "Off.src");
document [imgName].src = imgOff;
}
}

//-->
</SCRIPT>

 

You don't have to change the image the mouse rolls over either. You can name another image and have that one change. All you need to do is to change the IMG NAME= tag. Here's an example, roll over the button again.

Test Button

Test Button

Here is an example of an even fancier JavaScript mouse-over concept. However, be careful how you use it. Specifically, do not implement this for navigation. The term for the mess that results is "mystery meat navigation." See Web Pages That Suck . com for details.

 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

  privacy policy     ||     © 1997-2016. astonishinc.com   All Rights Reserved.