How can I made this

Discussion in 'Javascript' started by Vicent, Oct 10, 2008.

  1. Vicent

    Vicent Guest

    Please,
    If you see this page:

    http://www.gpsies.com/map.do?fileId=jvillngyqmhldkby

    You will see a static image with altitude progfile, you can move the
    mouse over it and horizontal line appears. Can anybody help me and
    tell me how can I do this?

    Thanks a lot.
     
    Vicent, Oct 10, 2008
    #1
    1. Advertising

  2. Vicent

    Laser Lips Guest

    On Oct 10, 7:06 am, Vicent <> wrote:
    > Please,
    > If you see this page:
    >
    > http://www.gpsies.com/map.do?fileId=jvillngyqmhldkby
    >
    > You will see a static image with altitude progfile, you can move the
    > mouse over it and horizontal line appears. Can anybody help me and
    > tell me how can I do this?
    >
    > Thanks a lot.


    Right click, view source
     
    Laser Lips, Oct 10, 2008
    #2
    1. Advertising

  3. Vicent

    David Mark Guest

    On Oct 10, 6:29 am, Laser Lips <> wrote:
    > On Oct 10, 7:06 am, Vicent <> wrote:
    >
    > > Please,
    > > If you see this page:

    >
    > >http://www.gpsies.com/map.do?fileId=jvillngyqmhldkby

    >
    > > You will see a static image with altitude progfile, you can move the
    > > mouse over it and horizontal line appears. Can anybody help me and
    > > tell me how can I do this?

    >
    > > Thanks a lot.

    >
    > Right click, view source


    That might work if you are right-handed and using a two-button mouse
    (and an agent that supports context menus.)
     
    David Mark, Oct 10, 2008
    #3
  4. Vicent

    SAM Guest

    Le 10/10/08 8:06 AM, Vicent a écrit :
    > Please,
    > If you see this page:
    >
    > http://www.gpsies.com/map.do?fileId=jvillngyqmhldkby
    >
    > You will see a static image with altitude progfile, you can move the
    > mouse over it and horizontal line appears. Can anybody help me and
    > tell me how can I do this?


    I think it could be easy to do:

    the line is a simple div whom position follows the mouse's cursor

    css:
    ====
    #demo { position: relative; width: 500px; height: 300px; }
    #demo img { width: 100%; height: 100%; }
    #line { position: absolute; top: 0; width: 2px; height: 100%;
    background: green; display: none; }

    JS :
    ====
    function line(evt) {
    evt = evt || window.evt;
    var x1 = document.getElementById('demo').offsetLeft-1;
    var x2 = evt.clientX? evt.clientX : evt.X;
    document.getElementById('line').style.left = x2 - x1 +'px';
    }

    html :
    ======
    <div id="demo">
    <img src="asm1.gif" alt=""
    onmouseover="document.getElementById('line').style.display='block';"
    onmousemove="line(event);"
    onmouseout="document.getElementById('line').style.display='';">
    <div id="line"></div>
    </div>
     
    SAM, Oct 13, 2008
    #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. Karunakararao
    Replies:
    0
    Views:
    672
    Karunakararao
    May 11, 2004
  2. vnssoftware
    Replies:
    4
    Views:
    480
    Dmitry R
    Dec 31, 2003
  3. Oxnard
    Replies:
    4
    Views:
    380
    Joona I Palaste
    Oct 26, 2004
  4. Replies:
    5
    Views:
    4,049
    Wendy Smoak
    Mar 28, 2005
  5. Serious_Practitioner

    Can a page be made to make a .doc file do this?

    Serious_Practitioner, Aug 3, 2005, in forum: HTML
    Replies:
    2
    Views:
    410
    Serious_Practitioner
    Aug 5, 2005
Loading...

Share This Page