Interactive school map - best solution?

Hello,

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?

Also, do you use javascript for the picture pop-up or another utility?

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!

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.

HTML Markup:

Code:

---

<dl id="imap">
    <dt><a id="title" href="#" title="Bishop Barrington School Map"></a></dt>

    <dd class="RM19">
        <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>
    </dd>

---

References:

• CSS Image Maps, Redux - Flickr-like Technique?
• How to Create an Image Map Using CSS - WebReference.com

Thanks will have a look!

BTW, I have your site on favourites!

Still have to figure out the 2 - link bit though...

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?

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.

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.

you could get creative with greybox?

Have the school image map open a greybox page in a window, which contains the room image map.

Quote:

---

Originally Posted by mossj

you could get creative with greybox?

Have the school image map open a greybox page in a window, which contains the room image map.

---

I like it! Will have a play with it..