This section is where you will find techniques to create great graphics using Paint Shop Pro.
If you have a question or a tutorial you would like to share E-Mail us and let us know!


Simple Mouseover Script

©1999

This tutorial created by ZooAtHome


 


This simple script can be used with your mouseover images. I am not attempting to teach JavaScript with this tutorial... I don't know enough yet myself to try to teach it to someone else *G*. However, you should be able to copy this code and plug in your files. You will need to go into the HTML to do this. If you are not comfortable with HTML yet, try our HTML tutorials. For more details, visit the Basic Web Applications.
 
 

This script consist of two parts. The first part goes in the Head of your HTML document. It tells the browser to download new images and gives the source for these images. Enter the following code into between the <head> and </head> tags, as shown:
 
<head>
<SCRIPT language=JavaScript>
<!--
overimage=new Image(50, 10); outimage=new Image(50, 10);
overimage.src="/tutorial/html/tutweb/youroverimage.jpg"; outimage.src="/tutorial/html/tutweb/youroutimage.jpg"
//-->
</SCRIPT>
</head>
 
Make the following substitutions in this code:
Substitute the dimensions of your images for the numbers in the parenthesis (width, height)

Substitute the names of your mouseover and mouseout images for "/tutorial/html/tutweb/youroverimage.jpg" and "/tutorial/html/tutweb/youroutimage.jpg", repectively.
For those of you who like to understand the code you're writing, basically we are telling the browser that we are using JavaScript (<SCRIPT language=JavaScript>).

We are stating that "overimage" and "outimage" are new images and setting their dimensions (overimage=new Image(50, 10); outimage=new Image(50, 10)). We are then saying that the source of these images are the mouseover and mouseout images you created (overimage.src="/tutorial/html/tutweb/youroverimage.jpg"; outimage.src="/tutorial/html/tutweb/youroutimage.jpg").

Now, you need to add the image in the body of your document. Enter the following code between the <body> and </body> tags at the point where you want the image to appear:
 
<body>
<a href="goto" onmouseover="image.src=overimage.src" onmouseout="image.src=outimage.src">
<img name="image" src="/tutorial/html/tutweb/youroutimage.jpg" width=50 height=10 border=0></a>
</body>
 
The following substitutions need to made in this code:

"goto" should be the destination of your link (i.e. "home.html", etc.)
"youroutimage" should be replaced with the name of your mouseout image.
width and height values should correspond with the dimensions of your mouseout image.

We have added an image which is also a link (href="goto"). We have named this image (name="image"). We set the initial image as your mouseout image with appropriate dimensions (src="/tutorial/html/tutweb/youroutimage.jpg" width=50 height=10). We set the border to 0 so a border will not appear around the image.

We also stated that we want the source of the image to change to the overimage source (image.src=overimage.src) when the mouse moves over the image.

When the mouse moves out again, the source becomes the same as outimage source (image.src=outimage.src).

As you recall, we set the overimage and outimage sources to your mouseover and mouseout graphics in the head of the document (overimage.src="/tutorial/html/tutweb/youroverimage.jpg" and outimage.src="/tutorial/html/tutweb/youroutimage.jpg").
 


 

When you are finished viewing this page,
close this window to go back to the Tutorials index.