2009年11月19日

CSSだけでおこなう、画像の入れ替えとポップアップ

スポンサード リンク

【幼児・子供用マスク】3層不織布マスク 50枚セット(税込:1,800円)



 画像にマウスを乗せると大きな画像がポップアップします。
Javascriptは使っていません。CSSだけで動作しています。

今のブログで満足ですか?

サンプルソース

<html>
<head>
<title>CSSだけでおこなう、画像の入れ替えとポップアップ</title>
<style type="text/css">
<!--
 .pop{
      position: relative;
      top: 0px; left: 10px;
 }
.ballimg{
         position: absolute;
        top: 83px; left: -5px;
        display: none;

}
a:hover .ballimg {
        display: block;
}
-->
</style>
</head>
<body>
<div class="pop">
  <a href="javascript:void(0);"><img src="../小さい画像1.jpg">
<span class="ballimg"><img src="../大きい画像1.jpg></span></a>

  <a href="javascript:void(0);"><img src="../小さい画像2.jpg">
<span class="ballimg"><img src="../大きい画像2.jpg"></span></a>

  <a href="javascript:void(0);"><img src="../小さい画像3.jpg">
<span class="ballimg"><img src="../大きい画像3.jpg"></span></a>
</div>
</body>
</html>
  a:hover (アンカーテキスト,画像にマウスカーソルが乗った時)を使うと
簡単に様々なプロパティ値を変更することができます。
これを利用してdisplay: none / block を切り替えてます。

position:relative; top: *px; left: *px;
 [相対的配置] 本来表示されるべき位置から、
配置の設定分 top: *px; left: *px; 移動した位置に表示されます。


position:absolute; top: *px; left: *px;
 [絶対的配置] ブロックの性質をもつ親要素から、
配置の設定分移動した位置 top: *px; left: *px に表示されます。
このサンプル場合class="ballimg"ブロックの性質をもつ親要素は
class="pop"になるのでこの位置からtop: 83px; left: -5px;移動した
位置にポップアップした画像が表示されます。

 display: none;
表示しない。(領域そのものが確保されません)。
 display: block;
 インライン要素( <span>,<a>,<img>など )を
ブロックレベル要素のように表示させます。

画像
画像にマウスを乗せると説明文を表示します。
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
a:hoverを使ってアンカーのスタイルを CSSだけで変更します
CSSで作る吹き出しボックス,サンプル
スタイルシート CSS
リスト要素を使ったナビゲーションメニュー
スタイルシート css を使った横並びリストメニュー
スタイルシートだけでポップアップメニュー、補足説明文を表示します。

posted by javaScript at 19:57 | 大阪 ☁ | 画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。