PDA

View Full Version : Change button background on onmouseover/onmouseout



egturnkey
04-20-2009, 11:43 AM
Hello friends

if i've a button of the following code



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


And its css



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

input.submit {
background: yellow;
}

:hover input.submit {
background: red;
}

HTML <body>

<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/17/css-creating-an-image-hover-effect-using-only-css/

X96 Web Design
04-22-2009, 03:57 AM
IE thinks that :hover means html:hover...

Try this:


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.

forum_amnesiac
04-22-2009, 11:21 AM
I've found a workround for using "input type=submit" with the button images changing using CSS.

Here is my CSS

input.submit {
background-image: url(images/valid_up.gif);
display:block;
width:100px;height:33px;
}

input.submit:hover {
background-image: url(images/valid_down.gif);
display:block;
width:100px;height:33px;
}

You change the image width and height to match your images.

You need to have a transparent image, GIF, of the same dimensions.

The HTML code is :


<a href="#"><input type="image" src="images/transp.gif" class="submit" >

This has been tested and definitely works as a "submit".

This is useful if you have only the one type of submit with 2 images.

I have a multilingual site and would need to have up to 4 sets of "on/off" buttons to cater for the language differences. Can the above CSS be modified to cater for different sets of images.

At the moment if you create different "input submit" classes the :hover change stops working in them all, ie input.class2, input.class3.

amutha
04-22-2009, 11:56 AM
i'm not sure. you try this code. you will upload in the site. it may working. :confused:


<html>
<head>
<title>Assignment 6</title>
<style type="text/css">
button
{
background-color:#0000FF;
FONT-FAMILY: Tahoma;
padding: 1px 2px;
/*background:url(1.gif) repeat-x left top;*/
}
button:hover
{
background-color:#000000;
FONT-FAMILY: 'Tahoma';
padding: 1px 2px;
/*background:url(1.gif) repeat-x left top;*/
}
</style>
<script type="text/javascript">
var buttontarget=""
function jumpto2(url){
if (buttontarget=="")
window.location=url
else if (buttontarget=="_new")
window.open(url)
else
parent[buttontarget].location=url
}
</script>
</head>

<body>
<button name="s2" type="submit" onClick="jumpto2('http://yahoo.com')">CLICK ME</button>
</body>
</html>

3v1l5w1n
04-23-2009, 12:41 AM
I'm pretty sure input.submit:hover wil not work in IE6 (or lower) since ie6 recognizes :hover only for "a" elements. If you still decide to follow the css way (instead of javascript) for different languages you could so something like this



<style>
button { font-family: Tahoma; padding: 1px 2px; }
#en button { background: #0000FF url(1.gif) repeat-x left top; }
#es button { background: #0000FF url(2.gif) repeat-x left top; }
#fr button { background: #0000FF url(3.gif) repeat-x left top; }
#en button:hover { background: #0000FF url(4.gif) repeat-x left top; }
#es button:hover { background: #0000FF url(5.gif) repeat-x left top; }
#fr button:hover { background: #0000FF url(6.gif) repeat-x left top; }
</style>
</head>
<body id="en">
<button type="submit>click me</button>
</body>

forum_amnesiac
04-23-2009, 07:28 AM
Thanks 3v1l5w1n that seems to work fine.

I have always JS to do my mouseover effects, I was just interested, following the initial post, to see if it could be done in CSS.

I may well switch to using this method for my form confirmations, it is less code.