Newbie questions

[Dan]

I'm quite new to javascript, and i'm trying to create a menu for my page.
Could someone answer a couple of questions for me?

(1) I've created an image using document.writeln ("<IMG
SRC=\"image.jpg\">"). Is there a way I can create this directly in
javascript instead, so I can control its position better?

(2) How do I position a string on top of this image?


Thanks for any help,
Dan.

 

[Evertjan.]

Dan wrote on 03 okt 2003 in comp.lang.javascript:

I'm quite new to javascript, and i'm trying to create a menu for my page.
Could someone answer a couple of questions for me?

(1) I've created an image using document.writeln ("<IMG
SRC=\"image.jpg\">"). Is there a way I can create this directly in
javascript instead, so I can control its position better?

with css styles and javascript DOM.

(2) How do I position a string on top of this image?

with transparent absolute div's/layers and z-index style.

 

[Janwillem Borleffs]

I'm quite new to javascript, and i'm trying to create a menu for my page.
Could someone answer a couple of questions for me?

(1) I've created an image using document.writeln ("<IMG
SRC=\"image.jpg\">").

No, you have created an image TAG ;-)

Is there a way I can create this directly in
javascript instead, so I can control its position better?

(2) How do I position a string on top of this image?

With CSS, example:

<img style="position:absolute;left:100px;top:100px;"
src="image.jpg"
width="100" height="100" border="1" />

<div style="position:absolute;left:120px;top:120px;">
Here is some text
</div>

Attention: When the the <img /> and <div /> tags aren't in this order, you
will have to use the CSS z-index property to put the text on top of the
image:

<div style="position:absolute;left:120px;top:120px;z-index+1">
Here is some text
</div>

<img style="position:absolute;left:100px;top:100px;z-index-1"
src="image.jpg"
width="100" height="100" border="1" />


JW

 

[Janwillem Borleffs]

<div style="position:absolute;left:120px;top:120px;z-index+1">
Here is some text
</div>

<img style="position:absolute;left:100px;top:100px;z-index-1"
src="image.jpg"
width="100" height="100" border="1" />

Noticed an error here;
<img style="position:absolute;left:100px;top:100px;z-index-1"

Missing colon after z-index here. Also the case with the <div /> tag.


JW

 

[Dan]

Brilliant - thanks a lot for the help

Dan.

Noticed an error here;
<img style="position:absolute;left:100px;top:100px;z-index-1"

Missing colon after z-index here. Also the case with the <div /> tag.


JW

 

[Dan]

That's weird - it doesn't seem to do the absolute position properly. Or
more likely, it's my bug Can you see anything wrong with the following
function?:


function create_menu_item (obj_name, obj_text, x_pos, y_pos)
{
document.writeln ("<IMG STYLE=\"position:absolute;left:" + x_pos +
"px;top:" + y_pos + "px;\" ");
document.writeln ("onMouseOver=\"mouse_enter_menu_item ('" + obj_name +
"');return false;\" ");
document.writeln ("onMouseOut=\"mouse_leave_menu_item ('" + obj_name +
"');return false;\" ");
document.writeln ("NAME=\"" + obj_name + "\" SRC=\"button.jpg\"><BR>\n");

document.writeln ("<DIV STYLE=\"position:absolute;left:" + x_pos +
"px;top:" + y_pos + "px;\">" + obj_text + "<\DIV>");
}

It seems to work okay the first call of this function - but then it seems to
add the x and y values to itself (having the visual effect of a set of
steps). I've tried printing out the x_pos and y_pos values with each call,
but they remain as they should be.

Any ideas?
Thanks,
Dan.

 

[Janwillem Borleffs]

It seems to work okay the first call of this function - but then it seems to
add the x and y values to itself (having the visual effect of a set of
steps). I've tried printing out the x_pos and y_pos values with each call,
but they remain as they should be.

Try the z-indexing I've mentioned:

document.writeln ("<IMG STYLE=\"position:absolute;left:" + x_pos +
"px;top:" + y_pos + "px;z-index:+1\" ");

Add this also to the <div /> tag. When this doesn't solve it, post an URL
where the page can be viewed.


JW

 

[Dan]

I've uploaded the source to my website. I've also noticed that if I put the
javascript within a <PRE> block, then it looks okay. I've included the two
examples at the following urls:

http://dracan.x-1.net/test/index.html (Demonstrates the problem)
http://dracan.x-1.net/test/index2.html (Using the PRE hacky fix)

The actual relevant javascript code is here:

http://dracan.x-1.net/test/menu.js

Thanks for any help with this,
Regards,
Dan.