/* make sure the container, map, triggers and pop-ups are block level elements /
.map, .map img, .map .trigger, .map .pop-up {
  display: block;
}
/ make sure pop-ups will be able to overflow their container elements /
.map, .map img, .map .trigger {
  overflow: visible;
}
/ makes the absolutely positioned triggers position themselves relative to the top-left corner of .map /
.map {
  position: relative;
}
/ styling the map /
.map img {
  position: relative;
  width: 960px;
  height: 480px;
}
/ size of trigger and pop-up-container /
.map .trigger, .map .pop-up-container {
  width: 30px;
  height: 30px;
}
/ triggers need to be placed precisely, relative to the map, easiest way to do this is by using absolute positioning.
Also give them a red border and fancy rounded corners in supporting browsers /
.map .trigger {
  position: absolute;
  border: 2px solid red;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/ makes the absolutely positioned pop-ups position themselves relative to the top-left corner of .pop-up-container /
.map .pop-up-container {
  position: relative;
}
/ pop-ups start out invisible /
.map .trigger .pop-up-container {
  display: none;
}
/ pop-ups turn visible if the mouse moves over the trigger /
.map .trigger:hover .pop-up-container {
  display: block;
}
/ position pop-up's bottom left corner relative to the top-left pixel of the .pop-up-container.
Also give them a nice dropshadow in supporting browsers /
.map .pop-up {
  position: absolute;
  bottom: -15px;
  left: 15px;
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 6px #000;
  -moz-box-shadow: 0px 0px 6px #000;
  box-shadow: 0px 0px 6px #000;
}
/ Some basic typographic styling */
h2, p {
  font-family: sans-serif;
  color: #444;
  margin-bottom: 14px;
}
h2 {
  font-weight: bold;
  font-size: 18px;
  line-height: 24px;
}
p {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
}

(_/)
(='.'=)
(")(")This is Bunny. Copy and paste bunny into your signature to help him gain world domination.