« 当たりとかゼロ円とか | HOME | 春の嵐 »
2008年04月07日 | カテゴリー: コンピュータを活かす
CSSを使ってポップアップ（テクニカルな覚書）
マウスを持ってくだけでポップアップ
（画像をクリックすると大きく表示されます）
今日はちょっとテクニカルなお話なので
申し訳ありませんがCSSとか興味ない方はスルーしてください。
マウスのポインタを画像の上に持っていったとき
新しく大きな画像がポップアップ表示されるようにする
簡単な方法。
ソース側では同じ画像を異なるサイズで指定。
（最初からサイズを変えた画像２つでも可）
CSS側で疑似クラスを使ってマウスオンの時に
大きな画像が表示されるように指定。
って何言ってるのか分かりませんね。
例えばソース側はこんな感じ
ポイントは大きく表示される側にクラス名を指定
これに対応するCSSは例えば
.popup a{
position: relative;
top: 0;
left: 0;
width: 160px;
}
.popup a .large{
display: block;
position: absolute;
width: 1px;
height: 1px;
top: 0;
left: 0;
}
.popup a:hover .large {
display: block;
position: absolute;
top: -200px;
left: -90px;
z-index: 1;
width: 320px;
height: 194px;
background-color: #fff;
}
こんな感じ。
hoverでbackground-color: #fffを指定してあげないと
IEの表示がおかしくなります。
また、IEと他のブラウザでは表示位置が違っていたり
するので、いろいろなブラウザでどうしても厳密な位置決めが
必要な場合はJavaScriptを使ってください。
本日のキーワードはこちら
CSSでポップアップ« 当たりとかゼロ円とか | HOME | 春の嵐 »
投稿者 WADA : 2008年04月07日 23:11