Pic and Viewport design question

[Csaba Gabor]

I'd like to have a pic (.jpg - think Map) on a page
and a 'viewport' onto that pic, either of whose sizes
I could alter by appropriately dragging the element
(using, for example, code from the excellent site
http://www.walterzorn.com/dragdrop/dragdrop_e.htm)

My question is: What is the best design structure
for this? Is it an image (in a div), and a second
div which will be the viewport (where the div is
transparent) AND

(idea A) The div's borders are opaque, extending to
the edges of the page/frame or ...

(idea B) The div doesn't have fat borders but there
are 4 (two vertical strips, and a top and bottom
stub) opaque divs outside it which readjust their
size whenever the viewport div changes size or
position. (Seems like this is easier to program)

Or some whole other approach?

Thanks for any tips,
Csaba Gabor from Vienna

 

[mbstevens]

I'd like to have a pic (.jpg - think Map) on a page
and a 'viewport' onto that pic, either of whose sizes
I could alter by appropriately dragging the element
(using, for example, code from the excellent site
http://www.walterzorn.com/dragdrop/dragdrop_e.htm)

Let me understand -- you want the item to have
drag-and-resize-and-drop
AND an image map that also resizes?

 

[Csaba Gabor]

Let me understand -- you want the item to have drag-and-resize-and-drop
AND an image map that also resizes?

I'm not interested in the drop part (don't want to drop
objects onto other items). I do want to be able to
resize each independently and to place (drag) them
independently. The way I'm intending this is to
have a control panel for when size/placement is being
set. One could either put in numbers there (or select
'Fit to window', etc.) or go directly to the
image/viewports and adjust them visually.

Csaba

 

[Csaba Gabor]

AND an image map that also resizes?

Oops, forgot to add that they're not image maps. The
..jpg/.png pics are of traditional (the kind they had
before computers) maps.

 

[mbstevens]

Oops, forgot to add that they're not image maps. The
.jpg/.png pics are of traditional (the kind they had
before computers) maps.

Seems you should just download the library and make
modifications a few lines at a time until you have
exactly what you want.

"Experiment with it!"
Dr. Von Frankenstein, 1878

If the pages are to be used for anything other than their
limited entertainment value you should avoid this kind of
DHTML; it's not accessible to anyone without javascript
turned on. Your time would be better spent learning
server side languages like Perl or PHP.

 

[Csaba Gabor]

Seems you should just download the library and make
modifications a few lines at a time until you have
exactly what you want.

I've already written the control panel, but I have
it with tables (this allowed a quick and easy way to
align the image/viewport left, right, center, top, middle,
bottom on the first coding pass) and would prefer to
redo this without the tables. Method B that I mentioned
in my first post (surrounding the viewport with 4 divs)
seems to be the simplest way to go, but this is where
all the purists (and anyone else who wants) get to have
their say in my initial design - specifically, the
architecture. I'm not so worried about puzzling out the
actual mechanics.

If the pages are to be used for anything other than their
limited entertainment value you should avoid this kind of
DHTML; it's not accessible to anyone without javascript
turned on. Your time would be better spent learning
server side languages like Perl or PHP.

Everything can be accomplished from the control panel.
All that dragging about and resizing will update the
control panel's values, and that is what gets submitted.
The PHP end is well covered, too.

 

[mbstevens]

I've already written the ..........

Post the prototype and let everyone look at it.
Can't tell what you're talking about without it.

 

[Toby Inkster]

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Now, that's quite nifty.

/me wonders if you could use the Javascript cookie stuff to save each
element's position and keep it there for the next visit...

 

[paul]

I'd like to have a pic (.jpg - think Map) on a page
and a 'viewport' onto that pic, either of whose sizes
I could alter by appropriately dragging the element
(using, for example, code from the excellent site
http://www.walterzorn.com/dragdrop/dragdrop_e.htm)

My question is: What is the best design structure
for this? Is it an image (in a div), and a second
div which will be the viewport (where the div is
transparent) AND

(idea A) The div's borders are opaque, extending to
the edges of the page/frame or ...

(idea B) The div doesn't have fat borders but there
are 4 (two vertical strips, and a top and bottom
stub) opaque divs outside it which readjust their
size whenever the viewport div changes size or
position. (Seems like this is easier to program)

Or some whole other approach?

Thanks for any tips,
Csaba Gabor from Vienna

Is this what you want? Large map but a small window is visible and you
drag the mouse around to see other parts of the map that are initially
hidden.

There is one free utility I've seen for viewing large images that lets
you zoom in and the new detail loads then only so you don't have to load
the whole thing in the beginning. Once zoomed, you can pan around. I
don't recall the name of it.

Lizardtech makes a similar product that requires their plugin to view so
it's less helpful.

 

[Csaba Gabor]

Is this what you want? Large map but a small window is visible and you
drag the mouse around to see other parts of the map that are initially
hidden.

Yes, that is what I want to write. That will be one of its uses.

There is one free utility I've seen for viewing large images that lets
you zoom in and the new detail loads then only so you don't have to load
the whole thing in the beginning. Once zoomed, you can pan around. I
don't recall the name of it.

If you ever do, please drop a note.
Thanks,
Csaba

I have started to do the implementation, and earlier today posted
a rough draft of what the basic viewport mechanism would be (in
comp.lang.javascript, title: Viewport example). The code was quite
straightforward, even after fixing the IE bug that I mention in the post.

 

[paul]

Yes, that is what I want to write. That will be one of its uses.



If you ever do, please drop a note.

I see a few options here:

 

[paul]

Yes, that is what I want to write. That will be one of its uses.



If you ever do, please drop a note.

Here you go:
http://www.haltadefinizione.com/photo.php

Zoomify is the utility:
http://www.zoomify.com