+ Post New Thread
Results 1 to 8 of 8
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 ...
  1. #1
    znova's Avatar
    Join Date
    Jan 2009
    Location
    Derbyshire
    Posts
    154
    Thank Post
    20
    Thanked 5 Times in 5 Posts
    Rep Power
    14

    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!

  2. #2

    webman's Avatar
    Join Date
    Nov 2005
    Location
    North East England
    Posts
    8,422
    Thank Post
    645
    Thanked 967 Times in 667 Posts
    Blog Entries
    2
    Rep Power
    328
    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:

    Last edited by webman; 27th April 2010 at 10:34 AM.

  3. #3
    znova's Avatar
    Join Date
    Jan 2009
    Location
    Derbyshire
    Posts
    154
    Thank Post
    20
    Thanked 5 Times in 5 Posts
    Rep Power
    14
    Thanks will have a look!

    BTW, I have your site on favourites!

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

  4. #4
    znova's Avatar
    Join Date
    Jan 2009
    Location
    Derbyshire
    Posts
    154
    Thank Post
    20
    Thanked 5 Times in 5 Posts
    Rep Power
    14
    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?

  5. #5
    SteveBentley's Avatar
    Join Date
    Jun 2007
    Location
    Yorkshire
    Posts
    1,455
    Thank Post
    120
    Thanked 264 Times in 190 Posts
    Rep Power
    73
    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.

  6. #6
    znova's Avatar
    Join Date
    Jan 2009
    Location
    Derbyshire
    Posts
    154
    Thank Post
    20
    Thanked 5 Times in 5 Posts
    Rep Power
    14
    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.

  7. #7
    mossj's Avatar
    Join Date
    Dec 2008
    Location
    Leicester
    Posts
    1,466
    Thank Post
    157
    Thanked 189 Times in 174 Posts
    Rep Power
    53
    you could get creative with greybox?

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

  8. #8
    znova's Avatar
    Join Date
    Jan 2009
    Location
    Derbyshire
    Posts
    154
    Thank Post
    20
    Thanked 5 Times in 5 Posts
    Rep Power
    14
    Quote Originally Posted by mossj View Post
    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..



SHARE:
+ Post New Thread

Similar Threads

  1. Help - Primary School Solution - Managed Network
    By RobFuller in forum Network and Classroom Management
    Replies: 21
    Last Post: 16th June 2012, 12:24 PM
  2. springfield map
    By RabbieBurns in forum General Chat
    Replies: 3
    Last Post: 16th February 2011, 11:29 PM
  3. How do you map yours?
    By mrbios in forum Windows 7
    Replies: 20
    Last Post: 23rd April 2010, 08:04 PM
  4. Replies: 0
    Last Post: 11th February 2010, 12:50 PM
  5. Replies: 1
    Last Post: 16th July 2009, 12:34 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •