JavaScript allows us to open windows, generate data and make graphic elements of our page change with the greatest of ease. Those are only a few things that JavaScript can do, but realize that it can do much more. This tutorial will take you through making graphic rollovers and creating links that open up into a new window. This is basic JavaScript, but it's code that is widely used on the net and it's code you can use on any page.

Rollovers

The first part of this script will go in between your < HEAD > tags. Any writing that begins with two slashes like this: //is actually commented out. This means that it won't be read into the code, it's basically there for notation. Commenting is helpful because it allows you to remind yourself, or others, what you were doing with a specific section of code.

This first section of code gets the browser ready to do the rollovers. Think of it as a warm up exercise for the browser where it learns where and what everything is so that it will know what it's dealing with later.

< SCRIPT LANGUAGE ="JavaScript" >
if (document.images)
{

//This part of the code lets the browser know that there are images that will
//be affected by this code and also gives the images names to be used later //on in the code.
//write, top
img1on = new Image();
img1on.src="./images/writingsmall_over.gif";

//art, top
img2on = new Image();
img2on.src = "./images/artmall_over.gif";

//design, top
img3on = new Image();
img3on.src = "./images/designsmall_over.gif";

//resume, top
img4on = new Image();
img4on.src = "./images/resumesmall_over.gif";

//contact, top
img5on = new Image();
img5on.src = "./images/contactsmall_over.gif";

//write, top
img1off = new Image();
img1off.src = "./images/writingsmall.gif";

//art, top
img2off = new Image();
img2off.src = "./images/artsmall.gif";

//design, top
img3off = new Image();
img3off.src = "./images/designsmall.gif";

//resume, top
img4off = new Image();
img4off.src = "./images/resumesmall.gif";

//contact, top
img5off = new Image();
img5off.src = "./images/contactsmall.gif";


}
//This function "activates" the images, letting the browser know that these
//will be used within the document when the user points the mouse in a
//specified area.

function imgOn(imgName){
if (document.images) {
document[imgName].src=eval(imgName + "on.src");
}
}
//This function "deactivates" the images, returning the page to its normal
//state when the mouse leaves a specified area.
function imgOff(imgName) {
if (document.images) {
document[imgName].src=eval(imgName + "off.src");
}
}
< /script >
< /head >
This part is where the real functionality and interactivity comes into play. This little section of code surrounds an image. When a user puts their cursor over that image, it will change.


Window Opener

This next little section of code allows you to tell the browser to open your link in a new window. It's great for online portfolios where you want to have a larger view of a specific work, or for linking to sites other than your own. Be careful not to over use this code though, because many users don't like having their screens cluttered with unnecessary windows.
< head >
< SCRIPT LANGUAGE ="JavaScript" >
//This function will open a separate browser window.
function openWin (URL) {
aWindow = window.open(URL, "thewindow","width=600,height=400");
}
< /script >
< /head >

Here's the code to go in the body of your html document.
< body >
< a href = "javascript:openWin ('sporks.html');" >< img src="spork.gif"
width="175" height="126" alt="sporks" border="0" >< br >< font face="Verdana, Arial, Helvetica, sans serif" size=2 color="#000000" >< center >< b >The wide world of sporks has a common origin. Here's everything you'll ever want to know about sporks!< /b >< /center >< /font >
< /a >
< /body >

The main trick to learning about JavaScript is the same as any other code or programming language on the web: view the source. If you come across a page that does a trick that you want to learn, look at the source code and figure out how that author pulled it off.

For more JavaScript tutorials look in resources under Tutorials on the web.