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)
. I've also attached a picture of how I imagine the site to look here:
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.
I was curious if what you needed was possible, as I thought not... but found this that is a scrollable, zoomable image map! http://dannyvankooten.com/demo/draggable-image-map-with-zoom/
Just add a lightbox effect to the image map and you are laughing.