Button colour

admin · Jan 9, 2008

Hi, 
 
Does anyone know how to change the colour of a standard button from boring grey to another colour when using the onMouseOver and onMouseOut events. 
 
An example would be great 
 
AlanIn Gecko (Mozilla, K-Melon, Galeon, etc.) you can use pure CSS to do this by using the hover pseudo-class like this, for example:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>untitled</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> 
<style type="text/css"> 
/*<![CDATA[*/ 
#btn { 
background-color: #d4d0c8; 
} 
 
#btn:hover { 
background-color: #0000ff; 
} 
/*]]>*/ 
</style> 
</head> 
<body> 
<input type="button" id="btn" value="Hello, World!" /> 
</body> 
</html>However, IE (and other incredibly lame browsers) only support hover for <a> elements. In that case, you'd have to use JavaScript and do something like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>untitled</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> 
</head> 
<body> 
<input type="button" id="btn" value="Hello, World!" onmouseover="style.backgroundColor='#0000ff';" onmouseout="style.backgroundColor='#d4d0c8';" /> 
</body> 
</html>Thanks, 
 
The IE example is exactly what I am looking for. 
 
I would also like to change the button text colour as the background changes. 
 
Any ideas? 
 
Where do I look for a full list of modifiable attributes ( such as style.backgroundColor) of not just buttons but other objects as well, or can generalised terms be used on various objects? 
 
I will be making reference to your support in my University web assignment. 
 
AlanOriginally posted by storeya 
I would also like to change the button text colour as the background changes.All you need to do now is change the color CSS property of the button. However, once you want to change more and more properties of the button it usually makes sense to make another class and then simply switch the class of the element. Although, if you only want one more property to be changed, I don't see too much of a problem with that. Here's an example which changes the background-color and color of the element (in this case, a button):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>untitled</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" /> 
</head> 
<body> 
<input type="button" id="btn" value="Hello, World!" onmouseover="style.backgroundColor='#0000ff';style.color='#ff0000';" onmouseout="style.color='#000000';style.backgroundColor='#d4d0c8';" /> 
</body> 
</html>Originally posted by storeya 
Where do I look for a full list of modifiable attributes ( such as style.backgroundColor) of not just buttons but other objects as well, or can generalised terms be used on various objects?I would recommend checking the CSS1 specification (<a class="postlink" href="http://www.w3.org/TR/REC-CSS1">http://www.w3.org/TR/REC-CSS1</a>). Find the property that you'd like to apply to one of your elements, and then to script the property from JavaScript, all you do is convert the letter right after the hyphen in the property (if there is one) to uppercase. So just like in my example, we're changing the background-color therefore, to script the property from JavaScript, it becomes:backgroundColor Then for example, font-size would become:fontSizeGood luck with everything.Thanks again. 
The CSS spec looks good. 
 
What about the style function (excuse my terminology). 
 
Is there another list detailing functions (like style) to use on properties such as backgroundColor 
 
 
 
Regards, 
 
AlanYou're welcome. In this case, it would be called the style property since it is a property of the HTMLElement objects, in this specific instance, an HTMLInputElement object. Anything else is kind of irrelivant in relation to changing the appearance (style) of an element since CSS is what you really want to be using to style elements. However, you can check JavaScript Central (<a class="postlink" href="http://devedge.netscape.com/central/javascript/">http://devedge.netscape.com/central/javascript/</a>) at Netscape DevEdge for more properites and methods you may be interested in.Hello again, 
 
Just to let you know that I've submitted my web assignment and mentioned you within the bibliography. 
Thanks! 
 
Any idea where I can pickup the javascript for one of those hyperlinks that automatically follows you as you browse down a page? 
 
regards, 
 
AlanSounds excellent. Well, as for the script, guess what? You don't need JavaScript for that. All you'd need is pure CSS using position: fixed. This, of course, works perfectly fine in Gecko, but fails in IE and you'll have to use this hack (<a class="postlink" href="http://devnull.tagsoup.com/fixed/">http://devnull.tagsoup.com/fixed/</a>) to get it working correctly. Here's a simple example:<div style="position: fixed; top: 50px; left: 230px;">foo</div>Hi, 
 
Fastest reply Ive ever had ! 
 
Your obviously a Gecko fan, but after 12 weeks on a web course I feel a bit disappointed with Netscape. 
 
I was astounded that it could not play simple wav files, video, accept some formatting (eg cell border colours), display alt text like IE does without the need to get a plugin. 
 
I had downloded the latest version which concerned me even more? 
 
I tried preferences but could not see much in there. 
 
I expect such a program to work out of the box anyway. 
 
What do you think? 
 
AlanOriginally posted by storeya 
Your obviously a Gecko fanThat sounds about right. Gecko (<a class="postlink" href="http://www.mozilla.org/newlayout/">http://www.mozilla.org/newlayout/</a>) is excellent, if you're not yet aware it is a rendering engine in which powers browsers such as Mozilla, Netscape 6+, K-Meleon, Galeon and more.Originally posted by storeya 
but after 12 weeks on a web course I feel a bit disappointed with Netscape.What version are you referring to? Possibly Netscape 4.x? Either way, Mozilla is better. Originally posted by storeya 
I was astounded that it could not play simple wav files, videoIt can. You need to get the plug-ins.Originally posted by storeya 
accept some formatting (eg cell border colours)It can do that with ease. Using CSS or deprecated attributes possibly.Originally posted by storeya 
display alt text like IE does without the need to get a plugin.The fact that IE displays alt text is incorrect. The text defined in the alt attribute is supposed to be for alternate content, and is not supposed to be tooltip text. That is what the title attribute is for.Originally posted by storeya 
I had downloded the latest version which concerned me even more?The latest version of? Originally posted by storeya 
I tried preferences but could not see much in there.Preferences for what?Originally posted by storeya 
I expect such a program to work out of the box anyway.It does work out of the box. However, I suppose you do have to do a little bit more work to get plug-ins and the the like working properly, but it really isn't that big of a deal if you ask me and is actually well worth it since Mozilla is such a great browser. You should try installing some extensions or themes and see how incredibly easy they are to get working (not to mention extensions can add even more functionality to an already very functional browser).Hi, 
 
Can you help me further with the sliding hyperlink. 
I looked at the hack but couldnt understand it. 
 
An example for IE5 and above would be great. 
 
AlanI believe there is an example on the link I provided Ã¢Â€Â” check it out.

Button colour

admin

Administrator