Background color of inputs types button and submit, how to access

C

coolsti

I have been playing around with this task for some hours now, and can't
seem to find a way.

I have an assortment of buttons on a web page, which have their background
colors defined via style classes. I would like to define one set of
rollover functions that would give the effect of darkening (or perhaps
lightening) the background color when the mouse hovers over the button.

That is, I would like a javascript function that can get a hold of the
button's background color assigned via the class, and then just add or
subtract a standard color value. This way, the effect would work no matter
what the original button color was.

Can this be done? I am trying to access the original button color in
various ways, but can't seem to get a hold of it (property does not exist,
or attribute is null, etc. etc.).

I guess what I am trying to do is to avoid having to define extra "dark"
classes for each of the classes used by the buttons on the page. Instead,
I would like to just manipulate directly the background color, if this is
possible.

Thanks for any tips,

- steve
 
M

Martin Honnen

coolsti wrote:

I have an assortment of buttons on a web page, which have their background
colors defined via style classes. I would like to define one set of
rollover functions that would give the effect of darkening (or perhaps
lightening) the background color when the mouse hovers over the button.

That is, I would like a javascript function that can get a hold of the
button's background color assigned via the class, and then just add or
subtract a standard color value. This way, the effect would work no matter
what the original button color was.

Can this be done? I am trying to access the original button color in
various ways, but can't seem to get a hold of it (property does not exist,
or attribute is null, etc. etc.).

I guess what I am trying to do is to avoid having to define extra "dark"
classes for each of the classes used by the buttons on the page. Instead,
I would like to just manipulate directly the background color, if this is
possible.
Click to expand...

It is difficult, you can get hold of a CSS value but as a CSS color
value can be given in many different ways (e.g. a color name like
'white', an rgb triple like rgb(255, 255, 255), a hex value like
#ffffff) it is not that easy to take that value and manipulate it.
 
C

coolsti

It is difficult, you can get hold of a CSS value but as a CSS color
value can be given in many different ways (e.g. a color name like
'white', an rgb triple like rgb(255, 255, 255), a hex value like
#ffffff) it is not that easy to take that value and manipulate it.
Click to expand...

Hi Martin,

thanks for the reply. I don't fear the part about manipulating the value,
I could do some trick with that. What I can't figure out is how to get a
hold of the value, and then perhaps how to set the value. Can you help
with that? Like I said, I tried various things but I think my knowledge of
syntax here is lacking. For example, if we call the button object as
"myobject" for the sake of example, I tried

myobject.bgColor, myobject.bgColor.value, myobject.attributes['bgColor']

and all possible variants (except of course the correct one ;-).

Any help appreciated.

- steve
 
M

Martin Honnen

coolsti wrote:

I don't fear the part about manipulating the value,
I could do some trick with that. What I can't figure out is how to get a
hold of the value,
Click to expand...

IE (since IE 5) has currentStyle, Mozilla and Opera have
getComputedStyle as used here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>computed style</title>
<script type="text/javascript">
function getComputedCSSValue (element, cssPropertyName) {
var defaultView;
if ((defaultView = document.defaultView) &&
defaultView.getComputedStyle) {
return defaultView.getComputedStyle(element, '')[cssPropertyName];
}
else if (element.currentStyle) {
return element.currentStyle[cssPropertyName];
}
}

function doTest (elementIds) {
for (var i = 0; i < elementIds.length; i++) {
var element = document.getElementById(elementIds);
if (element) {
output('p', 'computed background-color: ' +
getComputedCSSValue(element, 'backgroundColor'));
}
}
}

function output (tagName, text) {
var element = document.createElement(tagName);
element.appendChild(document.createTextNode(text));
document.body.appendChild(element);
}

window.onload = function (evt) {
doTest(['p1', 'b1']);
};
</script>
<style type="text/css">
#p1 {
background-color: lime;
}
#b1 {
background-color: #CCCCCC;
}
</style>
</head>
<body>

<h1>getComputedStyle test</h1>

<p id="p1">Kibology for all.</p>

<div>
<input type="button" id="b1" value="example button">
</div>

</body>
</html>

But as said, you will have a lot of work then as the values returned are
not normalized, in the above example IE 6 shows

computed background-color: lime

computed background-color: #cccccc

while Mozilla 1.7 shows

computed background-color: rgb(0, 255, 0)

computed background-color: rgb(204, 204, 204)

while Opera 8 shows

computed background-color: #00ff00

computed background-color: #cccccc


As for setting values you only need to assign to
element.style.backgroundColor
 
C

coolsti

On Fri, 20 May 2005 16:55:14 +0200, Martin Honnen wrote:

Thanks Martin,

I was not aware of this way of getting to styles, I think it is what I
will need.

I am not too worried about the interpretation of colors, I will just have
to try it. For this application, which is internal to my company, the
number of browsers is limited (mostly IE, sometimes Firefox), and the
colors of the buttons I am dealing with are ones that I set in style sheet
classes. So if I have these defined with #ffffff type notation, and don't
coincide with a "known name", maybe things will be easier. No matter what
format the returned value is in, as long as it is numeric of some sorts, I
can make an algorithm to lighten or darken it.

Thanks again!

- steve
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to change background color to fit shape 1
How to position the *tooltip* comment on these buttons? 9
How to explain buttons 13
Shift Button from Left to right, coding help 1
How to use PDF-lib and how to center each line of texts on the page? 1
How can I arrange a series of radio buttons? 2
How to set background color of <select> 2
Im having trouble containing a title an image and a button 2

Members online

Total: 40 (members: 1, guests: 39)
Robots: 201

Forum statistics

Threads
473,764
Messages
2,569,566
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top