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 Reply

2335

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.bgColo r, myobject.bgColo r.value, myobject.attrib utes['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
getComputedStyl e 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>comput ed style</title>
<script type="text/javascript">
function getComputedCSSV alue (element, cssPropertyName ) {
var defaultView;
if ((defaultView = document.defaul tView) &&
defaultView.get ComputedStyle) {
return defaultView.get ComputedStyle(e lement, '')[cssPropertyName];
}
else if (element.curren tStyle) {
return element.current Style[cssPropertyName];
}
}

function doTest (elementIds) {
for (var i = 0; i < elementIds.leng th; i++) {
var element = document.getEle mentById(elemen tIds[i]);
if (element) {
output('p', 'computed background-color: ' +
getComputedCSSV alue(element, 'backgroundColo r'));
}
}
}

function output (tagName, text) {
var element = document.create Element(tagName );
element.appendC hild(document.c reateTextNode(t ext));
document.body.a ppendChild(elem ent);
}

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

<h1>getComputed Style test</h1>

<p id="p1">Kibolog y 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.b ackgroundColor

--

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

1477

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> item with id 235 <input type=submit ... NAME=add235 ID=add235>

PHP

1203

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

5784

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 pressed it removes the check but does not re-hide the submit <div> bit. The way i see it, I have 3 options: 1) To simply remove the clear for button. 2) To exclude the said checkbox from the CLEAR button function. 3) To have the CLEAR button run...

Javascript

3460

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 background. I don't want the user to be directed to that page. the only way I thought I could do it is in ajax is to call the jsp with the parameter something like calling req.open("GET","insert.jsp?param="document.form.input.value1+"&param2=...,true) ...

Javascript

2241

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 submit button is pressed it just disables the button and does not submit the data. Any idea? <script type="text/javascript" src="<?=$config->getKey('Site_URL')."js/AJAX.js"?>"></script> <form name="EditUser" method="post" accept="text/plain"...

Javascript

2892

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 and some transactional database processes are taken based on the inputs. My problem is, users may think that the button click did not work, so they can click it again and again or they can refresh the all page by pressing

C# / C Sharp

1795

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 with 4 checkboxes, a submit button, and a cancel button. When the user clicks submit, the page should build the URL, and submit the form, as long as one or more boxes is checked. When the user clicks cancel, they should be redirected back to...

Javascript

1887

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 the regular form, inputs, etc., in html. I seem to be having trouble with finding how to change the action for the asp.net form control to a different url and the action defaults to the same page that the form is on. It seems very confusing since...

ASP.NET

2422

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 correctly but in internet explorer incorrect later set value attribute to " " so that this button is shown correctly in ie browser with this work button is shown in ie correctly but in firefox is shown repeated what do i so that...

HTML / CSS

8807

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8466

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8584

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7299

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5615

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4144

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4290

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

2701

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

1912

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP