View Full Version : Virtual Map (in CS4)

02-13-2009, 03:39 PM
I have a vague idea for my latest page. It is a virtual map of a high school with information for most rooms. What i want to happen is i when either a client clicks on a room on a PNG map placed in the center of the screen or a client hovers over a room and a form or box with information about that room comes up without opening a new page. So far, i have come up with several ideas:
1. Using hotspots on the image map for each room, a second form below the main map displays information when you hover or click on a hotspot. When a different room is clicked or hovered over, the information is replaced with new information for the new room. Im not entirely sure how to go about creating this, so i need a good bit of guidance.
2. Using the same hotspots, create a pop-up box (not a separate window) that contains the information needed for each. These boxes can pop up upon clicking or hovering over their respective rooms but need to be replaced by another box when another room is clicked.
3. Use Image Swap to swap a hotspot with an image i will create using Photoshop that will unswap when another room is clicked.

The information i need is just two or three lines and a few pictures, so it can be separately put into Dreamweaver or made into a single image in Photoshop.

I am looking for any and all information that will help me either make one of these ideas work or suggest and explain another way to make this possible.

02-14-2009, 04:31 PM
Have you looked at Lightbox this may help you.

Or look at using something more dynamic like Flash.


02-16-2009, 04:34 PM
ill give this a try and let you know how it goes. Thanks!

02-19-2009, 03:21 PM
it seems to work okay with images. but, im having some trouble applying the lightbox effect to a hotspot. i can get the greyed screen but the image linked to does not appear. here is a copy of the code i have so far.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.style1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 32px;
.style4 {font-size: 16px}
.style5 {font-size: 14px}
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />

<p align="center" class="style1">Mount Mansfield Virtual Tour<br />
<span class="style4">Click on a room or area to display information.<br />
<span class="style5">Note: not all rooms have information.</span></span></p>
<p align="center"><img src="schoolmap.png" alt="MMU Floor Map" width="891" height="544" border="0" align="absmiddle" usemap="#Mainmap" />
<map name="Mainmap" id="Mainmap">
<area shape="rect" coords="15,8,50,46" href="image1.png" target="image1.png" rel="lightbox" />

if you see an error with the hotspot code(in bold) and can help me fix this, it would be greatly appreciated.

03-04-2009, 03:17 PM
bump... im on a deadline, so anything helps

d a v e
03-04-2009, 05:20 PM
check the lightbox homepage for support/faq and their forums

03-05-2009, 03:34 PM
i got it to work in IE, but not in Firefox or Safari. Can anyone help?

03-06-2009, 03:08 PM
bump... seriously, im on a tight schedule... i still have to create hotspots and images for at least one hundred other rooms. i have tried adding
if ((imageLink.rel == 'null')) to line 216 of the lightbox.js script in the lightbox2 folder (i have seen that solution on other sites) but it didnt help at all.

03-06-2009, 04:21 PM
have you tried using just lightbox rather than lightbox 2 its more predictable and easier to set up.

03-07-2009, 08:49 PM
Also have a look at 'Thickbox', which is very similar, but based on the jQuery library instead.