• ベストアンサー

マウスオンで画像を出す方法について

ドリームウィーバー初心者です。 ホームページに写真をアップしようと思うのですが、 縮小版の写真にマウスオンをして、横に大きく写真を出す、 というのは、どのようにしたらよいのでしょうか？ 出来ればフレームは使いたくないのですが・・・ ドリームウィーバーのチュートリアルではよく解らなかったので、 ご教授をお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#176215
noname#176215
回答No.2

やり方は色々ありますが 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> 例えばこんな感じです。

touya_mam
質問者

お礼

丁寧な解説、ありがとうございます。 色々やり方があるんですね。JavaScriptは使ったことが無いのですが、 headに入れる分、コピペで使わせていただいてよろしいでしょうか？ （追々勉強させていただきます・・・；；） bodyは応用がいろいろ利きそうですね、ぜひやってみます。 ありがとうございました☆

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • ICHI-yan
  • ベストアンサー率33% (45/134)
回答No.3

「リモートロールオーバー」でグーグルの推薦です。 一応２つあげます。もっと知りたければ検索してみてください。 ​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でのタイプです。

touya_mam
質問者

お礼

回答ありがとうございます。 すみません、リンク先のページが二つとも開けませんでした；； ですが、リモートロールオーバーでググってみます。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • raraco001
  • ベストアンサー率83% (10/12)
回答No.1

Dreamweaverの機能を使うより、そういうものをフリーで配布しているところのものを参考にした方が簡単かもしれません＾＾； http://zend.lojcomm.com.br/icarousel/example6.asp ご参考までに＾＾

touya_mam
質問者

お礼

回答ありがとうございます。 タグとか、色々フリーの魅力的なものが氾濫していて、使いたいところなのですが、 依頼先（といっても友人で、お金を取っているわけではありません）から、 著作権のあるようなものは出来るだけ使わないで欲しい、と言われまして…；； それにしてもこのページはすごいですね！ほんまにこんなのが理想です！！ このタグ、勝手に使ってしまっても良いんでしょうか？？ （日本語では無いのでイマイチよくわからないのですが・・・）

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • Adobe Dreamweaver CS3

    ドリームウィーバーでホームページを転送すると、フレームごとにバラバラになってしまい、まとめて表示できません。 どうすれば、フレームを使ったホームページをまとめて表示できますか？

  • ドリームウィーバーでのフラッシュファイルのアップ方法についておたずねし

    ドリームウィーバーでのフラッシュファイルのアップ方法についておたずねします。 マイドキュメントにaaabbbccc.avi というファイルがあります。これはメールでいただきましたが、なぜかメール上ではaaabbbccc.avi.FLVになっていました。 ファイルの属性を見ますとVideo for Flash　とあります。 ところで、このファイルはフラッシュなので、ホームページに表示させたいのですが、ドリームウィーバーのMXエデュケーション版です。 ドリームウィーバーには、Fという赤いアイコンがあり、それをクリックして上記のファイルを挿入しても、アニメーションされません。 どのような手順で行えばよろしいでしょうか。

  • クリックかマウスオンで写真の表示を変更する方法

    大変素人ですがホームページ作成にあたって質問したいことがあります。 ・クリックorマウスオンすると細部までよくみえる拡大写真が表示される ・クリックorマウスオンすると、撮影場所やURLやタグなどの追加情報が表示される のどちらか、もしくは両方を可能とする方法を知っている方、またはフリーソフトウェアを知っている方、ぜひ回答をお願いします。

  • ドリームウィーバーは最新版を使わないと駄目なんですか？

    ドリームウィーバーを初めて勉強しようと思っています。 ソフトを購入しようとも思いましたが、最新版はやたら高くてとても手を出せません。 そこでヤフオクで古いバージョンのドリームウィーバーを購入しようと考えているんですが、最新版と古いバージョンは具体的にどういったところが違うんでしょうか？ ちなみにドリームウィーバー３．０を考えています。 ちなみにドリームウィーバーＭＸってありますが、３．０と比べてどちらが使いやすいんでしょうか？ ご教授よろしくお願いします。

  • Dreamweaver CS3

    ドリームウィーバーでフレームを使ったホームページを作成し、保存すると、次回編集するときに、フレームが表示されなく、フレームごとに保存されてしまいます。 どうやれば、ひとつにまとめて、編集できるのでしょうか？ 回答よろしくお願いします。

  • ホームページにＰＤＦファィルをアップする方法は？

    ドリームウィーバーを使用してホームページを作成しております。 ホームページ上にＰＤＦファイルをアップする方法が わかりませんので、何方か御存知の方がいらっしゃいましたら、 ご指導宜しくお願い致します。

  • 画像の上に表を描きたい

    ドリームウィーバーでホームページを作成しています。 ワードでポジフイルムのような画像を作り、それをFireworksにコピーしpng形式にしました。 この画像をドリームウィーバーの新規ページに挿入しました。 この後、ポジフィルムのような画像の中に３列１行の表を挿入し、表のセルの中にサムネールにした写真を入れたいのですが、そのようなことができるでしょうか。　表の写真にリンクをはって、大きな写真を表示したく思っていますが・・・・・。 もし、スタイルシートとかジャバスクリプトで可能であれば、ソースもお願いできれば幸いです。 よろしくご指導願います。

  • テーブルのテンプレート機能。すなわち、ドリームウィーバーみたいな機能付きで安いソフト。

    質問の要約： ホームページ作成ソフトで、ドリームウィーバーみたいにテンプレート機能（この表現でいいのかな？）があるソフトを教えてください。ドリームウィーバーは高すぎます。 質問の詳細： フレームのあるページではメニューを一つ増やしても、フレームのファイルにメニューを追加するだけで済みます。でも、テーブルでメニューの欄をつくった場合、メニューを一つ増やすと、すべてのページに追加しなければなりません。 ドリームウィーバーではテンプレート機能（この表現でいいのかな？）のお陰で、メニューを一つ増やしても、自動的にすべてのページにメニューを追加してくれます。 そのような機能のある安いまたは無料のソフトを教えてください。お願いします。 ホームページビルダーはこの機能がないので困っています。

  • ホームページ制作のタグで、小さなサムネから大きな画像にリンクする場合…

    ホームページを作りたいのですが、 今まではhtmlタグでやってきました。 しかし最近ではスタイルシートが主流とのことで、 これを機にスタイルシートで作り直そうと思うのですが、 まだまだわからないことだらけで… どなたか御教授下さい。 やりたいことは、 ・ページが左右で2分割されている形 ・左フレームには、縮小版の小さなサムネイルが並ぶ ・そのサムネをクリックすると右フレームに大きな写真が表示 です。 htmlだと <frame src="○○.html"> になるのでしょうか？ これをなんとかスタイルシートでくみたいのですが… ちなみに、スタイルシートってCSS以外にも いろいろ種類があるのでしょうか？？

  • ドリームウィーバー４を使ってます

    当方、ドリームウィーバー歴２週間の初心者です。 ドリームウィーバー４を使ってＨＰ作りをしています。 レイアウトセルに色をつけて、表示したいときにはどうしたらよいのでしょうか？ フレーム画面で、ボーダーを指定すると書けるには書けるのですが、どうしても太い線になってしまいます。細い枠線を書いて、表示する方法ご存知の方居ましたら、お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する