Feedback

HTML Tools & Tips

·

Using Mouseovers


So everyone has been asking how I did the lighting effect on my web page. It's actually just a modified version of a simple MouseOver script. Instead of activating one MouseOver function when the cursor is placed over the Guestbook, it activates two: one for the Guestbook image itself and one for a satellite image.

Demo





This function is really made up of two MouseOver functions and each of these functions requires two images, making a total of four images: 2 "ON" images and 2 "OFF" images. Here are the images I used:

Image 1 (off) Image 2 (on) Image 3 (off) Image 4 (on)

So, to get this to work you'll need four images of your own - two "ON" images and two "OFF" images. The "OFF" images are the ones that will be displayed when your pages first loads and the two "ON" images are the images that will be substituted for your "OFF" images when the page's function is activated.
Some things to keep in mind:

  • Each pair of images (like images 1 and 2 above) should be the same size or else your images may become distorted.
  • Your page CANNOT have any OVERLAPPING Elements.
  • You will end up with TWO 'Insert HTML' Elements on your page - one for the MouseOver images, and one for the Satellite images. (see below for more details.)
  • You will have to make the dimensions of your two 'Insert HTML' Elements match the dimensions of your two sets of images. For example, if two of your images have a height and width of 50 pixels, your 'Insert HTML' Element must have a height and width of 50 pixels. See below for more information on this.

Name of JavaScript function:

Note: You can use any alphanumeric characters to name your script, but the name must begin with a letter and can only be one word (no spaces or special characters). If you have more than one script on your page, each one must have it's own, unique name.

MouseOver "OFF" image's name:

Enter the name of the default MouseOver image that will appear when the page first loads. This is the image that a viewer will place their cursor over to activate the function. In my example at the top, it is Image 1 (off):

Make a note of your image's dimensions, as it should be the same dimensions as the MouseOver "ON" image below. This image I used in my example above has a height of 189 and a width of 82.

MouseOver 'ON' image's name:

Enter the name of the image that you want to replace the MouseOver "OFF" image with when the cursor is placed over it. In my example at the top, it is Image 2 (on):

Make a note of your image's dimensions, as it should be the same dimensions as the MouseOver "OFF" image above. This image I used in my example above has a height of 189 and a width of 82.

Satellite "OFF" image's name:

This is the other image that appears on default when your page first loads. You can place it anywhere on your page, and its function will be triggered when the cursor is placed on the MouseOver "OFF" image. Putting the cursor over this image won't do anything. In my example at the top, it is Image 3 (off):

Make a note of your image's dimensions, as it should be the same dimensions as the Satellite "ON" image below. This image I used in my example above has a height of 84 and a width of 64.

Satellite "ON" image's name:

This is the image that will replace the Satellite "OFF" image when the cursor is placed over the MouseOver "OFF" image. In my example at the top, it is Image 4 (on):

Make a note of your image's dimensions, as it should be the same dimensions as the Satellite "OFF" image above. This image I used in my example above has a height of 84 and a width of 64.

URL:

Your MouseOver image can be linked. On my web page, I've linked my image to my Guestbook. Please enter a URL that your image will link to.

To Get The First Bit of Code:

Once you've entered all of the information in the fields above, click the 'Generate Code' button below, and you should see your code appear in the TWO (remember, you have two sets of code) boxes at the bottom of this page.

To get the first bit of code, highlight all of it by clicking the button below:

Now that it's highlighted, CUT (keyboard shortcut: "CTRL+X") and PASTE (keyboard shortcut: "CTRL+V") the code into an "Insert HTML" Element on your page.

Once you've entered this code in an "InsertHTML" Element, make sure that its dimensions match the dimension of your "MouseOver" images. On my page, the "MouseOver" images I used both had heights of 189 and widths of 82, so I made the the height and width of my "InsertHTML" Element 189 and 82 respectively.

Your 1st bit of Code:

To get the second bit of code, highlight all of it by clicking the button below:

Now that it's highlighted, CUT (keyboard shortcut: "CTRL+X") and PASTE (keyboard shortcut: "CTRL+V") the code into a new "Insert HTML" Element on your page.

Again, once you've entered this code in a second "InsertHTML" Element, make sure that its dimensions match the dimension of your "Satellite" images. On my page, the "Satellite" images I used both had heights of 84 and widths of 64, so I made the the height and width of my second "InsertHTML" Element 84 and 64 respectively.

Your 2nd bit of Code:

Other HTML Tools & Tips