Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Rollover Background-image Button Ie, Rollover background-image button IE
alexia
post Apr 5 2005, 09:40 AM
Post #1


Super Member
*********

Group: Members
Posts: 310
Joined: 9-February 05
From: Italian
Member No.: 3,677
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 blink.gif
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>

CODE
<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.target
if (el.tagName=="INPUT"&&el.type=="button")
el.style.backgroundImage="url"+"('"+image+"')"
}

function jumpto2(url){
if (buttontarget=="")
window.location=url
else if (buttontarget=="_new")
window.open(url)
else
parent[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://www.yahoo.com):

QUOTE
<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('http://google.com')">
<input type="button" value="AlltheWeb" class="initial" onClick="jumpto2('http://alltheweb.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')">

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · Java, Java Servlets, Java Script, & JSP · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Turning An Image Into A Cartoon Style - Photoshop(30)
  2. Flash Movie As Background?(20)
  3. Linking A Url To A Button(4)
  4. Image Preloader With Progress Bar Status(23)
  5. Button To Print Current Web Page(14)
  6. Radio Button(4)
  7. How To Create Java Button Or Frame(14)
  8. Changing Background Color In Php(5)
  9. Refresh Page After Back Button Hit(11)
  10. How To Put Music In The Background Of A Powerpoint Presentation(11)
  11. Watermark Your Image With Simple Php Script(35)
  12. How To Create Embed Image Mail In Gmail(56)
  13. Wmp (windows Media Photo) - The New Image File Format From Microsoft(33)
  14. Scrolling Images?(5)
  15. Need To Shrink The File Size Of Web Image? - Photoshop Tricks(3)
  1. Do You Use Imagefilez.com?(36)
  2. Background Image Swap Script(15)
  3. Image Upload(11)
  4. Trap17 Dynamic Recent Post/topic Image(17)
  5. Cd Drive Eject Button Problem(3)
  6. Kei Igawa: The Story And Analysis(0)
  7. Problem Aligning In Firefox(9)
  8. Render Request Please..(0)
  9. How To Create Cool Image Buttons(7)
  10. How To Make Image Buttons Act As Submit Button(8)
  11. Destination Address For "submit" Button(5)
  12. Finding The Rgb Color Of An Image(3)
  13. Testing Of The Auto Image Resizer(0)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 7th October 2008 - 04:29 AM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation