[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

position of an image..

Posted on 2000-05-07
11
Medium Priority
?
196 Views
Last Modified: 2010-04-09
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..
0
Comment
Question by:lar_jens
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 2785651
OK, it's different for IE and Netscape.  For netscape it's x and y, and IE it's pffsetLeft and offsetTop.  So add a quick check:

if (document.layers)
 {top = document[imgname].y
  left = document.[imgname].x
 }
else if (document.all)
 {top = document[imgname].offsetTop
  left = document.[imgname].offsetLeft
 }

-Josh
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2785659
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
0
 
LVL 1

Author Comment

by:lar_jens
ID: 2787224
I'm using IE for the moment..

But

document[imgname].offsetTop and
document[imgname].offsetLeft

doesn't seam to work..
Instead

document.images[0].offsetTop and
document.images[0].offsetLeft
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
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 8

Expert Comment

by:jbirk
ID: 2788080
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
0
 
LVL 1

Author Comment

by:lar_jens
ID: 2788462
Yeah, sure..
Take a look at

http://www.handlekurven.no/buttontest/

0
 
LVL 8

Expert Comment

by:jbirk
ID: 2788631
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
0
 
LVL 1

Author Comment

by:lar_jens
ID: 2789866
Adjusted points from 50 to 100
0
 
LVL 1

Author Comment

by:lar_jens
ID: 2789867
thnx..

you've been most helpful.. =)
0
 
LVL 8

Accepted Solution

by:
jbirk earned 400 total points
ID: 2789886
Your welcome!
-Josh
0
 
LVL 1

Author Comment

by:lar_jens
ID: 2789962
tihi - I forgot to give you your points..

Sorry about that - I wasn't trying to be rude or anything... =)

0
 
LVL 8

Expert Comment

by:jbirk
ID: 2790096
I wasn't worried:)  Just thought answering it would be a reminder...
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question