Pic and Viewport design question

Discussion in 'HTML' started by Csaba Gabor, Mar 22, 2005.

  1. Csaba Gabor

    Csaba Gabor Guest

    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, Mar 22, 2005
    #1
    1. Advertising

  2. Csaba Gabor

    mbstevens Guest

    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, Mar 22, 2005
    #2
    1. Advertising

  3. Csaba Gabor

    Csaba Gabor Guest

    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
     
    Csaba Gabor, Mar 22, 2005
    #3
  4. Csaba Gabor

    Csaba Gabor Guest

    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, Mar 22, 2005
    #4
  5. Csaba Gabor

    mbstevens Guest

    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, Mar 22, 2005
    #5
  6. Csaba Gabor

    Csaba Gabor Guest

    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, Mar 22, 2005
    #6
  7. Csaba Gabor

    mbstevens Guest

    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.
     
    mbstevens, Mar 22, 2005
    #7
  8. Csaba Gabor

    Toby Inkster Guest

    Toby Inkster, Mar 22, 2005
    #8
  9. Csaba Gabor

    paul Guest

    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, Mar 23, 2005
    #9
  10. Csaba Gabor

    Csaba Gabor Guest

    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.
     
    Csaba Gabor, Mar 23, 2005
    #10
  11. Csaba Gabor

    paul Guest

    Csaba Gabor wrote:

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



    I see a few options here:
    <http://www.google.com/search?hl=en&lr=&q=large+image+pan+and+zoom+web+page&btnG=Search>


    > 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, Mar 23, 2005
    #11
  12. Csaba Gabor

    paul Guest

    Csaba Gabor wrote:

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



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

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



    > 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, Apr 2, 2005
    #12
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Peter

    JTable viewport

    Peter, Oct 20, 2003, in forum: Java
    Replies:
    10
    Views:
    1,488
    Peter
    Oct 22, 2003
  2. Charles Packer
    Replies:
    2
    Views:
    814
    Sudsy
    Nov 5, 2003
  3. Barbara de Zoete
    Replies:
    5
    Views:
    625
    Barbara de Zoete
    Apr 1, 2005
  4. Csaba Gabor

    Pic and Viewport design question

    Csaba Gabor, Mar 22, 2005, in forum: Javascript
    Replies:
    12
    Views:
    156
  5. Jake Barnes
    Replies:
    1
    Views:
    133
    Jake Barnes
    Sep 6, 2007
Loading...

Share This Page