- ベストアンサー
マウスオンで画像を出す方法について
ドリームウィーバー初心者です。 ホームページに写真をアップしようと思うのですが、 縮小版の写真にマウスオンをして、横に大きく写真を出す、 というのは、どのようにしたらよいのでしょうか？ 出来ればフレームは使いたくないのですが・・・ ドリームウィーバーのチュートリアルではよく解らなかったので、 ご教授をお願いします。
- touya_mam
- お礼率100% (8/8)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
やり方は色々ありますが JavaScriptを使う方法で。 まず画像は 表示用画像とサムネイル用画像(縮小画像)を作成します。 この時ひとつだけルールがあります。 表示用画像が「1.jpg」なら サムネイル画像は「1s.jpg」と 後ろに 「s」を付けたものにして 必ず「同じフォルダ」に保存して下さい。 後は <head></head>内に 以下のスクリプトを記述します。 <script language="javascript" type="text/javascript"><!-- function imgShow(mySrc){ mySrc = mySrc.replace("s.jpg",".jpg"); var obj = document.getElementById('imgDisplay'); obj.insertBefore(document.createElement("img")); obj.firstChild.src = mySrc } function imgClear(){ var obj = document.getElementById('imgDisplay'); obj.removeChild(obj.firstChild) } //--></script> 以上。<body></body>内は <img src="images/1s.jpg" width="30" height="20" alt="1" onmouseOver="imgShow(this.src);" onmouseOut="imgClear()" /> <img src="images/2s.jpg" width="30" height="20" alt="2" onmouseOver="imgShow(this.src);" onmouseOut="imgClear()" /> <img src="images/3s.jpg" width="30" height="20" alt="3" onmouseOver="imgShow(this.src);" onmouseOut="imgClear()" /> <div id="imgDisplay"></div> 例えばこんな感じです。
その他の回答 (2)
- ICHI-yan
- ベストアンサー率33% (45/134)
「リモートロールオーバー」でグーグルの推薦です。 一応２つあげます。もっと知りたければ検索してみてください。 http://www.lucky-bag.com/archives/2005/08/remote_rollover.html 最初のページで説明。見本ページは別ページ。 http://www.k5.dion.ne.jp/~i-araki/css/onmouse.html このページ一番上の手すりの写真が見本。本文に作り方が。 用語として、ロールオーバーが自分自身が変わるタイプ。それにリモートがつけば遠隔操作になります。で、今回は「リモートロールオーバー」 で、切り替えに、 hoverを使うのがｃｓｓでのタイプ。 onMouseを使うのが、JavaScriptでのタイプです。
お礼
回答ありがとうございます。 すみません、リンク先のページが二つとも開けませんでした；； ですが、リモートロールオーバーでググってみます。 ありがとうございました。
- raraco001
- ベストアンサー率83% (10/12)
Dreamweaverの機能を使うより、そういうものをフリーで配布しているところのものを参考にした方が簡単かもしれません＾＾； http://zend.lojcomm.com.br/icarousel/example6.asp ご参考までに＾＾
お礼
回答ありがとうございます。 タグとか、色々フリーの魅力的なものが氾濫していて、使いたいところなのですが、 依頼先（といっても友人で、お金を取っているわけではありません）から、 著作権のあるようなものは出来るだけ使わないで欲しい、と言われまして…；； それにしてもこのページはすごいですね！ほんまにこんなのが理想です！！ このタグ、勝手に使ってしまっても良いんでしょうか？？ （日本語では無いのでイマイチよくわからないのですが・・・）
お礼
丁寧な解説、ありがとうございます。 色々やり方があるんですね。JavaScriptは使ったことが無いのですが、 headに入れる分、コピペで使わせていただいてよろしいでしょうか？ （追々勉強させていただきます・・・；；） bodyは応用がいろいろ利きそうですね、ぜひやってみます。 ありがとうございました☆