CSSで吹き出しコメント（ピンバルーン）の作成方法[CSS]

css0905071.jpg

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');
}