D
dino d.
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
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