<< ブログダイエット:テーブル表示... 夏休み特別企画:ペルセウス座流... >>
 

画像をスムーズにズームして表示する方法について

はじめに

夏休特集の第2段として、いつも遊びに来ていただいている皆さんに、面白い技を紹介させて頂きます。
javaScriptを使用していないので、Exciteでも楽しめる技です。ちょっと難しいですが、よろしかったら遊んで下さいね。(Excite以外でも楽しめると思います)

まずはじめに、下の画像にマウスを乗せてみて下さい。



いかがでしょうか。画像が大きくなったでしょうか。
JavaScritpを使用しないで、画像をズームして表示する方法です。
よろしかったら、以下のリンクをクリックして遊んで下さいね。




概要


 この技はアンカータグの中にimgタグで2つの画像を埋め込んであります。2つの画像にはsmallとzoomの2つの違ったクラスを指定してあり、通常はzoomの画像をdisplay:none;で非表示にし、マウスが乗った時に display:block;で表示するようにしてあります。


HTML部分

説明用に改行とコメントを入れてあります。


HTML編集

<div class="popup">
<a href="">

<!- 始めに表示しておく小さな画像 ->
<img src="イメージURLアドレス" height=高さ width=幅 class="small">

<!- マウスを乗せて大きく表示する画像 ->
<img src="イメージURLアドレス" height=高さ width=幅 class="zoom">

</a>
</div>








CSS編集


CSS編集

/*画像の拡大表示*/
.popup a:link img.zoom,
.popup a:visited img.zoom,
.popup a:active img.zoom,
.popup a:focus img.zoom{
display:none;
border-style:none;
}

.popup a:hover{background-color:transparent;}

.popup a:hover img.zoom{
border-style:none;
display:block;
}

.popup a:link img.small,
.popup a:visited img.small,
.popup a:active img.small,
.popup a:focus img.zoom{
border-style:none;
display:block;
}
.popup a:hover img.small{
border-style:none;
display:none;
}




今日のポイント
  • 2つのイメージまたは、ひとつのイメージに対して小さいサイズと大きいサイズを指定しておきます。通常は、小さいイメージのみを表示しておいて、マウスが乗った時に大きい画像と切り替えて表示を行っています。
  • display:none;で非表示にしています。

  • ブラウザによっては対応していないものもあるかもしれません。試行錯誤して作ったので^^;




難易度:★★
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-08-12 19:46
<< ブログダイエット:テーブル表示... 夏休み特別企画:ペルセウス座流... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。