Color computation - Javascript

pamelafluente

Hi,

If I have:

<div style="backgrou nd:anyColorHere "Hi </div>

where anyColorHere is any hex string that represent a valid color.

How can I invert that background color "anyColorHe re" ? Can you point
(or suggest) a script
that does that in a proper way ?

-P

Sep 9 '06 #1

Subscribe Reply

6917

1
2
3
>
Last »

Bart Van der Donck

pa***********@l ibero.it wrote:

<div style="backgrou nd:anyColorHere "Hi </div>
where anyColorHere is any hex string that represent a valid color.
How can I invert that background color "anyColorHe re" ? Can you point
(or suggest) a script that does that in a proper way ?

<html>
<head>
<script type="text/JavaScript">
function bla(){
var b = document.getEle mentsByTagName( 'body')[0];
var bg = b.style.backgro undColor;
alert('present background is '+b.style.backg roundColor)
alert('present background will be change into inversed RGB color')
var oldCol = bg.split('(')[1].split(')')[0].split(',');
var newCol = new Array()
for(var i=0;i<oldCol.le ngth;i++){
newCol[i] = 255-Number(oldCol[i]);
}
b.style.backgro undColor
= 'rgb('+newCol[0]+','+newCol[1]+','+newCol[2]+')';
alert('new background is '+b.style.backg roundColor)
}
onload=bla
</script>
</head>
<body style="backgrou nd-color: rgb(0,204,255)" >
</body>
</html>

Soli Deo Gloria:
http://www.codingforums.com/archive/...p?t-47335.html

Hex/RGB converter:
http://www.google.com/search?q=conve...rgb+javascript

--
Bart

Sep 9 '06 #2

Evertjan.

wrote on 09 sep 2006 in comp.lang.javas cript:

If I have:

<div style="backgrou nd:anyColorHere "Hi </div>

where anyColorHere is any hex string that represent a valid color.

How can I invert that background color "anyColorHe re" ? Can you point
(or suggest) a script that does that in a proper way ?

try:

<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcd ef#'
var t2 = 'fedcba98765432 10#'
x.style.backgro undColor =
x.style.backgro undColor.replac e( /./gi,
function (s) {
return t2.charAt(t1.in dexOf(s));
}
)
}
</script>

<div style='backgrou nd-color:#c0c0c0;w idth:50px;'
onclick='invert Me(this)'>
Click me to invert my background</div>
<br><br>
<div style='backgrou nd-color:#fe3456;w idth:50px;'
onclick='invert Me(this)'>
Click me to invert my background</div>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Sep 9 '06 #3

pamelafluente

x.style.backgro undColor.replac e( /./gi,

function (s) {
return t2.charAt(t1.in dexOf(s));

....

I replay here to you both, Bart and Evertjan.

Both solution works fine.

Bart is relying, as far as I understand, on the fact that
color is defined as rgb(xx,yy,zz)". Actually I assumed in my
question an hex string. But it is nice indeed to have this method also.

The script proposed by Evertjan is a precide reply to my question
and I feel the logic it implements is quite smart. It has also
the advantage to shield from then many complexities of a possible
parsing.
I like it a lot.

btw What is this : <div style='backgrou nd-color:#c0c0c0;w idth:50px;'
onclick='invert Me(this)'Click me to invert my background</div>

in IE it does displays nothing. Is this code to test some other
browser?
-P

Sep 9 '06 #4

Bart Van der Donck

pa***********@l ibero.it wrote:

[...]
Bart is relying, as far as I understand, on the fact that
color is defined as rgb(xx,yy,zz)". Actually I assumed in my
question an hex string.
[...]

Yes, you'ld need to convert from hex to rgb (and back if necessary).
That shouldn't be too tough; see hyperlink at the end of my previous
post.

--
Bart

Sep 9 '06 #5

Evertjan.

wrote on 09 sep 2006 in comp.lang.javas cript:

> x.style.backgro undColor.replac e( /./gi,
function (s) {
return t2.charAt(t1.in dexOf(s));
...

I replay here to you both, Bart and Evertjan.

Both solution works fine.

Bart is relying, as far as I understand, on the fact that
color is defined as rgb(xx,yy,zz)". Actually I assumed in my
question an hex string. But it is nice indeed to have this method also.

The script proposed by Evertjan is a precide reply to my question
and I feel the logic it implements is quite smart. It has also
the advantage to shield from then many complexities of a possible
parsing.
I like it a lot.

Inverting all seperate hexadecimal characters
will give a inversion of the total number,
while the # is replaced by itself.

Regular expression is IMHO preferrable to JS looping.

btw What is this : <div style='backgrou nd-color:#c0c0c0;w idth:50px;'
onclick='invert Me(this)'Click me to invert my background</div>

It seems you have to learn HTML and CSS before you try Javascript.
invertMe() is the function
in the <script type='text/javascript'>... </script>

Did you run my code in a test.html ?

in IE it does displays nothing.

Oh, but it does.
Did you put my code in a seperate test.html as I expect you to do?
Or did you put other lines in it? Don't.

Is this code to test some other
browser?

No, IE works fine.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Sep 9 '06 #6

pamelafluente

It seems you have to learn HTML and CSS before you try Javascript.

invertMe() is the function
in the <script type='text/javascript'>... </script>

Did you run my code in a test.html ?

in IE it does displays nothing.

Oh, but it does.
Did you put my code in a seperate test.html as I expect you to do?
Or did you put other lines in it? Don't.

Is this code to test some other
browser?

No, IE works fine.

:)) Hi Evertjan ,

I tried pasting it in my code:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<div style="position : absolute; width: 100px; height: 100px; z-index:
1; background= #aaccdd" id="layer1">
 </div>

<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcd ef#'
var t2 = 'fedcba98765432 10#'
x.style.backgro undColor =
x.style.backgro undColor.replac e( /./gi,
function (s) {
return t2.charAt(t1.in dexOf(s));
}
)
}

</script>

<div style='backgrou nd-color:#c0c0c0;w idth:50px;'
onclick='invert Me(this)'>
1. Click me to invert my background</div>
<br><br>
<div style='backgrou nd-color:#fe3456;w idth:50px;'
onclick='invert Me(this)'>
2. Click me to invert my background</div>
</body>

</html>
I had the impression there was a block missing (perhaps was somehow
covered).

Is "background " the same as "background-color" I see you use the
latter. I always used the first. Is this a mistake?

-P

Sep 9 '06 #7

Evertjan.

wrote on 09 sep 2006 in comp.lang.javas cript:

>It seems you have to learn HTML and CSS before you try Javascript.
invertMe() is the function
in the <script type='text/javascript'>... </script>

Did you run my code in a test.html ?

in IE it does displays nothing.

Oh, but it does.
Did you put my code in a seperate test.html as I expect you to do?
Or did you put other lines in it? Don't.

Is this code to test some other
browser?

No, IE works fine.

:)) Hi Evertjan ,

I tried pasting it in my code:

You should not, until you tested my code for yourself AS IS.
Only if you agree it "works", proceed.
Talking about my code "not working" in your application will not be
usefull before that.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<div style="position : absolute; width: 100px; height: 100px; z-index:
1; background= #aaccdd" id="layer1">
 </div>

Why this? perhaps it covers the following, I did not test that.
Leave the above div away!

>
<script type='text/javascript'>
function invertMe(x){
var t1 = '0123456789abcd ef#'
var t2 = 'fedcba98765432 10#'
x.style.backgro undColor =
x.style.backgro undColor.replac e( /./gi,
function (s) {
return t2.charAt(t1.in dexOf(s));
}
)
}

</script>

Scripts like thease should be in the <headsection.

>
<div style='backgrou nd-color:#c0c0c0;w idth:50px;'
onclick='invert Me(this)'>
1. Click me to invert my background</div>
<br><br>
<div style='backgrou nd-color:#fe3456;w idth:50px;'
onclick='invert Me(this)'>
2. Click me to invert my background</div>
</body>

</html>
I had the impression there was a block missing (perhaps was somehow
covered).

sorry?

>
Is "background " the same as "background-color" I see you use the
latter. I always used the first. Is this a mistake?

No. Please read up on CSS, this are CSS basics.

CSS "background " is the shortcut for different background properties.

Only use those shortcuts, when you understand CSS completely.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Sep 9 '06 #8

pamelafluente

You should not, until you tested my code for yourself AS IS.

Only if you agree it "works", proceed.

Talking about my code "not working" in your application will not be
usefull before that.

:) I am always sure the code you provide works. My first though is try
to find what I am doing in the wrong way.

Why this? perhaps it covers the following, I did not test that.
Leave the above div away!

Yes I tried without that. It works just fine.

Scripts like thease should be in the <headsection.

Yes I noticed the scripts are sometimes in the head and sometimes in
the
body. But I am not sure what difference it makes. And if there is a
difference
would it also apply to referenced JS files like in
<script language="javas cript" src="someFile.j s"></script?

I had the impression there was a block missing (perhaps was somehow
covered).

sorry?

Yes am talking about my code: The first block (mine) was covering your
first one. I did not expect that: I though your blocks would have just
follow my existing block. But assumed wrong...

No. Please read up on CSS, this are CSS basics.

with masters like you guys in this group every other source is just
useless.
I have visited several group and this one is the most "simpatico"
(dont' know the right translation) !!

Thanks,

-P

Sep 9 '06 #9

Jim Land

Hmmm. Try:

<SCRIPT TYPE="text/javascript">

function showMe(x){
alert('backgrou ndColor = '+ x.style.backgro undColor);
}

</SCRIPT>

<div style='backgrou nd-color:#c0c0c0;w idth:150px;'
onclick='showMe (this)'>
Click me to show my background color
</div>

MSIE shows "#c0c0c0"

FF shows "rgb(192,192,19 2)"

Sep 9 '06 #10