Menu
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
Alan
<!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;
}
<i> </i> #btn:hover {
<i> </i> background-color: #0000ff;
<i> </i> }
<i> </i> /*]]>*/
<i> </i> </style>
<i> </i></head>
<i> </i><body>
<i> </i> <input type="button" id="btn" value="Hello, World!" />
<i> </i></body>
</html><!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>[i]Originally posted by storeya [/i][B]All you need to do now is change the [font=courier]color[/font] 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):
I would also like to change the button text colour as the background changes.[/B][/QUOTE]
<!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>[i]Originally posted by storeya [/i]I would recommend checking the
[B]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?[/B][/QUOTE]
backgroundColorfontSize<div style="position: fixed; top: 50px; left: 230px;">foo</div>[i]Originally posted by storeya [/i]That sounds about right.
[B]Your obviously a Gecko fan[/B][/QUOTE]
[i]Originally posted by storeya [/i]What version are you referring to? Possibly Netscape 4.x? Either way, Mozilla is better.
[B]but after 12 weeks on a web course I feel a bit disappointed with Netscape.[/B][/QUOTE]
[i]Originally posted by storeya [/i]It can. You need to get the plug-ins.
[B]I was astounded that it could not play simple wav files, video[/B][/QUOTE]
[i]Originally posted by storeya [/i]It can do that with ease. Using CSS or deprecated attributes possibly.
[B]accept some formatting (eg cell border colours)[/B][/QUOTE]
[i]Originally posted by storeya [/i]The fact that IE displays [font=courier]alt[/font] text is [b]incorrect[/b]. The text defined in the [font=courier]alt[/font] attribute is supposed to be for [i]alt[/i]ernate content, and is not supposed to be tooltip text. That is what the [font=courier]title[/font] attribute is for.
[B]display alt text like IE does without the need to get a plugin.[/B][/QUOTE]
[i]Originally posted by storeya [/i]The latest version of?
[B]I had downloded the latest version which concerned me even more?[/B][/QUOTE]
[i]Originally posted by storeya [/i]Preferences for what?
[B]I tried preferences but could not see much in there.[/B][/QUOTE]
[i]Originally posted by storeya [/i]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).
[B]I expect such a program to work out of the box anyway.[/B][/QUOTE]
0.1.9 — BETA 6.2