Hi guys,
I have a hard problem :) I have the following situation:
<span onmouseover = "SelectionEffec t()">
<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 14  2992 
wrote on 24 aug 2006 in comp.lang.javas cript:
I have a hard problem :) I have the following situation:
<span onmouseover = "SelectionEffec t()">
<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.bac kgroundColor='# fff'"
onmouseout = "this.style.bac kgroundColor='# ffe4e1'"
style="width:50 px;height:50px; background-color:#ffe4e1">
Content
</div>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. ha scritto:
<div
onmouseover = "this.style.bac kgroundColor='# fff'"
onmouseout = "this.style.bac kgroundColor='# ffe4e1'"
style="width:50 px;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)
pa***********@l ibero.it wrote:
I have a hard problem :) I have the following situation:
<span onmouseover = "SelectionEffec t()">
<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 (getElementsByT agName(*)), find
their background colour (in computed style), alter the value per some
algorithum and then set it with the .style.backgrou ndColor property.
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 = "SelectionEffec t()">
<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 (getElementsByT agName(*)), find
their background colour (in computed style), alter the value per some
algorithum and then set it with the .style.backgrou ndColor property.
:) I know the theory: my problem is with writing the actual code !!
-Pam
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.bor der-style;
MyDiv.style.bor der-style = "double";
}
function mOut(MyDiv)
{
MyDiv.style.bor der-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> pa***********@l ibero.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.
pamelaflue...@l ibero.it wrote:
<snip>
MyDiv.style.bor der-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.
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
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.bor der-style;
MyDiv.style.Bor derStyle = "double";
}
function mOut(MyDiv)
{
MyDiv.style.Bor derStyle = 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> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Carla |
last post by:
hi people,
I have a little problem that I can't solve with css and i was
wondering if you could help me.
I have 4 links, I want that when I click/mouseover in the link 1, it
turns to a color a, then when I click/mouseover over the link 2, it
turns to a color b and the link 1 turns to the normal link color
again. (an so with the other links).
Is this possible with CSS?
|
by: Thomas Matthews |
last post by:
Hi,
According to Robert Martin's Dependency Inversion Principle,
http://www.objectmentor.com/resources/articles/dip.pdf,
when there is a need to test the type of an object, the
code inside the "switch cases" should be placed into the
parent class.
However, I am finding that this conflicts with the other
principles -- the objects now must know details about
|
by: |
last post by:
Just about finished with an include modual that allows a user to select
a color. Completely dynamic. all you have to do is include the script and
run the main trigger script.
One problem with the event modual is the fact that it resets events for all
TD's. not sure how to specify to cascade down through just the created
table. Any ideas?
Feel free to use this where ever you wish as long as you give me credit.
this was a few weeks of...
|
by: fernandoronci |
last post by:
Hi,
I've been given the task of mantaining and fixing a website which I
didn't design.
I'm using Internet Explorer 5.5 and 6.x.
Specifically, the problem is that navigation menues (written in
javascript) don't disappear when the mouse moves outside of the area of
the menues (some of the menues are nested two and three levels). As
long as the mouse cursor remains *within* the options of the menues,
the option under the mouse cursor is...
|
by: Martha |
last post by:
When I move my mouse over a hyperlink component, the hyperlink does not
change color.
How do I change the color of a hyperlink when the mouse goes over the
hyperlink?
or
Change the color of a button component when the mouse goes over the button?
I am using Microsfot Visual c#.net Version 7.1.3008
| | |
by: Pucca |
last post by:
How can I tell a mouse right clicks over a listview item that's in a
container panel. I only want to display a popup menu if the user right click
the mouse over an item on the Listview. I don't not want to display this
menu if a node selected on the listview but user right click over the empty
space of the panel that contain the listview.
The problem here is when I use the Listview's Click Event, I don't have ways
to verify if the...
|
by: wmanzo |
last post by:
I have a really professional conspiracy movie site
and I use tons of layers and an external scroll bar assembly.
I would like to put the various sections into MS Iframes and
in order to clean up the page but I find that the iframes interfere
with the getting the mouse coords from the screen which is
essential in moving the scroll bar around.
My test html is given below. With the iframe hidden the mouse coords
are obtainable. With the...
|
by: lancered |
last post by:
Hi dear all,
I am using Python2.4.2+NumPy1.0.1 to deal with a parameter
estimation problem with the least square methods. During the
calculations, I use NumPy package to deal with matrix operations,
mostly matrix inversion and trasposition. The dimentions of the
matrices used are about 29x19,19x19 and 29x29.
During the calculation, I noticed an apparent error of
inverion of a 19x19 matrix. Denote this matrix as KK, U=KK^ -1, I
found...
|
by: marss |
last post by:
Hi,
How can I define in Firefox whether the left mouse button is pressed
when I move mouse over a html element?
The documentation says that "e.button == 0 for standard 'click',
usually left button"
http://developer.mozilla.org/en/docs/DOM:event.button
Tracing of mouse clicks or mousedown/mouseup events looks not
reliable, because mouse can be pressed elsewhere out of the html
element (even outside of the browser) and then move over the...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
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...
| | |
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,...
|
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...
|
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...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
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();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
