Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > how to move an image around in a div

Reply
Thread Tools

how to move an image around in a div

 
 
dino d.
Guest
Posts: n/a
 
      10-10-2007
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

 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      10-11-2007
On Oct 10, 7:58 pm, "dino d." <(E-Mail Removed)> wrote:
> 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.

 
Reply With Quote
 
 
 
 
Stevo
Guest
Posts: n/a
 
      10-11-2007
dino d. wrote:
> 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.
 
Reply With Quote
 
dino d.
Guest
Posts: n/a
 
      10-11-2007
>
> 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
div box questions; float text around a box, fit box to image size Gnarlodious HTML 4 05-05-2010 11:30 AM
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments