Detect srcElement on Embedded Image

TSEROOGY · August 26th, 2003, 01:22 PM

Building a site that includes an image embedded in the cell of a table. The table is used strictly for formatting purposes.

My Goal:
As the mouse passes over the image a popup menu appears next to the image. I have created this by writing an onmouseover function that identifies the image as the srcElement of the event (event.srcElement) and then moves a DIV to the desired position.

Problem:
The script works great as long as the image is not anywhere inside the <TABLE>. When the image is placed inside a table cell, the onmouseover event seems to be ignored, and the onmouseover function is not called.

When I place the onmouseover function call inside the <TD> table cell tag, the DIV is placed incorrectly. As it appears, the event.srcElement property seems to see the <BODY> as the source of the event.

In fact, any object I place inside the table does not respond properly to the event.srcElement property.

Understandably, placing elements within a container may affect how they respond to various events. It seems that the <TABLE> container prevents the event object from working correctly on any elements placed within it.

As I've not yet succeeded, is there someone that can give me a hand with this problem?

pgtips · August 27th, 2003, 03:09 AM

Can you show us some code/HTML? onmouseover with event.srcElement works fine for me inside a table.

TSEROOGY · August 27th, 2003, 07:38 AM

pgtips,
Thanks for the response. Following is the barebones script I've been testing - checking for browser and error handling are not included.

During testing, I've found that when the IMG is not embedded within the table, the "div1" is placed correctly when the onmouseover/onmouseout events call their corresponding functions. Whenever the IMG is placed within the TABLE, "div1" is not placed correctly when the functions are called.

I've tested this on two machines:

One with XP Pro and one with Win 2000. Both computers are using IE6 as the browser.

Give it a try. Needless to say, you'll need to locate an image.

Thanks and best regards,
TSEROOGY

<html>
<head>
<title>Trial1</title>

<style>
.DivStyle1 {background-color: lightblue;
    position: absolute;
    width: 200px;
    height: 200px;
    left: -500px;
    top: -500px;
    border: 4px groove lightgrey;
}

.PStyle1 {color: white;
    position: relative;

}
P {color: green;}

.tableStyle1 {position: absolute;
    left: 100px;
    top: 100px;
    width: 50px;
}
</style>
<script language=JavaScript>
var xPos;
var yPos;
function move_onmouseover()
{
    srcElement = event.srcElement;
    xPos = srcElement.offsetLeft + srcElement.width;
    yPos = srcElement.offsetTop;

    div1.style.top = yPos;
    div1.style.left = xPos;

}

function move_onmouseout()
{

    div1.style.top = -500;
    div1.style.left = -500;
}

</script>

</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<DIV ID="div1" CLASS="DivStyle1">
    <p CLASS="PStyle1">My Paragraph</p>
</DIV>

<table ID="table1" border="1">
<tr>
    <td>

<img ID="getStartImg" src="getstart.gif" width="150" height="75" border="0" onmouseover="move_onmouseover()" onmouseout="move_onmouseout()">

<p>Try this one!</p>
    </td>

</tr>
</table>

<img ID="getStartImg" src="getstart.gif" width="150" height="75" border="0" onmouseover="move_onmouseover()" onmouseout="move_onmouseout()">
<p>This should be green</p>

</body>
</html>

pgtips · August 27th, 2003, 08:07 AM

OK, I've had a look at your code and the problem is not with the srcElement - that works fine in that it still refers to the <img> even when its inside a table.

The problem is with the use of offsetLeft and offsetTop - these properties give the offset from the left and top respectively of the parent. The parent changes to the the <td> when its in a table, whereas its the <body> when its not.

Try something like this instead (srcElement.offsetParent.offsetParent refers to the containing table):

Code:

function move_onmouseover()
{
    srcElement = event.srcElement;
    xPos = srcElement.offsetParent.offsetParent.offsetLeft + srcElement.offsetParent.offsetParent.offsetWidth 
    yPos = srcElement.offsetParent.offsetParent.offsetTop + srcElement.offsetTop;

    div1.style.top = yPos;
    div1.style.left = xPos;

}

TSEROOGY · August 27th, 2003, 03:02 PM

Shazam! pgtips! Thanks. I'll do a little more testing to confirm my particular application. As I'm learning as I go, I assume that the offsetParent sequeunce is built off of the DOM structure?

TSEROOGY
Have a great day

pgtips · August 28th, 2003, 02:37 AM

Yes that's right, the offsetParent sequence is from the DOM.

You know, I was a bit worried about how useful this would be across browsers - would the offsetParent.offsetParent always be the table? So I came up with this more generic version which keeps going up the parent hierarchy accumulating the left and top as it goes. It seems to work well, and has the advantage of working even when the image is not inside a table. Here it is:

Code:

function move_onmouseover()
{
    var srcElement = event.srcElement;
    if (srcElement)
    {
        xPos = srcElement.width;
        yPos = 0;
    }
    while (srcElement)
    {
        xPos += srcElement.offsetLeft;
        yPos += srcElement.offsetTop;
        srcElement = srcElement.offsetParent;
    }

    div1.style.top = yPos;
    div1.style.left = xPos;

}

TSEROOGY · August 28th, 2003, 06:11 PM

Thanks, again, pgtips.

In the new version, it's easy enough to work in most any scenario without making changes. May I add it to my clip library?

Good job, and again, thank you.

TSEROOGY

pgtips · August 29th, 2003, 03:45 AM

You're welcome. Glad you like it :D

Yes add it to your clip library - use it wherever you like, there are no conditions added to the code I post here.

TSEROOGY · August 29th, 2003, 01:42 PM

Again, thanks.

If you're ever in the States and need anything. Let me know.

TSEROOGY