Web Development Thread, Interactive school map - best solution? in Coding and Web Development; Hello,
I am creating an interactive school map, user clicks on a room a picture pops up. Now my problem ...
27th April 2010, 09:26 AM #1
Interactive school map - best solution?
I am creating an interactive school map, user clicks on a room a picture pops up. Now my problem is, we are hiding things in different rooms for kids to find, which requires another hotspot on a pop-up - is this possible?
So far I've not been able to do this, so I just linked the pages instead; ie click on a map, brings you to a different page then perhaps pop-up on that page once they've found the hidden item. It's not as elegant and certainly not as fast, so have you any other ideas how this could be managed?
As you can see I don't do this too often but the SMT has rather taken to the interactive school map with a treasure hunt idea so here I am trying to implement it!
27th April 2010, 09:32 AM #2
Have a look at the source code to the Virtual Tour on my school website for an idea of how to achieve the pop-up photos and placement of hover areas. CSS is here. I found the easiest way of getting the co-ordinates of rooms on the map image was to: open it in Irfanview, drag a selection around the room you want, and look at the co-ordinate references in the titlebar of Irfanview.
Pop-up image is provided by jQuery + Fancybox. I'm not sure about having other hover areas within a pop-up photo though.
<dt><a id="title" href="#" title="Bishop Barrington School Map"></a></dt>
<a class="RM19 fb_image " title="Music Mrs Bain (Photo 1 of 1)" href="media/images/vt/rm19/rm1901.jpg" rel="RM19"><span><strong>Music</strong><br />Mrs Bain</span></a>
Last edited by webman; 27th April 2010 at 09:34 AM.
27th April 2010, 09:35 AM #3
Thanks will have a look!
BTW, I have your site on favourites!
Still have to figure out the 2 - link bit though...
27th April 2010, 09:40 AM #4
Oh well, will have to have a look at your page at home, filtered out by embc.
Unless it blocks me cos it's username/password protected?
27th April 2010, 09:41 AM #5
The other way to do it rather than using an image map is to open the map in Photoshop, save for web, and then use the slice tool to cut the image into smaller ones, with each of your hotspots being a separate square.
Then when you save you'll get an HTML page, containing a table, and a folder full of pictures. You can then make the pictures that you want to be links into links.
27th April 2010, 10:36 AM #6
Looking at css now - our lovely filtering decided to let it through now (no such luck for our teachers currently unable to browse to google, yahoo...)
Just to clarify; I don't have a problem creating hotspots on the picture map; it's this 2-click requirement I'm struggling with. I might have to continue with the original idea of clicking through to another page with the room pic and a bit of a blurb, then have a pop-up on that pic once the hidden item is found.
29th April 2010, 01:35 AM #7
you could get creative with greybox?
Have the school image map open a greybox page in a window, which contains the room image map.
29th April 2010, 08:46 AM #8
I like it! Will have a play with it..
Originally Posted by mossj
By RobFuller in forum Network and Classroom Management
Last Post: 16th June 2012, 11:24 AM
By RabbieBurns in forum General Chat
Last Post: 16th February 2011, 10:29 PM
By mrbios in forum Windows 7
Last Post: 23rd April 2010, 07:04 PM
By DaveP in forum Hardware
Last Post: 11th February 2010, 11:50 AM
By eean in forum Web Development
Last Post: 16th July 2009, 11:34 AM
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)