How can I made this

[Vicent]

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.

[Laser Lips]

On Oct 10, 7:06*am, Vicent <[e-mail]:

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

[David Mark]

On Oct 10, 6:29*am, Laser Lips <[e-mail]:

On Oct 10, 7:06*am, Vicent <[e-mail]:

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.)

[SAM]

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>