«

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

Csaba Gabor wrote:

> 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?

mbstevens wrote:
> Csaba Gabor wrote:
>
>>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
>
> 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

mbstevens wrote:
> Csaba Gabor wrote:
>
>>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
>
> 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.

Csaba Gabor wrote:

> mbstevens wrote:
>> Csaba Gabor wrote:
>>
>>>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
>>
>> 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.

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.

mbstevens wrote:
>>mbstevens wrote:
>>
>>>Csaba Gabor wrote:
>>>
>>>>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
>
> 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.

Csaba Gabor wrote:

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

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

Csaba Gabor wrote:

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Csaba Gabor wrote:

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

paul wrote:
> Csaba Gabor wrote:
>
>> 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)
>>
> 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.