How can I change the shape/color of a button/link

elisabeth · September 20th, 2004, 03:05 AM

I would like to change the shape (or the color) of a button (or of a link) when the focus on it..
When the focus is on a specific button, the user cannot see it very well, so I would like a way for him to notice the button has the focus. I thought changing the shape o the color is good enough, don't you think?.
I looked everywhere but cannot find anything.
I supposed that for a link, changing the color is good when the link has the focus....

Help, please?

gokul_blr · September 20th, 2004, 03:25 AM

<html>

<head>

<style>
h1 {color: red}
h3 {color: blue}
</style>

</head>

<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>

</html>

qazi_nomi · September 20th, 2004, 03:25 AM

here is the code
<style>
.over{
    color: #FF0000;
    background-color: #000000;

}
.simple
{
    color: #000000;
    background-color: #FF0000;
}

</style>
</head>

<body>

<input name="Submit" type="submit" class="simple" onFocus="this.className='over'" onBlur="this.className='simple'" value="Submit">

</body>

You can change the background image or which you want to do by this way

(*_*)

Numan
--------------------------------------------------
Love is the most precious thing of this world. So find it and grab it!

gokul_blr · September 20th, 2004, 03:30 AM

<html>
<head>

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

</head>

<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective!!</p>

</body>
</html>

gokul_blr · September 20th, 2004, 03:32 AM

You can learn more about CSS - Style at

http://www.w3schools.com/css/default.asp

richard.york · September 20th, 2004, 03:41 AM

There is also a :focus pseudo-class.
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
a:focus {color: gray;}
</style>
When pressing tab to navigate through the links in Firefox/NS/Mozilla the link will get yet another style. Doesn't work in IE though.

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

elisabeth · September 21st, 2004, 06:27 AM

Thank you so much....

elisabeth · September 21st, 2004, 07:11 AM

I have tried to use what you said with a button that had a drawing but it does not seem to work. What I am doing wrong?
I have defined the style stuff and then:

<form onsubmit="return stopSubmit()">
<input type="image" class="simple" SRC="../img/arrow.up.gif" height="25" width="40" border="0" alt="up" id="up" onclick="Move(document.userName).user,-1);" onFocus="this.className='over'" onBlur="this.className='simple'" />

<input name="Submit" type="submit" class="simple" onFocus="this.className='over'" onBlur="this.className='simple'" value="Submit">
</form>

Now, the Submit button changes color when it has the focus on it.... but the other button does not.

Snib · September 21st, 2004, 09:02 AM

I'm not sure either of the classes normal and over would effect an image. Try using a button, or using a rollover script to change the src dynamically.

HTH

-Snib <><
http://www.snibworks.com
There are only two stupid questions: the one you don't ask, and the one you ask more than once :-)

elisabeth · September 21st, 2004, 09:15 AM

I am pretty new to JavaScript so I don't know exactly what you mean!!
I need to use an image as a button since it is not a submit button I am using but a button that goes up a list.
When the button has the focus, I need it to change shape for instance.
How could I do it ?