Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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?


Reply With Quote
  #2 (permalink)  
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>

Reply With Quote
  #3 (permalink)  
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!
Reply With Quote
  #4 (permalink)  
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>

Reply With Quote
  #5 (permalink)  
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


Reply With Quote
  #6 (permalink)  
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
Reply With Quote
  #7 (permalink)  
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....

Reply With Quote
  #8 (permalink)  
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.


Reply With Quote
  #9 (permalink)  
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 :-)
Reply With Quote
  #10 (permalink)  
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 ?

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 01:04 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.