how to move an image around in a div

Discussion in 'Javascript' started by dino d., Oct 11, 2007.

  1. dino d.

    dino d. Guest

    Hi-

    I'm trying to implement a simple image with a clickable map inside a
    div. The image is much bigger than the div, so when you click and
    move the mouse, the image should move around inside the div. I can't
    figure out the html or javascript. I've tried something like this,
    but no luck:

    function mousehandler(e)
    {
    switch(e.type)
    {
    ...
    case 'mousemove':
    if(down)
    {
    lastmousex=mousex;
    lastmousey=mousey;
    mousex=e.screenX;
    mousey=e.screenY;
    diffx=mousex-lastmousex;
    diffy=mousey-lastmousey;
    var mymap=document.getElementById('mapnav');
    mymap.style.left+=diffx;
    mymap.style.top+=diffy;
    ....

    and for the html, I've tried something like:


    <div style="position: absolute; top: 30; left: 0; width: 150; height:
    39; overflow: hidden; border: 1px solid black">
    <img src="map.jpg" width="1004" height="918" />
    </div>


    but, this just fails. I see nothing on the screen. Can someone give me
    a push in the right direction?

    Thanks,
    Dino
     
    dino d., Oct 11, 2007
    #1
    1. Advertising

  2. dino d.

    David Mark Guest

    On Oct 10, 7:58 pm, "dino d." <> wrote:
    > Hi-
    >
    > I'm trying to implement a simple image with a clickable map inside a
    > div. The image is much bigger than the div, so when you click and
    > move the mouse, the image should move around inside the div. I can't


    I would scroll the div instead.

    > figure out the html or javascript. I've tried something like this,
    > but no luck:
    >
    > function mousehandler(e)
    > {
    > switch(e.type)
    > {
    > ...
    > case 'mousemove':
    > if(down)
    > {
    > lastmousex=mousex;
    > lastmousey=mousey;
    > mousex=e.screenX;
    > mousey=e.screenY;
    > diffx=mousex-lastmousex;
    > diffy=mousey-lastmousey;
    > var mymap=document.getElementById('mapnav');
    > mymap.style.left+=diffx;
    > mymap.style.top+=diffy;


    Set the scrollLeft and scrollTop properties of the div. If you want
    to move the image, make sure you append units to diffx and diffy.

    > ...
    >
    > and for the html, I've tried something like:
    >
    > <div style="position: absolute; top: 30; left: 0; width: 150; height:
    > 39; overflow: hidden; border: 1px solid black">


    Add units to your dimensions and position (px I assume.) And you
    don't need to make this position:absolute. If you want to move the
    image around instead of scrolling the div, make this position:relative
    and the image position:absolute.
     
    David Mark, Oct 11, 2007
    #2
    1. Advertising

  3. dino d.

    Stevo Guest

    dino d. wrote:
    > I'm trying to implement a simple image with a clickable map inside a
    > div. The image is much bigger than the div, so when you click and
    > move the mouse, the image should move around inside the div. I can't
    > figure out the html or javascript. I've tried something like this,


    David Mark's suggestion in his reply is good, but what I would do is
    have your image on a div inside another div. Then you can move the inner
    div (with the image on it) around by accessing .style.left and
    ..style.top. The outer div would need overflow:hidden.
     
    Stevo, Oct 11, 2007
    #3
  4. dino d.

    dino d. Guest

    >
    > David Mark's suggestion in his reply is good, but what I would do is
    > have your image on a div inside another div. Then you can move the inner
    > div (with the image on it) around by accessing .style.left and
    > .style.top. The outer div would need overflow:hidden.


    This worked great. Thanks for your help. Couldn't get image in div to
    work at all, but image in div in div worked.

    Thanks again!
    Dino
     
    dino d., Oct 11, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Gnarlodious
    Replies:
    4
    Views:
    17,714
    elizas
    May 5, 2010
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    813
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    242
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    361
    Martin Honnen
    Jun 26, 2005
  5. Dave Hemmings

    Move large image inside of div viewport

    Dave Hemmings, Aug 11, 2005, in forum: Javascript
    Replies:
    0
    Views:
    111
    Dave Hemmings
    Aug 11, 2005
Loading...

Share This Page