地图弹窗(map pop)具体演示
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 전환//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>CSS实例讲解：地图提示(map pop)档</title>
<style type="text/css" media="all">
* {마진:0; 패딩:0;
}
img { 테두리:0;
}
#show{ 텍스트 정렬:왼쪽;
}
ul { 목록 스타일 유형:없음; 배경: 투명
url( ) 반복 없음 -130px
0px;
}
ul li a#map01:hoverspan.offset, ul li a#map01:focusspan.offset, ul li
a#map01:활성 범위.오프셋 { margin-top:-1px; 여백-왼쪽:230px;
}
ul li a#map02 { 너비:110px; 높이:75px; 여백 상단:-50px;
여백-왼쪽:235px;
}
ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active {
배경:투명
url( ) 반복 없음 -115px
-88px;
}
ul li a#map03:hoverspan.offset, ul li a#map03:focusspan.offset,ul li
a#map03:활성 범위.오프셋 { 여백-상단:-89px; 여백-왼쪽:245px;
}
ul li a#map04 { 너비:110px; 높이:120px; 여백 상단:-60px;
여백-왼쪽:5px;
}
ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active {
배경:투명
url( ) 반복 없음 -240px
-153px;
}
ul li a#map05:hoverspan.offset, ul li a#map05:focusspan.offset, ul li
a#map05:활성 범위.오프셋 { 여백-상단:-154px; 여백-왼쪽:120px;
}
</style>
</head>
<본체> <ul> <li><a id="map01"
href="#map01"><span class="offset"><img
src=" /><span>팝스빌 커뮤니티입니다<strong>게시물
사무실</strong>, 우편요금이 비싼 집입니다. 지도를 클릭하세요
더</span></span></a></li> <li><a
id="map02" href="#map02"><span class="offset"><img
src=" /><span>집은 맥주가 있는 곳입니다.
<strong>듀 드롭 인</strong>. 주말에는 라이브 음악을 감상할 수 있습니다.
자세한 내용을 보려면 지도를 클릭하세요.</span></span></a></li>
<li><a id="map03" href="#map03"><span
클래스="오프셋"><img
src=" /><span>아름다운 해변에서 나른한 여름 오후를 보내세요.
<strong>리버 비치</strong>. 누드 해변에서 시간을 보내보세요.
자세한 내용을 보려면 지도를 클릭하세요.</span></span></a></li>
<li><a id="map04" href="#map04"><span
클래스="오프셋"><img
src=" /><span>우리 지역 <strong>우드랜드
트레이더스</strong>는 진정한 소비재 및
하드웨어. 지도를 클릭하세요
더</span></span></a></li> <li><a
id="map05" href="#map05"><span class="offset"><img
src=" /><span>시골생활은 로드킬을 뜻하며,
<strong>Wild Game Diner</strong>에서는 특별 메뉴로 준비합니다.
소스. 지도를 클릭하세요
더</span></span></a></li> </ul>
</body>
</html>