how to move an image around in a div

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
 
D

David Mark

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

Stevo

dino said:
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.
 
D

dino d.

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top