Click to See Complete Forum and Search --> : button style
Nayias
11-02-2003, 12:31 PM
hey all
i have a button:
<input type="button" value="link" style="background-color: #000000; color: #006699; border-style: solid;
border-color: #000000">
i want the button to get a blue border color (#006699) when the mouse moves over, and when the mouse moves out back to the black border.
how can i do that?
AdamGundry
11-02-2003, 02:10 PM
You should be able to do this with the CSS :hover pseudoclass, but in IE support is really bad so you are probably better with JS:
<input type="button" value="link" style="background-color: #000000; color: #006699; border-style: solid;
border-color: #000000" onmouseover="this.style.borderColor='#006699'" onmouseout="this.style.borderColor='#000000'">
Adam
Nayias
11-02-2003, 02:52 PM
ok thx :)
but now what if i want that when i move the mouse out, the border-color changes back to black after 2 seconds.
i think you could do that with the setTimeout().
but i dont really know how to use that..
i thought something like this:
<html><head><title>buttons</title>
<script type="text/javascript">
function time_out()
{
setTimeout("2000","change_back()")
}
function change_back()
{
this.style.borderColor='black'
}
</script></head><body>
<input type="button" value="link" style="background-color: #000000; color: #006699; border-style: solid;
border-color: #000000" onmouseover="this.style.borderColor='#006699'" onmouseout="time_out()"> </body></html>
but that didnt work, the border doesnt go away when you move your mouse from the link.
AdamGundry
11-03-2003, 09:54 AM
You had your arguments for setTimeout the wrong way round, try this:
onmouseout="setTimeout('this.style.borderColor=\'#000000\'', 2000)"
Adam
Nayias
11-03-2003, 11:16 AM
ok thx:D
Nayias
11-03-2003, 11:23 AM
onmouseout="setTimeout('this.style.borderColor=\'#000000\'', 2000)"
oh, i tried it but i get an error:
this.style is empty or no object.
AdamGundry
11-03-2003, 03:06 PM
Sorry, obvious mistake on my part. This should work (note that each button needs a unique ID):
<input type="button" value="link" style="background-color: #000000; color: #006699; border-style: solid;
border-color: #000000" onmouseover="this.style.borderColor='#006699'" id="btnBorder1"
onmouseout="setTimeout('document.getElementById(\\'' + this.id + '\\').style.borderColor = \\'#000000\\'', 2000)">
Adam
Nayias
11-03-2003, 03:25 PM
this one worked :D
thx
AdamGundry
11-03-2003, 03:34 PM
No problem. :cool:
Adam