#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    2
    Rep Power
    0

    Talking Q's about using Image Mapping and Popup Windows to display information.


    Hey all,

    In short, I'd like to create a visual tour of a garden (a hand-drawn landscape plan) that allows users to zoom in to different portions of the garden. I'd like to make it so when a plant is clicked that a pop up window opens and provides not only information about the plant but also thumbnails will open when clicked (then close when clicked outside of). My question is, is this something I could feasibly create on my own? Also, is there any limitations or issues that you guys can point out for me in advance as I'm a novice when it comes to web design? I how to do image maps but don't know how to reference it to a popup window to display the info I need. I also don't know how to incorporate a zoom function into this design.

    To give you guys some context here is some info on me. Right now I'm a landscape design student at the University of Maine and I want to provide a resource for individuals who are unable to visit the Lyle E. Littlefield Ornamental Trial Garden on campus (this could be whether their handicap, too far away to make it to campus, etc.). I have taken a php class (and a max/msp class -- but I don't think that could help me here ) but it was nothing that could have prepared me for a project like this.

    The Garden is a 7 acre property with a lot of garden space. This means that for this project when the user opens up the site they will need to be zoomed out enough that specific details will be difficult to read. Users will have to be able to zoom in to different portions of the garden in order to view specific plants (when clicked on). An example of this can be seen here (the first picture of the lady)
    magictoolbox.com/magictouch/examples/
    . I've also attached a picture of how I imagine the site to look here:
    postimage.org/image/lbpt8bvhn/
    .

    The only thing the 'Magic Touch' script doesn't include (besides that I would want the landscape plan to encompass the whole screen, besides the header) is that I would need to create an image map of the image as well so users could pull up plant info.

    Sorry for the long dragged on details but I just wanted to make sure you guys had all the info so you could assess my situation and hopefully make some suggestions that could save me some time in the long run. Thanks all.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    184
    Rep Power
    31
    Magictouch is already an advanced widget, using XHTML, javascript, and possibly some flash. It could be customized, but I guess that would be harder.

    Since you've taken a web server-side native coding (PHP), you might want to also try the client-side's (HTML for structuring, CSS for styling, and Javascript for adding some features/effects) and focus on coding the <area> tag, as a start.

    They would, eventually, lead you to advanced mapping, which also has functionalities Magictouch has

    Hendra
    Last edited by hdewantara; June 28th, 2012 at 08:05 AM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    2
    Rep Power
    0
    Hendra,

    Thanks for the response. Here is another option that I found that is similar to Magictouch but is also an image map
    http://dannyvankooten.c0m/demo/draggable-image-map-with-zoom/#
    Maybe I'll start with this and work from there. Thanks for the help!

    Originally Posted by hdewantara
    Magictouch is already an advanced widget, using XHTML, javascript, and possibly some flash. It could be customized, but I guess that would be harder.

    Since you've taken a web server-side native coding (PHP), you might want to also try the client-side's (HTML for structuring, CSS for styling, and Javascript for adding some features/effects) and focus on coding the <area> tag, as a start.

    They would, eventually, lead you to advanced mapping, which also has functionalities Magictouch has

    Hendra
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    2
    Rep Power
    0
    Did you fix that ?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    2
    Rep Power
    0
    I have the same like you ! I fix it already

IMN logo majestic logo threadwatch logo seochat tools logo