Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 20th, 2004, 03:05 AM
Authorized User
 
Join Date: Feb 2004
Location: , , .
Posts: 55
Thanks: 0
Thanked 0 Times in 0 Posts
Default How can I change the shape/color of a button/link

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?


 
Old September 20th, 2004, 03:25 AM
Friend of Wrox
 
Join Date: Jul 2004
Location: , , India.
Posts: 345
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to gokul_blr Send a message via Yahoo to gokul_blr
Default

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

 
Old September 20th, 2004, 03:25 AM
Friend of Wrox
Points: 1,288, Level: 14
Points: 1,288, Level: 14 Points: 1,288, Level: 14 Points: 1,288, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2004
Location: Stockholm, Sweden
Posts: 331
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via MSN to qazi_nomi
Default

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!
 
Old September 20th, 2004, 03:30 AM
Friend of Wrox
 
Join Date: Jul 2004
Location: , , India.
Posts: 345
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to gokul_blr Send a message via Yahoo to gokul_blr
Default

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

 
Old September 20th, 2004, 03:32 AM
Friend of Wrox
 
Join Date: Jul 2004
Location: , , India.
Posts: 345
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to gokul_blr Send a message via Yahoo to gokul_blr
Default

You can learn more about CSS - Style at

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


 
Old September 20th, 2004, 03:41 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
 
Old September 21st, 2004, 06:27 AM
Authorized User
 
Join Date: Feb 2004
Location: , , .
Posts: 55
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thank you so much....

 
Old September 21st, 2004, 07:11 AM
Authorized User
 
Join Date: Feb 2004
Location: , , .
Posts: 55
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.


 
Old September 21st, 2004, 09:02 AM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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 :-)
 
Old September 21st, 2004, 09:15 AM
Authorized User
 
Join Date: Feb 2004
Location: , , .
Posts: 55
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 ?





Similar Threads
Thread Thread Starter Forum Replies Last Post
re: color change jack_in_black ASP.NET 2.0 Professional 0 July 11th, 2006 07:24 AM
Rotating shape in VBA (not center of shape) Piblon Excel VBA 3 April 13th, 2006 04:04 AM
change link color swastikagaur Classic ASP Basics 1 March 11th, 2005 10:35 PM
Color change possability? rolandatem VB How-To 2 November 19th, 2004 03:52 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.