WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Beginner's Guide to JavaScript: Part 3

Beginner's Guide to JavaScript: Part 3

The OnMouseOver Event

These are your greatests friends when it comes to dynamic content. They allow pages to 'react' when a user runs a mouse over and off an object. Primarily used for 'image switching', these two event handlers can do everything.

First, let's look at where these go. For the most part, any object can contain these two event handlers. Here, let's do the dreaded onMouseOver image switching.

To start, we need to do a little planning. We need a function to do our image switching, yet we don't want to write a function for every switch we want to do. From experience, the easiest way we've found to do this is to pass in paramaters that will cover the name, file, and object of what we are trying to switch. Let's take a look at an example page.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

var KeepVar;

function ChangePicture(Name)
{
KeepVar = Name;
SwitchImg = Name + "_on.gif";

document.images[Name].src=SwitchImg;
}

function Fix()
{
SwitchImg = KeepVar + "_off.gif";
document.images[KeepVar].src=SwitchImg;
}

</SCRIPT>
</HEAD>

<A HREF="." onMouseOver="ChangePicture('one')" onMouseOut="Fix()"<>IMG SRC="one_off.gif" NAME="one" BORDER=0></A>

<A HREF="." onMouseOver="ChangePicture('two')" onMouseOut="Fix()"><IMG SRC="two_off.gif" NAME="two" BORDER=0></A>

</BODY>
</HTML>

Basically, we use two functions here. The first is ChangePicture(), which takes one parameter. The key of this is that the image name has to be this string, along with the file name. Once we get this parameter, we append _on.gif, which is what we have named our file (It could be anything.), and then we make document.images[Name].src equal to our new image file! Note that 'Name' is used to reference the images[] array. This function allows you to do as many script changes as you want without having to write one for each image. In addition, if you want to change the naming, you can just add another parameter and append it to the other in the array.

For example, if you wanted to pass in two parameters, you could just declare ChangePicture() like:

function ChangePicture(Name,ImageName) From there, you'd use ImageName to index your images[] array. The next thing you'll notice is the Fix() function. Basically, this returns the image to its original state once you move your mouse off the image. This is exactly the same as the first function with one subtle difference: you don't have to pass in a parameter. (A global variable can be accessed by any script on the page and you declare it outside of any functions and just inside your <SCRIPT> tag.)

Once you have the script written, the rest is just plain old HTML. The OnMouseOver and OnMouseOut go into your anchor tag and you just have to give your images names.

Summary

Well as you can see, JavaScript is as easy as HTML once you sit down and understand how it works.

The surface has only been lightly touched on what you can do with JavaScript. As you may have been able to tell, this isn't a 'complete' tutorial per se, however, you can find a more complete guide here.

Good luck!

[ < Beginner's Guide to JavaScript:
Part 2 ]
[ Beginner's Guide to JavaScript:
Part 1 > ]




HTML5 Development Center


Recent Articles