How About a Little Java? Java Script that is.

Java Applets
Java Script
Java Problems
Status Bar Message
Status Bar Mouse-Over Message
Mouse-Overs
Pop-up Windows

* Note: The techniques described on this page no longer require designers to create all the code themselves. Designers can now painlessly and quickly create these features with the aid of modern advanced development applications like Dreamweaver. The code on this page is intended as a reference so you can understand the inner-workings of Java.*

Java Applets

Java, developed by Sun Microsystems, is a full-fledged object-oriented programming language. It can be used to create stand alone applications and a special type of mini-application called an applet. Applets are downloaded as separate files to your browser alongside an HTML document, and provide an infinite variety of added functionality to the Web site you are visiting. The displayed results of applets can appear to be embedded in an HTML page, but the Java code and applet arrives as a separate file. This file usually has the extension of ".class".

JavaScript

In the beginning there was HTML, and it was a real hoot. But - HTML was restricted to displaying static information. People clamored for more and in 1995 java script was developed by Netscape. Unlike Java applets which are stand alone applications downloaded outside of the HTML code, Java script is a scripting language that is embedded in and works with HTML. Javascript has allowed web designers to build interactivity in their sites by allowing the page to react in specific ways to user actions.

Problems with JavaScript

The major problem with javascript is that it works differently in different browsers. Java script is only compatible with version 3 browsers of Netscape and Internet Explorer, and tags that are applicable with one kind of browser often need to be changed or don't work in another. Be sure to check your scripts on different browsers, design pages so they will work if the javascripting is disabled, and know which tags work for which browser. Below we've supplied some scripts that work for almost all browsers.

Status Bar Message

A status bar message is a text message that appears in the bottom bar of a browser (the status bar) when a web page is loaded. On this particular page, you'll see the message "Java Script is Fun!" in the status bar . The code for this message consists of a simple command in the body tag and looks like this:

<body onLoad="window.defaultStatus='Java Script is Fun!'">

To use this, simply change the message in green and paste the command in after your body tag.

Status Bar Mouse-Over Message

If you would like to have different text appear in the status bar when you mouse-over a link, then just add this little bit of code to your HREF tag.

<A HREF="newpage.html" onMouseOver="window.status='Look Ma - No Hands!';return true">

The text that is in green is the text that will appear in the bottom of your browser. Move your mouse over THIS TEXT to see what it does (the link doesn't work).

Mouse-Overs

Mouse-Overs use Java script to replace one image for another when a cursor is placed over the image, and then load the original image when the mouse is removed from the image. An example would be (the link doesn't work) :

The code for this is pretty standard so all you have to do is replace the image names and wamo - you've got yourself some mouse-overs. The code is listed below on the right and some explanation of the code is on the left. The code marked in green is the only thing you'll have to replace for your particular page.

<SCRIPT LANGUAGE="JavaScript">

<!--//

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0) { roll = 'true'; }
else { roll = 'false'; }

function msover1(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
function msout1(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }

{ imageA = new Image;
imageA.src = "mouseoff.JPG";}

{ imageB = new Image;
imageB.src = "mouseon.JPG";}

//-->

</SCRIPT>

This piece of code goes between the <header> tags in your page, or between the opening <html> tag and the <body> tag if you don't use headers.

The purple tags identify the language for the browser so it knows to interpret the language as Java script.

The blue section of code checks the browser type to make sure it supports Java script. If the Browser used to view your page isn't at least version 3 of Netscape or version 4 of Internet Explorer, the Java scripting disables itself so only the image displayed will be shown.

The brown section defines what the javascript is supposed to do. When the cursor is put over the image that is supposed to change, the code jumps to this piece of code to find out what function is supposed to be performed.

The red code preloads all the images for the mouse-over. This is important because without this, the user would have to wait for the image to download from the server. This piece of code puts all the images into the memory of the computer so that the mouse-over will swap images seamlessly and instantly. This code sequence has to be performed for each of the images of a mouse-over function. Since the above uses two images (one showing and the one it is replaced with on mouse-over), it needs two commands to download the images. If you have two mouse-over images on your page, you would have 4 download commands.

The sections in green are the only sections you have to replace. Each image must be given a different variable when it is downloaded. In this case, I gave them alphabetical names (A and B), but you can name them anything you want (you must keep the "Image" before them though). Then you just have to put the name of the file you want downloaded. Even though you can assign a different variable name for each of the images, you will use the variable name of the image that is showing on your page (the mouse-off image) later on.

This piece of code places is like the source code for placing the image on the page and linking it, but it has the Java scripting added to it that defines what images should be used in the mouse-over and refers the browser to the function code at the start of the page.

The purple tag simply sets the image to link to another page.

The red tag sets the images to be used for the mouse-over. The "MouseOut" image is the one showing when the page comes up, and the "MouseOver" is the image that appears when the mouse is placed over the image. For the 'image' tag you should use the same image value that was used for the mouseout image of the set. In this case, the mouseout image was designated as "imageA" in the preload section. After you define the appropriate image value, you simply fill in the file names for the mouseover and mouseout images.

The tag in blue inserts the image and defines its width, height, and name. The file name of the mouseout image should be inserted after source and its appropriate height and width should be filled in (if you don't know then, just leave those tags out). The name of the image should be the same as the one listed above it.

Pop-up Windows

Pop-up windows are little floating mini-browsers. Nothing more complicated than that. All you have to do is define their properties in a function statement (what they look like), then provide a way to launch them (through a form, text link, or image link).

But, Netscape and Microsoft, as usual, differ in some respects concerning how these pop-ups behave and different browser versions of Netscape and IE recognize different window behaviors. Yet another reason to convince your audience to upgrade to the latest browsers (hint, hint).

The simplest method to launch a window if all you want to do is launch a window is as follows:

<SCRIPT LANGUAGE="JavaScript">
//<--!
function launch()
{
window.open ("otherwindow.html","new_window",
"status=no,toolbar=no,location=no,menu=no,width=100,height=300");
}
//-->
</SCRIPT>

What you see there is a set of instructions to open a window when launch() is connected to a tag. The sections in green are the parts you will replace when you insert this script in between the header tags or between the html and body tags of your page. The "otherwindow.html" is the name of the page that will open in this pop-up window. This is simply another page I created and saved in the same folder as this page. The other parts dictate what the window will look like. I have set the dimensions of the pop-up window and have taken out all of the browser's tool bars. Here is a list of options you can configure in your pop-up window. (note the letter case (uppercase vs. lowercase) of all instructions. Also, yes=1 and no=0):

directories=yes,no/1,0
Do you want the standard browser directory buttons to appear?

height=number

How many pixels high should the window be? Minimum is 100. This measures the content viewing area, not the entire browser window (frame, buttons, status line, etc.)

location=yes,no/1,0

Do you want the location field (where you enter new URLs to jump to) to appear?

menubar=yes,no/1,0

Do you want a menu at the top of the field? (Internet Explorer defaults to "yes".)

resizable=yes,no/1,0

Do you want the viewer to be able to resize the launched window?

scrollbars=yes,no/1,0

Do you want scrollbars to appear if necessary? The default is "yes".

status=yes,no/1,0

Do you want the status bar at the bottom of the pop-up? (Internet Explorer defaults to "yes".)

toolbar=yes,no/1,0

Do you want the toolbar (where the backwards and forwards buttons are) to appear?

width=number

How wide, in pixels, should the pop-up window be? (minimum is, again, 100)

In addition, there's a special, all-encompassing tag:

type=fullWindow

This instructs the browser to open the new window to occupy the entire desktop and eliminate all browser features except the title bar. It is also known as "Netscape Canvas Mode".

Let's Launch It

Now that you've defined your pop-up - How do you launch it?

Since you've attached the instruction to a function, it's very easy to attach the function to a mouseclick. You can either use a regular old <A HREF> tag like so:

<A HREF="JavaScript: launch();">Windows Away!!</A>

Windows Away!!

If you're like any normal person, you'll have clicked the button and seen the little pop-up because people can't seem to not click buttons when they see them.