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.g if' \
id='1' \
onmouseover='re turn overlib(\"First Image\");' \
onmouseout='ret urn nd();'/>"
);


// this creates the image, but the mouseover does not work
imgObj = document.create Element("img");
imgObj.src = "marker12.g if";
imgObj.onmouseo ver="return overlib(\"Secon d Image\");";
imgObj.onmouseo ut="return nd();";
imgObj.id = 2;
document.body.a ppendChild(imgO bj);

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
jbuzbee@nyx.net answer promptly, and I did. I
http://batbox.org said I didn't know." Mark Twain

[Jim Buzbee]

Re: Image creation problem

Following up to myself :

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

imgObj.setAttri bute("onmouseov er", "return overlib(\"Secon d 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 <1076451544.449 389@irys.nyx.ne t>,
Jim Buzbee <jbuzbee@nyx10. nyx.net> wrote:[color=blue]
>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.g if' \
> id='1' \
> onmouseover='re turn overlib(\"First Image\");' \
> onmouseout='ret urn nd();'/>"
> );
>
>
>// this creates the image, but the mouseover does not work
>imgObj = document.create Element("img");
>imgObj.src = "marker12.g if";
>imgObj.onmouse over="return overlib(\"Secon d Image\");";
>imgObj.onmouse out="return nd();";
>imgObj.id = 2;
>document.body. appendChild(img Obj);
>
>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
>jbuzbee@nyx.ne t answer promptly, and I did. I
>http://batbox.org said I didn't know." Mark Twain[/color]


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

[Michael Winter]

Re: Image creation problem

On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jbuzbee@nyx10. nyx.net> wrote:
[color=blue]
> Following up to myself :
>
> The code below works in Mozilla but not in
> IE when I replace the "imgObj.onmouse over=" statment with :
>
> imgObj.setAttri bute("onmouseov er", "return overlib(\"Secon d Image\");");
>
> I do the same type of thing with the onmouseout statement.
>
> Hints? Suggestions? Is there a better way to be doing this?[/color]

[snip]

Try

imgObj.onmouseo ver = new Function('retur n 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.onmouseo ver = callOverlib;

Mike

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

[Jim Buzbee]

Re: Image creation problem

In article <opr27u5go15vkl cq@news-text.blueyonder .co.uk>,
Michael Winter <M.Winter@bluey onder.co.invali d> wrote:[color=blue]
>On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jbuzbee@nyx10. nyx.net> wrote:
>[/color]
....
[color=blue]
>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.onmouseo ver = callOverlib;
>
>Mike[/color]

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.setAttri bute("descripti on",description );
imgObj.onmouseo ver = 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




[color=blue]
>
>--
>Michael Winter
>M.Winter@bluey onder.co.invali d (replace ".invalid" with ".uk" to reply)[/color]


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

[Michael Winter]

Re: Image creation problem

On 11 Feb 2004 11:44:35 -0700, Jim Buzbee <jbuzbee@nyx10. nyx.net> wrote:
[color=blue]
> In article <opr27u5go15vkl cq@news-text.blueyonder .co.uk>,
> Michael Winter <M.Winter@bluey onder.co.invali d> wrote:[color=green]
>> On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jbuzbee@nyx10. nyx.net> wrote:
>>[/color]
> ...
>[color=green]
>> 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.onmouseo ver = callOverlib;
>>
>> Mike[/color]
>
> 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[/color]

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.
[color=blue]
> description = "....
> ...
> imgObj.setAttri bute("descripti on",description );
> imgObj.onmouseo ver = callOverlib;
>
> CallOverlib would extract the description attribute from the image and
> call overlib.[/color]

What does overlib() expect? A string, an object reference?
[color=blue]
> 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.[/color]

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.onmouseo ver = new Function('retur n
overlib(this.ge tAttribute("des cription"))');

If you do use the alt attribute, the argument would be changed to
"this.alt". I don't know if "this.descripti on" 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.ge tAttribute('des cription')); // or this.alt
}
...
imgObj.onmouseo ver = callOverlib;

Hope that helps,
Mike

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

[Jim Buzbee]

Re: Image creation problem

In article <opr2714tje5vkl cq@news-text.blueyonder .co.uk>,
Michael Winter <M.Winter@bluey onder.co.invali d> wrote:[color=blue]
>On 11 Feb 2004 11:44:35 -0700, Jim Buzbee <jbuzbee@nyx10. nyx.net> wrote:
>[color=green]
>> In article <opr27u5go15vkl cq@news-text.blueyonder .co.uk>,
>> Michael Winter <M.Winter@bluey onder.co.invali d> wrote:[color=darkred]
>>> On 11 Feb 2004 10:23:59 -0700, Jim Buzbee <jbuzbee@nyx10. nyx.net> wrote:
>>>[/color][/color][/color]
....
[color=blue][color=green]
>> 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[/color]
>
>Images do have a description attribute: alt. I must assume that it's
>insufficient for some reason.[/color]

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

[color=blue]
>
>I will point out that the alt attribute is actually required.
>[color=green]
>> description = "....
>> ...
>> imgObj.setAttri bute("descripti on",description );
>> imgObj.onmouseo ver = callOverlib;
>>
>> CallOverlib would extract the description attribute from the image and
>> call overlib.[/color]
>
>What does overlib() expect? A string, an object reference?[/color]

A String.

[color=blue]
>[color=green]
>> 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.[/color]
>
>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".[/color]

OK - Thanks - "this" did the trick.

[color=blue]
>
>To pass the value of the description attribute as a parameter of
>overlib(), you would do:
>
> imgObj.onmouseo ver = new Function('retur n
>overlib(this.g etAttribute("de scription"))');
>
>If you do use the alt attribute, the argument would be changed to
>"this.alt". I don't know if "this.descripti on" 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.ge tAttribute('des cription')); // or this.alt
> }
> ...
> imgObj.onmouseo ver = callOverlib;
>
>Hope that helps,
>Mike[/color]


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

Jim


[color=blue]
>
>--
>Michael Winter
>M.Winter@bluey onder.co.invali d (replace ".invalid" with ".uk" to reply)[/color]


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