469,267 Members | 1,643 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,267 developers. It's quick & easy.

Brighter / color inversion on mouse over

Hi guys,

I have a hard problem :) I have the following situation:

<span onmouseover = "SelectionEffect()">
<div style="width: 50px; height: 50px;
background-color:#FFE4E1"></div>
</span>
How can I code SelectionEffect() to have that when the mouse hover the
span the background color of the div becomes brigher, whatever color it
is?

Or perhaps even a color inversion (not R, not B, not G) within the span
would do (I want one "feels" he is moving over some area).

-Pam

Aug 24 '06 #1
14 2821
wrote on 24 aug 2006 in comp.lang.javascript:
I have a hard problem :) I have the following situation:

<span onmouseover = "SelectionEffect()">
<div style="width: 50px; height: 50px;
background-color:#FFE4E1"></div>
</span>

How can I code SelectionEffect() to have that when the mouse hover the
span the background color of the div becomes brigher, whatever color it
is?
No need to put a span around your div.

<div
onmouseover = "this.style.backgroundColor='#fff'"
onmouseout = "this.style.backgroundColor='#ffe4e1'"
style="width:50px;height:50px;background-color:#ffe4e1">
Content
</div>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Aug 24 '06 #2

Evertjan. ha scritto:
<div
onmouseover = "this.style.backgroundColor='#fff'"
onmouseout = "this.style.backgroundColor='#ffe4e1'"
style="width:50px;height:50px;background-color:#ffe4e1">
Content
</div>
Thanks Evertjan. But I need a solution that work *whatever color it
is*, and not for a given specific color.

The cells I am considering can be of *any* color and I need a function
that works
whatever color it is. So the processimg must necessarily involve the
background color that is used within the span. That's why I was
suggesting a simple color inversion on the RGB components, althought I
do not know how to write in javascript :)

No need to put a span around your div.
I know. It's an extreme simplification of my situation. I need it
because
there are several events attached to it that I am controlling, and
several DIVs within the Span.

-Pam
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Aug 24 '06 #3
pa***********@libero.it wrote:
I have a hard problem :) I have the following situation:
<span onmouseover = "SelectionEffect()">
<div style="width: 50px; height: 50px;
Span elements cannot contain div elements in HTML. You should probably
pay a visit to http://validator.w3.org/
How can I code SelectionEffect() to have that when the mouse hover the
span the background color of the div becomes brigher, whatever color it
is?
You'd need to loop over the elements (getElementsByTagName(*)), find
their background colour (in computed style), alter the value per some
algorithum and then set it with the .style.backgroundColor property.

Aug 24 '06 #4

David Dorward ha scritto:
Span elements cannot contain div elements in HTML. You should probably
pay a visit to http://validator.w3.org/
Thanks David, good suggestion!

It is currently working with span, but to be safe for future I will
replace with a DIV:

<div onmouseover = "SelectionEffect()">
<div style="width: 50px; height: 50px;
background-color:#FFE4E1"></div>
<br>
<div style="width: 80px; height: 50px; background-color:#AF00A1"></div>

....
</div>
You'd need to loop over the elements (getElementsByTagName(*)), find
their background colour (in computed style), alter the value per some
algorithum and then set it with the .style.backgroundColor property.
:) I know the theory: my problem is with writing the actual code !!

-Pam

Aug 24 '06 #5
Ok I wil start with something simple...

I will try to change just the border of an inner DIV. Here is my first
attempt. Of course does not want to work and I have no clue where is
the problem. hmmm it's really impossible to work this blindly... Any
help?

-Pam

-----------------------------------------------------

<body>

<script type="text/javascript">

var PreviousStyle; // i want a shared var

function mOver(MyDiv)
{
PreviousStyle = MyDiv.style.border-style;
MyDiv.style.border-style = "double";
}
function mOut(MyDiv)
{
MyDiv.style.border-style = PreviousStyle;
}

</script>
<div id="Square1">
<div style="width: 50px; height: 50px; background-color:green"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>

<br />

<div id="Square2" >
<div style="width: 50px; height: 50px; background-color:red"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>

</body>

Aug 24 '06 #6
pa***********@libero.it wrote:
David Dorward ha scritto:
>Span elements cannot contain div elements in HTML. You should
probably pay a visit to http://validator.w3.org/

Thanks David, good suggestion!

It is currently working with span,
This is one of the cases where "working" can only be applied as a
result of superficial testing, inappropriate scripting or not
appreciating what is actually happening. Consider what the HTML parser
is going to do with your mark-up. It finds an opening SPAN tag, so it
creates a SPAN element in the DOM, it then finds an opening DIV tag,
but a DIV element cannot be a child or a SPAN element so either it is
going to break that rule and make it a child of the SPAN, or it is
going to assume the SPAN is finished and make the new DIV element the
element after the SPAN in the DOM (leaving the SPAN empty, and so
possibly difficult to interact with using a mouse). The practical
result of this is that an element that you though was contained in a
SPAN may actually be outside of it, and this is only the case in
browsers that use one particular strategy for error correction.

Richard.

Aug 24 '06 #7
pamelaflue...@libero.it wrote:
<snip>
MyDiv.style.border-style = "double";
<snip>

Because the dash is the subtraction (or unary negation) operator in
javascript it cannot be used in Identifiers, and so will not be used in
DOM object property names. The general rule for translating CSS
property names into - style - object property names is that the
character following the dash is make uppercase and the dash is removed,
so:-

border-style

- becomes:-

borderStyle

- for the property name in the style object. There are a few exceptions
to this general rule, partly where the above would result in property
names becoming keyword in javascript (such as "float").

Richard.

Aug 24 '06 #8
This is one of the cases where "working" can only be applied as a
not
appreciating what is actually happening.
Precisely

Consider what the HTML parser
is going to do with your mark-up. It finds an opening SPAN tag, so it
creates a SPAN element in the DOM, it then finds an opening DIV tag,
but a DIV element cannot be a child or a SPAN element so either it is
going to break that rule and make it a child of the SPAN, or it is
going to assume the SPAN is finished and make the new DIV element the
element after the SPAN in the DOM (leaving the SPAN empty, and so
possibly difficult to interact with using a mouse). The practical
result of this is that an element that you though was contained in a
SPAN may actually be outside of it, and this is only the case in
browsers that use one particular strategy for error correction.
Thanks! This helps a lot understanding.

-P

Aug 24 '06 #9
Because the dash is the subtraction (or unary negation) operator in
javascript it cannot be used in Identifiers, and so will not be used in
DOM object property names. The general rule for translating CSS
property names into - style - object property names is that the
character following the dash is make uppercase and the dash is removed,
so:-

border-style

- becomes:-

borderStyle

- for the property name in the style object. There are a few exceptions
to this general rule, partly where the above would result in property
names becoming keyword in javascript (such as "float").

Thanks. *Very* useful to know that.

Made the correction but still there must be some other problem. Does
not work. :(
<body>
<script type="text/javascript">

var PreviousStyle;

function mOver(MyDiv)
{
PreviousStyle = MyDiv.style.border-style;
MyDiv.style.BorderStyle = "double";
}
function mOut(MyDiv)
{
MyDiv.style.BorderStyle = PreviousStyle;
}

</script>
<div id="Square1">
<div style="width: 50px; height: 50px; background-color:green"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>

<br />

<div id="Square2">
<div style="width: 50px; height: 50px; background-color:red"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>
</body>

Aug 24 '06 #10
pamelaflue...@libero.it wrote:
>... . The general rule for translating CSS
property names into - style - object property names is that the
character following the dash is make uppercase and the dash is
removed, so:-

border-style

- becomes:-

borderStyle
<snip>
Made the correction but still there must be some other problem.
Does not work. :(
<snip>
MyDiv.style.BorderStyle = "double";
<snip>

You have uppercased the initial letter; it is only the letters
following a dash that need to be uppercase.

MyDiv.style.borderStyle = "double";

Richard.

Aug 24 '06 #11
Yes Richard, sorry about that. My first attempt was pasting Your code.
Then I tried Uppercase (just in case!). Still no luck (?) :(

here it is the fellow:

<script type="text/javascript">

var PreviousStyle;

function mOver(MyDiv)
{
PreviousStyle = MyDiv.style.border-style;
MyDiv.style.borderStyle = "double";
}
function mOut(MyDiv)
{
MyDiv.style.borderStyle = PreviousStyle;
}

</script>
<div id="Square1" onclick="Cliked(This)" >
<div style="width: 50px; height: 50px; background-color:green"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>

<br />

<div id="Square2">
<div style="width: 50px; height: 50px; background-color:red"
onmouseover = "mOver(this)" onmouseout = "mOut(this)" ></div>
</div>
Richard Cornford ha scritto:
pamelaflue...@libero.it wrote:
... . The general rule for translating CSS
property names into - style - object property names is that the
character following the dash is make uppercase and the dash is
removed, so:-
>
border-style
>
- becomes:-
>
borderStyle
<snip>
Made the correction but still there must be some other problem.
Does not work. :(
<snip>
MyDiv.style.BorderStyle = "double";
<snip>

You have uppercased the initial letter; it is only the letters
following a dash that need to be uppercase.

MyDiv.style.borderStyle = "double";

Richard.
Aug 24 '06 #12
Ah OK I got I. It works now! Beautiful

Thanks, Richard. You are my hero!

-pam

Richard Cornford ha scritto:
pamelaflue...@libero.it wrote:
... . The general rule for translating CSS
property names into - style - object property names is that the
character following the dash is make uppercase and the dash is
removed, so:-
>
border-style
>
- becomes:-
>
borderStyle
<snip>
Made the correction but still there must be some other problem.
Does not work. :(
<snip>
MyDiv.style.BorderStyle = "double";
<snip>

You have uppercased the initial letter; it is only the letters
following a dash that need to be uppercase.

MyDiv.style.borderStyle = "double";

Richard.
Aug 24 '06 #13
So... really this stuff is also case-sensitive: can't believe it !
This is really unfriendly!

-pam

pamelaflue...@libero.it ha scritto:
Ah OK I got I. It works now! Beautiful

Thanks, Richard. You are my hero!

-pam

Richard Cornford ha scritto:
pamelaflue...@libero.it wrote:
>... . The general rule for translating CSS
>property names into - style - object property names is that the
>character following the dash is make uppercase and the dash is
>removed, so:-

border-style

- becomes:-

borderStyle
<snip>
Made the correction but still there must be some other problem.
Does not work. :(
<snip>
MyDiv.style.BorderStyle = "double";
<snip>

You have uppercased the initial letter; it is only the letters
following a dash that need to be uppercase.

MyDiv.style.borderStyle = "double";

Richard.
Aug 24 '06 #14
pamelaflue...@libero.it wrote:
So... really this stuff is also case-sensitive
Everything in javascript is case-sensitive.
>: can't believe it !
This is really unfriendly!
<snip>

If a dynamic language like javascript attempted to be case-insensitive
(at least as far as property names are concerned) that would impose a
considerable run-time overhead.

Richard.

Aug 24 '06 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Carla | last post: by
12 posts views Thread by Thomas Matthews | last post: by
15 posts views Thread by | last post: by
19 posts views Thread by wmanzo | last post: by
3 posts views Thread by lancered | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.