Brighter / color inversion on mouse over

pamelafluente · Aug 24, 2006

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

Evertjan. · Aug 24, 2006

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>

pamelafluente · Aug 24, 2006

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

David Dorward · Aug 24, 2006

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.

pamelafluente · Aug 24, 2006

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>

....

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

pamelafluente · Aug 24, 2006

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>

Richard Cornford · Aug 24, 2006

David Dorward ha scritto:

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.

Richard Cornford · Aug 24, 2006

(e-mail address removed) wrote:

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.

pamelafluente · Aug 24, 2006

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

pamelafluente · Aug 24, 2006

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>

Richard Cornford · Aug 24, 2006

Made the correction but still there must be some other problem.
Does not work.

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.

pamelafluente · Aug 24, 2006

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:

pamelafluente · Aug 24, 2006

Ah OK I got I. It works now! Beautiful

Thanks, Richard. You are my hero!

-pam

Richard Cornford ha scritto:

pamelafluente · Aug 24, 2006

So... really this stuff is also case-sensitive: can't believe it !
This is really unfriendly!

-pam

(e-mail address removed) ha scritto:

Richard Cornford · Aug 24, 2006

[email protected] said:
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.

Color for hover over	1	Jul 30, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Closing an overlay outside the overlay as well	1	Dec 11, 2022
<Button ...> display is fine, except for two things	1	Oct 23, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Setup a portion of html page as scrollable?	25	Jan 7, 2025
Positioning CSS components	1	Nov 16, 2023

Brighter / color inversion on mouse over

pamelafluente

Evertjan.

pamelafluente

David Dorward

pamelafluente

pamelafluente

Richard Cornford

Richard Cornford

pamelafluente

pamelafluente

Richard Cornford

pamelafluente

pamelafluente

pamelafluente

Richard Cornford

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads