Image on Image help

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Jim Buzbee
    #1

    Image on Image help

    I'm a newbiwe trying to position one small image on top
    of a larger one. Based on various examples, I'm trying the
    solution below. Only problem is that it doesn't work :-(
    Both x and y in the example below always seem to be 0.

    Any pointers would be appreciated.

    Jim Buzbee


    <html>
    <body>

    <br/>
    <br/>
    <br/>

    <img src="relief.jpg " width="640" height="320" id="base"/>
    <img src="overlay.gi f" width="10 height="10" id="overlay"/>

    <script>
    document.getEle mentById('overl ay').style.posi tion="absolute" ;

    y = document.getEle mentById('base' ).style.top;
    x = document.getEle mentById('base' ).style.left;
    document.getEle mentById('overl ay').style.top = y + 160;

    document.getEle mentById('overl ay').style.left = x + 320;
    </script>

    </body>
    </html>

    --
    --------------------------------------------------------------------------------
    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
    Tags: None
    • Randy Webb
      #2
      Re: Image on Image help

      Jim Buzbee wrote:
      [color=blue]
      > I'm a newbiwe trying to position one small image on top
      > of a larger one. Based on various examples, I'm trying the
      > solution below. Only problem is that it doesn't work :-(
      > Both x and y in the example below always seem to be 0.[/color]

      Because you have not defined them.
      [color=blue]
      >
      > <img src="relief.jpg " width="640" height="320" id="base"/>
      > <img src="overlay.gi f" width="10 height="10" id="overlay"/>
      >
      > <script>
      > document.getEle mentById('overl ay').style.posi tion="absolute" ;
      >
      > y = document.getEle mentById('base' ).style.top;
      > x = document.getEle mentById('base' ).style.left;
      > document.getEle mentById('overl ay').style.top = y + 160;
      >
      > document.getEle mentById('overl ay').style.left = x + 320;
      > </script>
      >
      > </body>
      > </html>
      >[/color]

      <style type="text/css">
      ..base{position : absolute;top: 0px;left: 0px;}
      ..overlay{posit ion: absolute;top: 160px;left: 320px;}
      </style>


      <div>
      <img src="relief.jpg " width="640" height="320" id="base"/>
      <img src="overlay.gi f" width="10 height="10" id="overlay"/>
      </div>

      Is a start.

      no javascript needed.
      --
      Randy

        Comment

        Previous template Next
        Working...