地图弹窗（マップポップ）具体的な演示
<!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>CSS实例讲解：地图提示（マップポップ）档</title>
<style type="text/css" media="all">
* {マージン:0;パディング:0;
}
img { ボーダー:0;
}
#show{ テキスト整列:左;
}
ul {リストスタイルタイプ:なし;背景: 透明
url( ) 繰り返しなし -130px
0ピクセル;
}
ul li a#map01:ホバーspan.offset、ul li a#map01:focusspan.offset、ul li
a#map01:activespan.offset { margin-top:-1px;マージン左:230px;
}
ul li a#map02 {幅:110px;高さ:75ピクセル;マージントップ:-50px;
マージン左:235px;
}
ul li a#map02:hover、ul li a#map02:focus、ul li a#map02:active {
背景:透明
url( ) 繰り返しなし -115px
-88ピクセル;
}
ul li a#map03:ホバーspan.offset、ul li a#map03:focus scan.offset、ul li
a#map03:activespan.offset { margin-top:-89px;マージン左:245px;
}
ul li a#map04 {幅:110px;高さ:120ピクセル;マージントップ:-60px;
マージン左:5px;
}
ul li a#map04:ホバー、ul li a#map04:フォーカス、ul li a#map04:active {
背景:透明
url( ) 繰り返しなし -240px
-153ピクセル;
}
ul li a#map05:ホバーspan.offset、ul li a#map05:フォーカスspan.offset、ul li
a#map05:activespan.offset { margin-top:-154px;マージン左:120ピクセル;
}
</スタイル>
</head>
<body> <ul> <li><a id="map01"
href="#map01"><span class="offset"><img
src=" /><span>これは Popsville コミュニティの<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
class="オフセット"><img
src=" /><span>美しい夏の午後をのんびり過ごしましょう
それは<strong>リバービーチ</strong>です。ヌードビーチでくつろぎましょう。
詳細については地図をクリックしてください</span></span></a></li>
<li><a id="map04" href="#map04"><span
class="オフセット"><img
src=" /><span>私たちの地元の<strong>森林地帯
トレーダーズ</strong>はまさに消費財のメッカであり、
ハードウェア。地図をクリックすると
詳細</span></span></a></li> <li><a
id="map05" href="#map05"><span class="offset"><img
src=" /><span>田舎暮らしは交通事故を意味します。
<strong>ワイルドジビエダイナー</strong>では特別な料理を用意しています。
ソース。地図をクリックすると
詳細</span></span></a></li> </ul>
</body>
</html>