Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old August 26th, 2003, 01:22 PM
Authorized User
 
Join Date: Aug 2003
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default Detect srcElement on Embedded Image

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?
 
Old August 27th, 2003, 03:09 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

Can you show us some code/HTML? onmouseover with event.srcElement works fine for me inside a table.
 
Old August 27th, 2003, 07:38 AM
Authorized User
 
Join Date: Aug 2003
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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>
 
Old August 27th, 2003, 08:07 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

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;

}
 
Old August 27th, 2003, 03:02 PM
Authorized User
 
Join Date: Aug 2003
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old August 28th, 2003, 02:37 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

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;

}
 
Old August 28th, 2003, 06:11 PM
Authorized User
 
Join Date: Aug 2003
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
 
Old August 29th, 2003, 03:45 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

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.
 
Old August 29th, 2003, 01:42 PM
Authorized User
 
Join Date: Aug 2003
Posts: 54
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Again, thanks.

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

TSEROOGY





Similar Threads
Thread Thread Starter Forum Replies Last Post
Can we detect a broken image mat41 Classic ASP Basics 5 February 21st, 2008 07:14 PM
Image over embedded media players maratg CSS Cascading Style Sheets 0 January 31st, 2008 07:20 PM
Another window.event.srcelement question Ron Howerton Visual Basic 2005 Basics 0 January 16th, 2007 05:09 PM
Detect image suffix? mat41 Javascript How-To 5 July 28th, 2005 06:43 PM
embedded image in asp.net mu_ping ADO.NET 1 January 22nd, 2004 10:06 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.