lar_jens
asked on
position of an image..
Using javascript, I'd like to place a layer over an image (don't ask why *s*), but I don't know how to get to the top left corner of the image. How do I do that.
I've tried :
document[imgname].top
but that doesn't seam to work..
I'd appreciate any help, thanks..
I've tried :
document[imgname].top
but that doesn't seam to work..
I'd appreciate any help, thanks..
Incidentally, one way to find out what the supported properties are for an object is to use a for/in loop on that object and print the data out to the document or alert it or whatever. I did this for this question:
for (prop in document.images[0])
alert("name: "+prop+"; value= "+document.images[0][prop] )
It took a really long time in IE since there are so many properties, so perhaps a document.write wouild have been better, but it told me what I needed to know:)
-Josh
for (prop in document.images[0])
alert("name: "+prop+"; value= "+document.images[0][prop]
It took a really long time in IE since there are so many properties, so perhaps a document.write wouild have been better, but it told me what I needed to know:)
-Josh
ASKER
I'm using IE for the moment..
But
document[imgname].offsetTo p and
document[imgname].offsetLe ft
doesn't seam to work..
Instead
document.images[0].offsetT op and
document.images[0].offsetL eft
seams to work..
Weird.. How come?
And my layer will not position itself over the image (the image is centered), but stays on the left.. How can I fix that?
- LJJ
But
document[imgname].offsetTo
document[imgname].offsetLe
doesn't seam to work..
Instead
document.images[0].offsetT
document.images[0].offsetL
seams to work..
Weird.. How come?
And my layer will not position itself over the image (the image is centered), but stays on the left.. How can I fix that?
- LJJ
Not sure why the two different array indexing is different? Must be a bug? It should work just the same.
You say it stays on the left, do you mean, flush left with the image? If so this is because those are the coordinates you are getting (the upper left corner). If you want to center your layer, you'll have to do some math. Compute the widths/heights of each item (the image and the layer), subtract them from each other, divide by two and add that to the left and top coordinates of the image. That will center your div over the image.
If it's not lining up exactly on the left/top of the image, could you post an example of the code so I can play with it, and get it working on my computer?
-Josh
You say it stays on the left, do you mean, flush left with the image? If so this is because those are the coordinates you are getting (the upper left corner). If you want to center your layer, you'll have to do some math. Compute the widths/heights of each item (the image and the layer), subtract them from each other, divide by two and add that to the left and top coordinates of the image. That will center your div over the image.
If it's not lining up exactly on the left/top of the image, could you post an example of the code so I can play with it, and get it working on my computer?
-Josh
ASKER
The problem was the center tag as you suspected. The Center tag is outdated however, and using a newer method fixes the problem. I used the same method you used for centering vertically to center horizontally and it worked fine. So remove the center tags and modify the file like this:
<table height=100% width="100%" border="0">
<script language="JavaScript">
var h = document
document.write("<td valign=MIDDLE align=center>");
That should get it starting in upper left corner of the first image.
-josh
<table height=100% width="100%" border="0">
<script language="JavaScript">
var h = document
document.write("<td valign=MIDDLE align=center>");
That should get it starting in upper left corner of the first image.
-josh
ASKER
Adjusted points from 50 to 100
ASKER
thnx..
you've been most helpful.. =)
you've been most helpful.. =)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
tihi - I forgot to give you your points..
Sorry about that - I wasn't trying to be rude or anything... =)
Sorry about that - I wasn't trying to be rude or anything... =)
I wasn't worried:) Just thought answering it would be a reminder...
if (document.layers)
{top = document[imgname].y
left = document.[imgname].x
}
else if (document.all)
{top = document[imgname].offsetTo
left = document.[imgname].offsetL
}
-Josh