Image creation problem

[Jim Buzbee]

I have a subroutine that inserts image objects into
a page for me. It works fine except for one thing.
My mouseover settings don't appear to take. i.e. I
see nothing at all when I move the mouse cursor over
the image. If I replace the object creation code with
a plain document.write, it works. :

// this works as expected
document.write("<img src='marker12.gif' \
id='1' \
onmouseover='return overlib(\"First Image\");' \
onmouseout='return nd();'/>"
);
// this creates the image, but the mouseover does not work
imgObj = document.createElement("img");
imgObj.src = "marker12.gif";
imgObj.onmouseover="return overlib(\"Second Image\");";
imgObj.onmouseout="return nd();";
imgObj.id = 2;
document.body.appendChild(imgObj);

The behavior is the same in IE as it is in Mozilla.

I'm a newbie at this, Can anyone see what I'm doing wrong?

Thanks,
Jim Buzbee

--
--------------------------------------------------------------------------------
Jim Buzbee "I was gratified to be able to
jb*****@nyx.net answer promptly, and I did. I
http://batbox.org said I didn't know." Mark Twain

[Jim Buzbee]

Following up to myself :

The code below works in Mozilla but not in
IE when I replace the "imgObj.onmouseover=" statment with :

imgObj.setAttribute("onmouseover", "return overlib(\"Second Image\");");

I do the same type of thing with the onmouseout statement.
Hints? Suggestions? Is there a better way to be doing this?

Jim
In article <10***************@irys.nyx.net>,
Jim Buzbee <jb*****@nyx10.nyx.net> wrote:

I have a subroutine that inserts image objects into
a page for me. It works fine except for one thing.
My mouseover settings don't appear to take. i.e. I
see nothing at all when I move the mouse cursor over
the image. If I replace the object creation code with
a plain document.write, it works. :

// this works as expected
document.write("<img src='marker12.gif' \
id='1' \
onmouseover='return overlib(\"First Image\");' \
onmouseout='return nd();'/>"
);
// this creates the image, but the mouseover does not work
imgObj = document.createElement("img");
imgObj.src = "marker12.gif";
imgObj.onmouseover="return overlib(\"Second Image\");";
imgObj.onmouseout="return nd();";
imgObj.id = 2;
document.body.appendChild(imgObj);

The behavior is the same in IE as it is in Mozilla.

I'm a newbie at this, Can anyone see what I'm doing wrong?

Thanks,
Jim Buzbee

--
--------------------------------------------------------------------------------
Jim Buzbee "I was gratified to be able to
jb*****@nyx.net answer promptly, and I did. I
http://batbox.org said I didn't know." Mark Twain

--
--------------------------------------------------------------------------------
Jim Buzbee "I was gratified to be able to
jb*****@nyx.net answer promptly, and I did. I
http://batbox.org said I didn't know." Mark Twain

[Michael Winter]

On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jb*****@nyx10.nyx.net> wrote:

Following up to myself :

The code below works in Mozilla but not in
IE when I replace the "imgObj.onmouseover=" statment with :

imgObj.setAttribute("onmouseover", "return overlib(\"Second Image\");");

I do the same type of thing with the onmouseout statement.

Hints? Suggestions? Is there a better way to be doing this?

[snip]

Try

imgObj.onmouseover = new Function('return overlib("Second Image");');

The problem with your original solution was that the event properties
expect a function reference, not a string. An alternative solution to the
above would be:

function callOverlib() {
return overlib('Second Image');
}
...
imgObj.onmouseover = callOverlib;

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Jim Buzbee]

In article <op**************@news-text.blueyonder.co.uk>,
Michael Winter <M.******@blueyonder.co.invalid> wrote:

On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jb*****@nyx10.nyx.net> wrote:
....
The problem with your original solution was that the event properties
expect a function reference, not a string. An alternative solution to the
above would be:

function callOverlib() {
return overlib('Second Image');
}
...
imgObj.onmouseover = callOverlib;

Mike
Thanks much - That gets much closer. My original example oversimpilfied my problem.
What I -really- want to do is parameterize the "mouseOver" so that each
image has its own label. i.e. something like

....

description = "....
....
imgObj.setAttribute("description",description);
imgObj.onmouseover = callOverlib;

....

CallOverlib would extract the description attribute from the image and
call overlib.

Is there a way for the mouseover function (callOverlib in this case) to determine
which element "called" it? Just adding a parameter to callOverlib doesn't do the
trick.

I feel like I'm learning this language by trial, error, and google...

Jim



--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

--
--------------------------------------------------------------------------------
Jim Buzbee "I was gratified to be able to
jb*****@nyx.net answer promptly, and I did. I
http://batbox.org said I didn't know." Mark Twain

[Michael Winter]

On 11 Feb 2004 11:44:35 -0700, Jim Buzbee <jb*****@nyx10.nyx.net> wrote:

In article <op**************@news-text.blueyonder.co.uk>,
Michael Winter <M.******@blueyonder.co.invalid> wrote:

On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jb*****@nyx10.nyx.net> wrote:
...

The problem with your original solution was that the event properties
expect a function reference, not a string. An alternative solution to
the
above would be:

function callOverlib() {
return overlib('Second Image');
}
...
imgObj.onmouseover = callOverlib;

Mike

Thanks much - That gets much closer. My original example oversimpilfied
my problem.
What I -really- want to do is parameterize the "mouseOver" so that each
image has its own label. i.e. something like

Images do have a description attribute: alt. I must assume that it's
insufficient for some reason.

I will point out that the alt attribute is actually required.
description = "....
...
imgObj.setAttribute("description",description);
imgObj.onmouseover = callOverlib;

CallOverlib would extract the description attribute from the image and
call overlib.
What does overlib() expect? A string, an object reference?
Is there a way for the mouseover function (callOverlib in this case) to
determine which element "called" it? Just adding a parameter to
callOverlib doesn't do the trick.

The operator, this, refers to the current object. When used in a method,
it usually refers to the calling object. In the case of intrinsic events,
this refers to the element that the event is attached to. For example:

<img src="someImage.jpg" alt="Some random image"
onclick="alert(this.alt)">

Clicking on that image will display an alert box with the text, "Some
random image".

To pass the value of the description attribute as a parameter of
overlib(), you would do:

imgObj.onmouseover = new Function('return
overlib(this.getAttribute("description"))');

If you do use the alt attribute, the argument would be changed to
"this.alt". I don't know if "this.description" would be acceptable as it's
not a standard attribute.

If the mouseover event contents will always be the same, you can create a
function as I showed previously and assign it to the handlers:

function callOverlib() {
return overlib(this.getAttribute('description')); // or this.alt
}
...
imgObj.onmouseover = callOverlib;

Hope that helps,
Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Jim Buzbee]

In article <op**************@news-text.blueyonder.co.uk>,
Michael Winter <M.******@blueyonder.co.invalid> wrote:

On 11 Feb 2004 11:44:35 -0700, Jim Buzbee <jb*****@nyx10.nyx.net> wrote:

In article <op**************@news-text.blueyonder.co.uk>,
Michael Winter <M.******@blueyonder.co.invalid> wrote:

On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jb*****@nyx10.nyx.net> wrote:

....
Thanks much - That gets much closer. My original example oversimpilfied
my problem.
What I -really- want to do is parameterize the "mouseOver" so that each
image has its own label. i.e. something like
Images do have a description attribute: alt. I must assume that it's
insufficient for some reason.

No, I think I'll change it to alt. I started using "description" because
that what it was called in XML field I was grabbing it from.


I will point out that the alt attribute is actually required.

description = "....
...
imgObj.setAttribute("description",description);
imgObj.onmouseover = callOverlib;

CallOverlib would extract the description attribute from the image and
call overlib.
What does overlib() expect? A string, an object reference?

A String.

Is there a way for the mouseover function (callOverlib in this case) to
determine which element "called" it? Just adding a parameter to
callOverlib doesn't do the trick.
The operator, this, refers to the current object. When used in a method,
it usually refers to the calling object. In the case of intrinsic events,
this refers to the element that the event is attached to. For example:

<img src="someImage.jpg" alt="Some random image"
onclick="alert(this.alt)">

Clicking on that image will display an alert box with the text, "Some
random image".

OK - Thanks - "this" did the trick.


To pass the value of the description attribute as a parameter of
overlib(), you would do:

imgObj.onmouseover = new Function('return
overlib(this.getAttribute("description"))');

If you do use the alt attribute, the argument would be changed to
"this.alt". I don't know if "this.description" would be acceptable as it's
not a standard attribute.

If the mouseover event contents will always be the same, you can create a
function as I showed previously and assign it to the handlers:

function callOverlib() {
return overlib(this.getAttribute('description')); // or this.alt
}
...
imgObj.onmouseover = callOverlib;

Hope that helps,
Mike

Yes, it did. Very much so. Thanks for sharing the knowledge!

Jim

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

--
--------------------------------------------------------------------------------
Jim Buzbee "I was gratified to be able to
jb*****@nyx.net answer promptly, and I did. I
http://batbox.org said I didn't know." Mark Twain