SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning an image using x and y axis

    I have a main image where I grab the x and y axis when someone clicks on an area on the image and store it. My question is how would I place a second image on top of the main image using the x and y axis? I tried using CSS but its absolute positioning pertains to the page and not the image unless Im missing something?

    Thanks
    Silly

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    I'm not exactly sure what you're asking, but to make CSS absolute positioning apply to something else other than the whole page, you'd need some type of container that is itself absolutely positioned.

    Example...

    Code HTML4Strict:
    <div style="position:absolute; left:20px; top:30px; width:600px; height:400px; background:#cc0000;">
    	<div style="position:absolute; left:40px; top:90px; width:50px; height:50px; background:#00cccc;">
    	</div>
    </div>

    Make sense??




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  3. #3
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead) View Post
    I'm not exactly sure what you're asking, but to make CSS absolute positioning apply to something else other than the whole page, you'd need some type of container that is itself absolutely positioned.

    Example...
    Code HTML4Strict:
    <div style="position:absolute; left:20px; top:30px; width:600px; height:400px; background:#cc0000;">
        <div style="position:absolute; left:40px; top:90px; width:50px; height:50px; background:#00cccc;">
        </div>
    </div>

    Make sense??




    What Im trying to do is allow a person to view an image and be able to click anywhere on that image to get the x and y coordinates. Once I have that I store it in a database and they can go back to it and have a second smaller image be placed over the original image starting at that x and y coordinate. The problem that Im having is the original coordinates they clicked on is on the image, when I try to use absolute positioning with css its using the same x y coordinates but its not the image its the whole page so the image ontop of the original image does not line up correctly.

    Silly

  4. #4
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Post the code you're using to get the X and Y co-ordinates.


    My guess is that if you use a container tag like I described above and get the X and Y styles (getElementById().style.top and getElementById().style.left) it will be consistant with everything else positioned absolutely in that absolute container object.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •