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

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

Jul 23 '05 #1

Subscribe Post Reply

2313

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.

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.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2

coolsti

On Fri, 20 May 2005 14:57:08 +0200, Martin Honnen wrote:

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.

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

Jul 23 '05 #3

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,

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[i]);
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

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #4

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

Jul 23 '05 #5

Similar topics

forms with dynamic inputs

by: WindAndWaves | last post by:

Hi Gurus I have a php page with a form in it, that is along the lines of: <form...> item with id 234 <input type=submit ... NAME=add234 ID=add234> <input type=hidden NAME=add234 ID=234>...

PHP

Problem with text inputs

by: Leszek | last post by:

Hi I've got a proble because text inputs made by function are outside frameset and below submit button. What should I do to make it work properly? Here is code function zmiana(ile){

Javascript

Clear form button to call java onclick function...

by: plumba | last post by:

Ok, another query.... I have a checkbox at the bottom of my form which when checked unhides a <div> block which displays the submit button. The problem I have is when the clear form button is...

Javascript

submit a form in the background using ajax

by: biggie3384 | last post by:

Is it possible to submit a form using ajax? I have a form with sever inputs and when submited, it writes the input values in a jsp file. I would like to submit the form using ajax in the...

Javascript

Submit Form after disabling submit button

by: arggg | last post by:

I created a submit form that calls a javascript:AjAX Command that will call the data and submit it without have the page refresh. This works perfect in Firefox however in IE and Opera when the...

Javascript

preventing users from submitting inputs twice

by: Ned White | last post by:

Hi All, Im my c# web project, users click a submit button for credit card payment process. On the web server side ( on ButtonClick_Event) the user's input(name,date,cc number etc.) is processed...

C# / C Sharp

Method being called on wrong button in FireFox

by: TheSouthLondonSlasher | last post by:

Thank you in advance to anyone who may be able to help. This is my first attempt at JavaScript, so I apologize if I've done something blatantly stupid in the below code. Basically, I have a form...

Javascript

Using Asp.net web form and controls .vs html form and inputs

by: Ellie | last post by:

I am just starting to develop in asp.net and I have somewhat of a familiarity with asp 3.0. I am comfortable with asp 3.0 for my server side processing and javascript for client side. I also like...

ASP.NET

background-image is shown in firefox and internet explorer diffrently

by: oranoos3000 | last post by:

hi i'd like to set background-image of submit button to a picture with gif extension i set style="background-color:url(images/back.gif)" in input tag with this work this button in firefox is shown...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing