Change button background on onmouseover/onmouseout

**egturnkey** · 04-20-2009, 11:43 AM

Hello friends

if i've a button of the following code

Code:

<button type=submit name=s2>CLICK ME</button>

And its css

Code:

<style>
button
{
cursor:pointer;
color:#666;
FONT-FAMILY: 'Tahoma';
padding: 1px 2px;
background:url(1.gif) repeat-x left top;
}
</style>

I wanna make the following changes

if i've 1.gif and 2.gif ( images )

let the background be 1.gif

and
onmouseover will be 2.gif

and indeed
onmouseout will be 1.gif

How can i write it using css , cause i've tried million of time and it always gives me error

thanks in advance

**forum_amnesiac** · 04-20-2009, 12:21 PM

I'm not sure it's possible to change the button background just using CSS.

I use JS for rollover effects, here's a link to a decent one:-

http://www.dynamicdrive.com/dynamicindex5/button2.htm

**egturnkey** · 04-20-2009, 12:27 PM

Originally Posted by forum_amnesiac

I'm not sure it's possible to change the button background just using CSS.
I use JS for rollover effects, here's a link to a decent one:-
http://www.dynamicdrive.com/dynamicindex5/button2.htm

Thanks amnesiac , i've tired before but its main problem it won't work over IE
hence i thought maybe there is a way using css.

**forum_amnesiac** · 04-20-2009, 12:38 PM

I'm surprised, I use that type of JS in IE and it works fine.

I have seen a way of doing this in CSS but it means you have to use the <a> tag.

Here is a link that explains it in more detail.

http://www.webmasterworld.com/forum83/4005.htm

If that doesn't work then I can let you have the JS code that I use for rollover effects

**egturnkey** · 04-20-2009, 03:14 PM

Originally Posted by forum_amnesiac

I'm surprised, I use that type of JS in IE and it works fine.
I have seen a way of doing this in CSS but it means you have to use the <a> tag.
Here is a link that explains it in more detail.
http://www.webmasterworld.com/forum83/4005.htm
If that doesn't work then I can let you have the JS code that I use for rollover effects

- It is working for FF and Higher IE but didn't works at IE 6

- Yes the main problem , is submit forms are not using <a> and i've already seen many ways via css but valid for <a> <ul> <li> but never seen for direct submit forms , but i'm there there is a way , anyway i'm searching so badly and if i got it, i will write it here

thanks for your tries to help me

**forum_amnesiac** · 04-20-2009, 04:35 PM

Sorry I couldn't help more.

When I read the CSS link I gave I did think that they showed a way to do the submit as you wanted.

The JS I've got definitely works on lower versions of IE.

Good luck withyour investigations, if you find a CSS solution perhaps you could post it here.

**forum_amnesiac** · 04-20-2009, 04:52 PM

I'v tested out the code in the link that I gave and it does work as an input button.

The only problem with it that I've got is that in IE 7 the button goes into hover mode if the cursor is anywhere on the page.

Here is the code if anyone thinks they can work out why it behaves like this in IE7

CSS:

Code:

input.submit { 
background: yellow; 
} 

:hover input.submit { 
background: red; 
}

HTML <body>

Code:

<td><a href="#"><input type="submit" class="submit" value="Login"></a></td>

**basslion** · 04-21-2009, 02:37 PM

check this link, perhaps it may help you

http://www.dynamixlabs.com/2008/01/1...sing-only-css/

**X96 Web Design** · 04-22-2009, 03:57 AM

IE thinks that :hover means html:hover...

Try this:

Code:

button.submit {
background:#ffff00;
}
button.submit:hover {
background:#ff0000;
}

Not sure if that'll work, but it's worth a try...

**forum_amnesiac** · 04-22-2009, 06:53 AM

Hi X96

That definitely works, it does change the background colour on mouseover.

This is useful for standard buttons.

However, for Input Submit, can this be modified to change if you want to use an image, eg one image for normal another for mouseover and still have the submit form ability.

I have tried to substitute 2 background images, without inputting a "value=",
but it puts Submit Query in the box.

Thread: Change button background on onmouseover/onmouseout

Thread Tools

Search Thread

Change button background on onmouseover/onmouseout

The Following User Says Thank You to forum_amnesiac For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions