Author's BLOG: http://www.planabc.net/
Map pop demo
Run code box
<! 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">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> CSS instance description: map pop file </title>
<Style type = "text/css" media = "all">
*{
Margin: 0;
Padding: 0;
}
Img {
Border: 0;
}
# Show {
Text-align: left;
}
Ul {
List-style-type: none;
Background: transparent url (/articleimg/2007/03/4514/map_flat.jpg) no-repeat 0;
Width: 350px;
Height: 250px;
Border: 1px solid #000;
}
Ul li {
Display: inline;
}
Ul li {
Position: relative;
Display: block;
Text-decoration: none;
}
Ul li a span. offset {
Position: absolute;
Margin-top:-9000px;
Margin-left:-9000px;
}
Ul li a: hover span. offset, ul li a: focus span. offset, ul li a: active span. offset {
Color: #000;
Background-image: none;
Background-color: # ffffde;
Border: 1px solid #000;
Display: block;
Width: 150px;
Height: auto;
Text-decoration: none;
Cursor: pointer;
}
Ul li a: hover span. offset span, ul li a: focus span. offset span, ul li a: active span. offset span {
Display: block;
Width: 140px;
Margin: 5px;
Height: 120px;
}
Ul li a # map01 {
Width: 80px;
Height: 60px;
Margin-top: 0;
Margin-left: 130px;
}
Ul li a # map01: hover, ul li a # map01: focus, ul # cmp li a # map01: active {
Background: transparent url (/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat-130px 0px;
}
Ul li a # map01: hover span. offset, ul li a # map01: focus span. offset, ul li a # map01: active span. offset {
Margin-top:-1px;
1st 2 3 4 5 6 7 8 9 10 11 pages
