Side graphic navigation javascript and tutorial.

Javascripts
Side Graphic Mouseover Navigation
Using a Graphic to make Mouseover Buttons

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name
Click for more info!

Bookmark This Page | Click here for more Html and javascripts

Side Mouseover Graphic Navigation Javascript

Here is a great mouseover side navigation javascript where you use a graphic of your choice for the background of the buttons. You will need to follow the PSP Graphic
Tutorial provided, to learn how to make your mouseover buttons using Paint Shop Pro.

Once your buttons are made, follow the instructions below and copy and paste the scripts to enable the rollover navigation effect.

Just look at the very professional webdesign end result you can make. With a matching background, they look great. (This example was made for a car firm in England I was commissioned to design a site for. So please, don't take the graphics as they have been copyrighted.)

PART ONE

This is a three part script. The first part goes within the <head> of your html document. Nothing within the first part needs to be modified.

PART TWO

The second part of the script is placed within the <body> tag. This allows your browser to preload the mouseover images. You can use as many images as you like. Just add any extra images the same as they are written within the body tag. Change yourimageb.jpg to whatever you have called your mouseover images.

PART THREE

The third part goes into the body of your html document where you want the mouseover to appear on your page. The line of text within the script must be kept on one line only, otherwise gaps will appear between your graphics. I have set the images into a table 187 pixels wide. You may like to use a wider graphic, so make the table as wide as you make your graphics.

Change the graphic names at "img src" to what you have called your graphics and change the links at "a href" to reflect whatever page you are linking to.

To copy the script within the text box simply click your mouse within the box and press your keyboards "ctr + a" buttons to highlight, then press "ctr+c" to copy.

Home