Jump to content
xisto Community
Sign in to follow this  
alexia

Rollover Background-image Button Ie Rollover background-image button IE

Recommended Posts

I find This Code On Search I Think for webmasters is good To Find Easy this Kind of code so i Type it here I Hope U enjoy it :)

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.

 

<style type="text/css">

 

.initial{

font-weight:bold;

background-image:url(first.jpg);

}

 

</style>

 

<script type="text/javascript"><!--//Specify optional button target: "_new" for new window, or name of FRAME target (ie "myframe")var buttontarget=""if (document.images){after=new Image()//Enter image path of second image (for preloading purposes):after.src="second.jpg"}function change2(e, image){var el=window.event? event.srcElement: e.targetif (el.tagName=="INPUT"&&el.type=="button")el.style.backgroundImage="url"+"('"+image+"')"}function jumpto2(url){if (buttontarget=="")window.location=urlelse if (buttontarget=="_new")window.open(url)elseparent[buttontarget].location=url}//--></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://yahoo.com/):

 

<form onMouseover="change2(event, 'second.jpg')" onMouseout="change2(event, 'first.jpg')">

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

<input type="button" value="Google" class="initial" onClick="jumpto2('https://www.google.de/?gfe_rd=cr&ei=7AkjVIatDsKH8QfNkoC4DQ&gws_rd=ssl')">

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

<br>

</form>

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.