electroglyph opened this issue on Sep 24, 2011 · 13 posts
Rayraz posted Tue, 27 September 2011 at 1:29 PM
A more clear color-coded css (for some reason i cant edit the old one)
/* 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.