
jankoatwarpspeed.comより、CSSで吹き出しコメント(ピンバルーン)の作成方法の紹介です。
ソースは下記のようになります。HTMLのマークアップはシンプルです。
HTML
<div id="map">
<div id="america"></div>
<div id="europe"></div>
<div id="africa"></div>
<div id="asia"></div>
<div id="australia"></div>
<div id="southAmerica"></div>
</div>
肝心のCSSは、吹き出しの部分は背景画像で設置するだけです。
CSS
#america {
background-image:url('america_small.png');
top:60px;
left:30px;
background-position:right bottom;
}
#america:hover {
background-image:url('america_big.png');
}
コメント