JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Rollover background-image

A script that applies a (different) background image to any form button as the mouse moves over it.


Insert into <HEAD>
<style> <!-- .initial{font-weight:bold;background-image:url(2.jpg)} //--> </style> <script> <!-- if (document.images){ after=new Image() //change the file path below to the image you want applied when the mouse moves over after.src="2.jpg" } function change2(image){ var el=event.srcElement if (el.tagName=="INPUT"&&el.type=="button") event.srcElement.style.backgroundImage="url"+"('"+image+"')" } function jumpto2(url){ window.location=url } //--> </script>

Insert into <BODY>
<form onMouseover="change2('secondimage.jpg')" onMouseout="change2('firstimage.jpg')"> <input type="button" value="Example 1 " class="initial" onClick="jumpto2('1.htm')"> <br> <input type="button" value="Example 2 " class="initial" onClick="jumpto2('2.htm')"> <br> <input type="button" value="Example 3 " class="initial" onClick="jumpto2('3.htm')"> <br> </form>

Other Options
To add more form buttons, simply add more of the following inside the <form> tag: <input type="button" value="Example 2 " class="initial" onClick="jumpto2('2.htm')"> With the parts in red representing the parts you should change to your own.