A Simple Image/Link Rollover in Javascript

By Benjamin Glenn
2007-10-31

Image/Link Rollover in Javascript

Your web site has been up and running for some time and while you are pleased with the results, you can't help but think that it needs a little bit more "something".

Maybe a tweak or two to make it stand out a little more. Nothing flashy or too complicated.

Maybe you want to do something with the links, like add some pictures or a "rollover effect". Well, maybe not all the links; just one or two. There's a fine line between classy and gaudy.

The problem is: you know nothing about Javascript. To you and a lot of people Javascript looks like ancient Vulcan. And yet there is a solution. Cut and paste comes to mind.

Just head on over to your friendly free Java source, find what you need and cut and paste it into your web page. Sounds simple enough. BUT. As the universe has shown us time and time again...nothing is simple.

Now a couple of hours have passed and you still haven't found what you were looking for. It seems the Java codes you have been looking at, all deal with muliple images and a humoungus amount of code to place in the "head section" and nowhere does it give you instructions as to how to make the rest of the Java code fit into your web page. Forget about where you want to put it.

Believe it or not, there is a small compact Javascript that you can paste into your web page and put it where you want it. And the added bonus is: it's a image link.

You will need three pictures in gif, jpg or bmp: your choice. Two of the three pictures must be the same.

Now here's the Javascript:
<SCRIPT LANGUAGE="JavaScript">
Step one: Paste this code into the Head section of your HTML of your document.
<Head>
<script>
{!-- Hide Script function move_in(img_name,img_src) { document[img_name].src=img_src; }

function move_out(img_name,img_src) { document[img_name].src=img_src; }
//End Hide Script--}
</script>
</head?>

Step two: Paste this code into the Body of your Html document
<body>
{a href="anylink.html
OnMouseOver="move_in('image1','image_on.gif')"
OnMouseOut="move_out('image1','image_out.gif')"}

<img src="image_out.gif">
<alt="Move your mouse over here!" name="image1">

< /a>
</body>
</html>

Now look down under the "body" tag and you will see: OnMouseOver="move_in('image1','image_on.gif')". Image_on.gif is the picture you want displayed. Image_out is what will be seen when you roll your mouse over the image.

So far that's two images. The final image will go into the last peice of code which is "image_out.gif". This should be your copy image. You can also change the information in the "alt" tag to whatever you like. Place any link you want in the "link" tag.

This little peice of Javascript code makes a great preview picture link for whatever site you want to link it to. Have fun with this. Experiment with different images or just use text and an image. It's very versatile. I think it works best in tables and should be most effective in getting some attention for you web pages.

Tutorial Pages:
» Image/Link Rollover in Javascript

| Write For Us

Related Tutorials:
» JavaScript Debugging Techniques with Firebug
» Striped Tables Using JavaScript
» Opening PDFs in a New Window with JavaScript
» Essential Javascript -- A Javascript Tutorial
» Submit Forms Conditionally using JavaScript
» How to Setup a Randomising Function