「ほっ」と。キャンペーン
<< ブログダイエット:テーブル表示... 夏休み特別企画:ペルセウス座流... >>
 

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

はじめに

夏休特集の第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 | Trackback(1) | Comments(24)
トラックバックURL : http://potto.exblog.jp/tb/2167552
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from すみれロック at 2007-02-17 17:52
タイトル : この壁の向こう側
昨日の↓おしりプリッが意外にも好評だったので、ちょこっと紹介させていただきます♪   ぽっとさんのブログ ぽっとの陽だまり研究室 *画像をスムーズにズームして表示する方法について*  RIEさんのブログ Jeweldays! *マウスが乗ると画像がチェンジ!* こちらで、わかりやすく説明してあります(o^∇^o)ノ 参考にしてみてください♪ ブログおしゃれ講座以外の記事も、とってもおもしろいです。ぜひ一度行ってみてください♪ さて、問題です。すみれはどこにいるでしょう?(笑) おも...... more
Commented by cafemocha6 at 2005-08-12 23:40
Pottoさん、こんばんわ♪
おもしろい技ですね~。♪すごぉい(*゜O゜)ノ
下の記事の「アクア画像」もステキですね。
こんど時間があるときに試してみます。
Commented by akisa1106 at 2005-08-13 00:28
いいですね!これ。
写真、大きいのをのせると、場所をとるようでいやだし、でも小さいとよく見えないし・・・と結構悩むんです。どのくらいの大きさにするか。
これ、いつか試してみたいです~。
Commented by tukasa_suzukaze at 2005-08-13 14:35
JAVAやFLASHでなくても
このような技が使えるのですね
感動しました
Commented by potto37 at 2005-08-13 21:10
みなさん、コメントありがとうございます。
嬉しいコメントを頂けると、励みになりますね^^

>cafemocha6さん、こんばんは^^
面白いでしょ^^ 何に使おうか迷っていますが、使う機会があったら使いたいなって思っています。
ゆっくり楽しんで下さいね。

>akisaさん、気に入って頂けて嬉しいです。
写真をのせるのも面白そうですね^^

>tukasa_suzukazeさん、こんばんは^^
そうそう、Javaなど利用できなくてもちょっと遊べることがあるので
楽しいですね。
Commented by ayamori-yako at 2005-08-14 13:59
この技、すごくいいですね!onmouseが使えなくて困っていたんですけど、これで解消できそうです。
ところで・・初歩的な質問で大変申し訳ありませんが、CSSの部分は理解できたんですけど、HTMLの部分で質問です。
それはスキン編集のHTMLに加えるんですか?記事投稿する欄に入れるのでしょうか??もしスキン編集のHTMLに加えるとしたら、その画像は記事投稿するときにどうやって呼び出すのですか?教えてくださーい!!
Commented at 2005-08-15 19:27
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-08-16 20:11
yamori-yakoさん、こんばんは。
この技はHTMLを書き込めるところならどこでもOKです。
今回は説明用に投稿欄に入力をしました。

画像のアップは私のホームページの記事ですが以下のアドレスが参考になります。
http://www.geocities.jp/potto372/exblog/imgup.html

また、投稿欄からの画像をアップして生成されるHTMLのソースを読んでそのアドレスを用いる方法も利用できます。
今回の記事は後者の手法を用いました。
Commented by potto37 at 2005-08-16 20:11
鍵さんこんばんは
スキン編集のプレビューを表示していたので、リンクのその先にいけないけど、ちょっと分かりづらかったですね。
リンク先をプレビューではなく、サイトのトップにしておきますね。

Commented by ayamori-yako at 2005-08-16 23:48
あ!そうですね!マイイメージアカウントがあるのを忘れてました┐('~`;)┌
もう私ったら・・失礼しました。
そして、出来ましたよ!!
よくパンを作るので、焼く前と焼き上がりでオンマウスを使いたかったんです~!!ありがとうございます。
今度落ち着いたら記事にしたいと思いますので、予告TBです!
Commented by potto37 at 2005-08-17 22:31
ayamori-yakoさん、こんばんは。
焼きたてのパンって美味しくていいですね。
Commented by akikou10 at 2005-08-18 22:57
初めてコメントします。
早速試しました。うまく出来ましたのでうれしくなりました。
有難うございました。
Commented by kzk_n at 2005-08-19 17:10
はじめまして。kzk_nと申します。
素敵な技がいっぱいありますね!
リンクさせていただきましたので、よろしくお願いします。
これからも素敵な技に期待します♪
Commented by potto37 at 2005-08-19 19:57
akikou10さん、うまく設置できましたね。
出来ると嬉しいですよね。
Commented by potto37 at 2005-08-19 19:58
kzk_nさん、はじめまして。
リンクを確認できなかったのだけど、リンクして頂いてありがとうございます。こちらこそ、よろしくお願いします。
Commented by maruchoro1 at 2005-10-07 00:36
はじめまして、いつも色々と参考にさせていただいています
だいぶたってしまったのですが
これを試させていただきました
びっくりするほど、うまく出来ました
愛犬ブログですが、楽しく遊んでみました
これからもよろしくお願いします。
Commented by potto37 at 2005-10-07 20:42
maruchoro1さん、はじめまして。
楽しめたようで、よかったです^^
こちらこそ、よろしくお願いします。

追伸:コードを転記しないで下さってありがとうございます。
Commented by whipwhip at 2005-11-04 16:43
はじめまして。
こちらを参考にさせていただきました!
ズームじゃなく同じ大きさで変わるようにしたのですが・・

事後報告ですみません。
楽しいワザをありがとうございます♪
Commented by potto37 at 2005-11-04 22:17
whipwhipさん、はじめまして
ご報告ありがとうございます。
画像を変えるのも楽しいですよね。
気に入っていただけてうれしいです^^

Commented by holly-bell at 2006-06-26 23:33
はじめまして。onmouseが使えなくて困っていて色々探していてここにたどりつきました。
同じサイズの画像で変わるようにしたんですが、1枚目と2枚目で高さがズレてしまい、うまく変わることができません。これは何がいけないのでしょうか?
イキナリの訪問で質問ですいません。
Commented by holly-bell at 2006-06-27 23:10
なんとかうまくいきましたw
また色々なテクニック参考にさせてください。
これからもヨロシクお願いします。
Commented by potto37 at 2006-07-03 07:31
holly-bellさん、うまくできてよかったです。
こちらこそ、よろしくお願いします。
Commented by tamamaip at 2007-09-26 11:50
はじめまして。
マウスオンしたくて、jeweldaysさんの所へたどり着き、コチラのテクニックも拝見しました。
マウスオン、多分出来たと思います。
ありがとうございました。
Commented by tamamaip at 2007-09-26 17:16
残念ながら、出来ませんでした。 orz
Commented by potto37 at 2007-09-26 20:55
ちょっと難易度が高いので、気にしないで下さいね。
意外とちょっとしたことでできないだけの場合が多いので、
また時間が経ってから、ためすとできたりもしますよ。
<< ブログダイエット:テーブル表示... 夏休み特別企画:ペルセウス座流... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。