New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Rollover background-image button

Author: Dynamic Drive

Note: Updated Jan 22nd, 04' for link target ability.

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

Demo:



Directions: Developer's View

Step 1: Insert the below into the <head> section of your page. Change the image path within ".initial" to reference the image you want applied initially to the button.

Select All

Step 2: Insert the below anywhere into the <body> section of your page Change the two image names in function "change2()" to reflect the ones used above. Change the target URLs in function "jumpto()" to your own (ie:http://www.yahoo.com):

Select All

To add more form buttons, simply add more of the following inside the <form> tag:

<input type="button" value="Yahoo " class="initial"
onClick="jumpto2('http://yahoo.com')">