Dynamic Drive DHTML Scripts- Rollover background-image button

New Revised CSS Library Forums Web Tools

FAQs Awards Usage Terms Contact

Home Links and Buttons Here

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:

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
<style type="text/css"> .initial{ font-weight:bold; background-image:url(first.jpg); } </style> <script type="text/javascript">  </script>

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):

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')">