Wednesday, August 12, 2009

Creating interactive Library floor plans

I've been hoping for a while now that the e-tutorial I am working on could include interactive maps of the Library floors with pop-up text boxes and audio files to give information on services and holdings.

I've just won part 1 of the battle - magically appearing text boxes when you roll your mouse over a section of a map. (To all you experienced coders out there this probably sounds like quite basic stuff, but for me, working with our in-house content management system, and no real coding experience in the last 3 years, its quite a cool thing to have sorted out - so bare with me).

I've found a free image mapper online at: http://www.image-maps.com/which I have used to section off parts of the Library floor plan and then add on-mouse-over functions to so that when you roll your mouse over the Short Loan collection for example, the image swaps to a new image which displays the original floor plan with another image over the top of it showing the descriptive text relating to the Short Loan collection.

You can see the test page in all it's glory at the moment, but it might get removed soon, when I figure out how to do the next bit.

I've used paint.net (which is a free download) to create the alternative images which appear on mouse over, but I am reliably informed by our Systems Librarian that Photoshop would be better and I'm hoping he will be around this afternoon to install it on my machine so that I can play with ways to make it look cooler than it currently does.

Anyway - I thought it might be a useful trick to share as I have found no simple way of creating actual pop up boxes for image files, and also because it will get around the problem of pop-up blockers ruining the effect when students try to use the maps.

As for getting the audio files to play that is part 2 of the battle, which will commence as soon as I have sharpened my sword.

Has anyone else created interactive maps?
How have you done it?
Do you have a more elegant solution than mine?

Have you included audio files?

2 comments:

Michelle said...

I have used this script to create a floor plan:

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Here is the result:

http://www.albion.edu/library/circ/map_MuddStockwell.asp

Katharine said...

Thanks very much Michelle, it looks really good - I especially like that it starts with an image of the outside of the building.

I might have a look at using the code you link to and see if I can produce something from it for us - I would like ot include audio files as well though, so I may have to see how that works first.

Thanks very much for your comment.