By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,285 Members | 2,232 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,285 IT Pros & Developers. It's quick & easy.

How can I made this

P: n/a
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.
Oct 10 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Oct 10, 7:06*am, Vicent <vigo...@gmail.comwrote:
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
Oct 10 '08 #2

P: n/a
On Oct 10, 6:29*am, Laser Lips <loudsphi...@gmail.comwrote:
On Oct 10, 7:06*am, Vicent <vigo...@gmail.comwrote:
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.)
Oct 10 '08 #3

P: n/a
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>
Oct 13 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.