Pass onmouseover event to the element underneath

bgold12

Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?

Thanks.

Nov 9 '08 #1

Subscribe Post Reply

3149

SAM

Le 11/9/08 3:29 AM, bgold12 a écrit :

Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?

You can't do :

<span>
<tdsomething </td>
</span>

so your question means nothing

But if the span is in the td give your code
(I can't reproduce the span over right cells)

--
sm

Nov 9 '08 #2

bgold12

On Nov 9, 6:04*am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

Le 11/9/08 3:29 AM, bgold12 a écrit :

Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?

You can't do :

<span>
* *<tdsomething </td>
</span>

so your question means nothing

But if the span is in the td give your code
(I can't reproduce the span over right cells)

--
sm

Alright, here's the code:

////////// code //////////

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Testxx</title>
<script type="text/javascript">
function SetElementStyle(elem, cssProperty, cssValue ) {
// sets the css style property to a value of an element
// IMPORTANT NOTE!: any quotes embedded in the cssValue string MUST
BE SINGLE QUOTES ('); otherwise the eval statement string gets screwed
up

eval('elem.style.'+cssProperty+' = "'+cssValue+'";');

} // end SetElementStyle()
function SetElementClass(elem, cssClassName ) {
// sets the css style property to a value of an element

elem.className = cssClassName;

} // end SetElementClass()
</script>
<style type="text/css">
.Table {border:2px solid #00F; }
.TD {width:50px; max-width:50px; vertical-align:top; border:2px
solid #0F0; cursor:pointer; }
.TDHover {width:50px; max-width:50px; vertical-align:top; border:2px
solid #000; cursor:pointer; }
.Span {color:#F0F; border:2px solid #F00; background-color:#A00;
padding-left:80px; padding-right:80px; }
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" class="Table"><tbody><tr><td
class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 1<br />
<span class="Span">Span
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 2
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 3
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 4
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 5
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 6
</td></tr></tbody></table>

</body>

</html>

////////// code //////////

And yes, I know it doesn't work in IE; IE doesn't respect the max-
width CSS property.

Nov 10 '08 #3

Robin Rattay

On 10 Nov., 04:36, bgold12 <bgol...@gmail.comwrote:

Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?

I can't help you with this, but I do have some comments. However it is
a bit strange that you need to have an element break out a table cell
like that. Can you explain why you are doing that? Maybe there is a
better solution.

<?xml version="1.0" encoding="utf-8" ?>

Drop the XML prologue, if you want it to have any chance to get
consistent results in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Testxx</title>
<script type="text/javascript">
function SetElementStyle(elem, cssProperty, cssValue ) {
eval('elem.style.'+cssProperty+' = "'+cssValue+'";');

No need for eval here (or ever). Instead use square bracket notation
(google for it):

elem.style[cssProperty] = cssValue;

} // end SetElementStyle()

<style type="text/css">
.Table {border:2px solid #00F; }

Are "Table", "TD" and "Span" the actual class names you are using,
which you set on every single table/td/span? If yes, then you should
look up type selctors, and select simply by the element name. No
classes needed:

table {...}
td {...}
span {...}

.TD {width:50px; max-width:50px; vertical-align:top; border:2px
solid #0F0; cursor:pointer; }
.TDHover {width:50px; max-width:50px; vertical-align:top; border:2px
solid #000; cursor:pointer; }
.Span {color:#F0F; border:2px solid #F00; background-color:#A00;
padding-left:80px; padding-right:80px; }

If you really need the element to break out like that, you should
consider using position: absolute on the span instead of setting
(max-)width on the td.

</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" class="Table"><tbody><tr><td
class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 1<br />
<span class="Span">Span
</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 2
</td></tr></tbody></table>

</body>

</html>

////////// code //////////

And yes, I know it doesn't work in IE; IE doesn't respect the max-
width CSS property.

If you don't care for IE 6 you could drop the JavaScript and just use
CSS:

..TD {width:50px; max-width:50px; vertical-align:top; border:2px solid
#0F0; cursor:pointer; }
..TD:hover {border-color: #000}

Robin

Nov 10 '08 #4

Thomas 'PointedEars' Lahn

bgold12 wrote:

SAM wrote:
>Le 11/9/08 3:29 AM, bgold12 a Ã©crit :
>>Hey, I have kind of a weird problem. I have a span that I'm
intentionally overflowing a table cell (<td>), so that it stretches
over the table cells to the right of the parent table cell. I want the
mouseover event to occur for the table cells that lie underneath the
overflowed span, but every time i put the mouse on the span the
mouseover event for the parent table cell is called. Any suggestions?
You can't do :

<span>
<tdsomething </td>
</span>

so your question means nothing

But if the span is in the td give your code
(I can't reproduce the span over right cells)
[...]

Alright, here's the code:

It's atrocious to say the least. And a trimmed-down test case would have
sufficed.

<table cellpadding="0" cellspacing="0" class="Table"><tbody><tr><td
class="TD" onmouseover="SetElementClass(this, 'TDHover' );"
onmouseout="SetElementClass(this, 'TD' );">
Cell 1<br />
<span class="Span">Span

^^^^^^^^^^^^^^^^^^^^^^^

</td><td class="TD" onmouseover="SetElementClass(this, 'TDHover' );"

^^^^^

onmouseout="SetElementClass(this, 'TD' );">

As StÃ©phane said: you can't do this; especially not in XHTML, which must be
well-formed. The `span' element has to be ended before the end tag of the
`td' element. In HTML, or XHTML served as text/html you can usually get
away with this, but not in XHTML properly served as application/xhtml+xml.

<http://validator.w3.org/>

And so, because there is no `span' element at all, the `mouseover' event for
the `td' element occurs, and it is correct that its `onmouseover'
event-handler attribute is considered then.

And yes, I know it doesn't work in IE; IE doesn't respect the max-
width CSS property.

IE/MSHTML also does not support XHTML to date, so you should serve it Valid
"HTML-compatible" XHTML 1.0 Transitional, according to the XHTML 1.0
Specification, appendix C, as text/html, or better only serve Valid HTML
4.01 (as text/html) to all UAs in the first place.
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Nov 11 '08 #5

Similar topics

onMouseOver/onMouseOut not working

by: Epetruk | last post by:

Hi all, I want a page where the contents of a table cell are replaced with an image when the mouse moves over the cell, and the text is restored when the mouse moves out. Here's the html for the...

Javascript

complicated OnMouseOver

by: windandwaves | last post by:

Hi Gurus I am trying to make this rather complicated maps with an a huge number of mouseovers and the like. I want to set up a function that OnMouseDown swaps the OnMouseOver and OnMouseOut for...

Javascript

firefox onmouseover frame focus problem

by: Martin Chen | last post by:

I have a frame set (as per MS FrontPage 2000). It has a contents and a main frame. The contents frame has a menu bar written with with javascript (in the context of a table). In IE6.1 everything...

Javascript

Control the effect of an onMouseOver function.

by: Justin Rowe | last post by:

I'm attempting to design a site with alot of dynamic content and intractability, however I've hit a snag when it comes to the function of the onMouseOver and onMouseOut events. Using a bit of code...

Javascript

pass event as parameter to a dynamically assigned eventHandler

by: r_o | last post by:

hi all, i'm trying to dynamically assign an event handler for an onmouseover event on a <Li> element. i need to pass the event as a parameter to the handler as follows <script...

Javascript

Onmouseover,call function but as cursor moves - cursor changes whole time!

by: ismailc | last post by:

Hi, I need help please! Onmouseover it calls a function, but onmouseover the image it changes the cursor from default ot busy the whole time. I want it to stay to default. I have set it o...

Javascript

Pass onmouseover event to the element underneath

by: bgold12 | last post by:

Hey, I have kind of a weird problem. I have a span that I'm intentionally overflowing a table cell (<td>), so that it stretches over the table cells to the right of the parent table cell. I want...

HTML / CSS

how to pass the user name using cookies

by: swetha123 | last post by:

hello, I don't know how to use cookies please help me in this I am using the dream weaver cs4 I designed the navigation bar to my page using dream weaver cs4 navigation bar contains...

PHP

safari select option onmouseover event

by: linuskamb | last post by:

It seems, at least as far as my tests show, that Safari does not fire onmouseover for select options. with the code below, I can get all the messages in Firefox, but none in Safari. If I attach a...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

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...

Windows Server

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,...

C / C++