• 締切済み

Javascriptについての質問

下の図のように、画像にマウスをポイントすると、下に画像と説明が表示されるようにしたいのですが、画像を大きく表示させることは、出来たのですが、説明の入れ方がわからないのです。 こちらのページも参考にさせて頂いたのですが、イメージ通りにいきませんでした。 http://netneko.jp/homepage/gazoumsg.html http://www16.big.or.jp/~ogura1/java_scr/Photo_mess/Photo_mess.html わかる方がいたら、解答よろしくお願いします。 画像１　画像２　画像３　画像４ 大きく画像を表示 説明文を表示

画像を拡大する

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

2番目の参考サイトが、ほとんどご質問通りになっていると思うのですが…？ それなので、ちょっと方法を変えた例を… あらかじめ表示する内容をHTML内にセットしておいて、スクリプトではそれをコピーするだけというもの。 <ul id="imageList">内に画像と<div class="caption">をリスト形式で並べておいて、マウスオンしたら内容をコピー。 CSS等は適当に調整してください。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #imageList { list-style-type:none; margin:0; padding:0; } #imageList li { float:left; margin-right:10px; } #imageList li img { width:100px; height:50px; } #imageList li .caption { display:none; } #largeImage { width:430px; heigth:215px; } #caption { width:430px; margin-top:1em; border:1px solid blue; } </style> <script type="text/javascript"> <!-- function change(evt){ 　var d, div, t = evt.target || evt.srcElement; 　if(t.nodeName != "IMG" || t.parentNode.nodeName != "LI") return; 　d = t.nextSibling; 　while(d && d.className != "caption") d = d.nextSibling; 　document.getElementById("largeImage").src = t.src; 　if(d){ 　　div = document.getElementById("caption"); 　　while(div.firstChild) div.removeChild(div.firstChild); 　　div.appendChild(d.cloneNode(true)); 　} } //--> </script> </head> <body> <ul id="imageList" onmouseover="change(event)"> <li><img src="A.jpg" alt="画像1"> <div class="caption">画像1の説明</div></li> <li><img src="B.jpg" alt="画像2"> <div class="caption">画像2の説明</div></li> <li><img src="C.jpg" alt="画像3"> <div class="caption">画像3の説明</div></li> <li><img src="D.jpg" alt="画像4"> <div class="caption">画像4の説明</div></li> </ul> <div style="clear:both;"> <p><img id="largeImage" src="A.jpg" alt="large_image"> <div id="caption">&nbsp;</div> </div> </body> </html>

tomy26
質問者

補足

このように、作ってみたのですが、これに具体的にどのように書けば説明が表示されるのでしょうか？初心者でよく理解していないので、詳しく書いていただけると、助かります。 よろしくお願いします。 <p><img src="画像1" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像1'"> <img src="画像２.jpg" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像2'"> <img src="画像３.jpg" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像３.jpg'"> <img src="画像４.jpg" alt="" width="96" height="72" onmouseover="document.bigsora.src='画像.jpg'"><br> <img src="images1/image2.jpg" alt="" width="400" height="300" name="bigsora"><br> </p> </DIV>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • サムネイル画像にマウスを合わせて画像と説明をチェンジ

    javaスクリプトで サムネイル画像にマウスを合わせて 画像と説明をチェンジするには どうしたらいいのでしょうか？ 簡単に言うと以下のURLのフォームでないバージョンにしたいのですが このスクリプトをいろいろと変えてみてもできませんでした。 http://www16.big.or.jp/~ogura1/java_scr/Photo_mess/Photo_mess.html 私どうもjavaスクリプトが苦手なもので 似たような関連記事はほとんど見たのですが もう、さっぱりお手上げです。 参考になるHPか作り方を教えてください。 どうか宜しくお願いします。

  • Javascriptのマウスオーバーについて

    Javascriptでマウスオーバーというものがあります。 画像の上にマウスを持っていくと、画像が切り替わるものです。参考：http://www14.plala.or.jp/sugachuu/JavaScript/k06.html そこで、質問なのですが、マウスオーバーのスクリプトを　同じページ内で　いくつも表示させるのは可能ですか？？（上記参考ＵＲＬでたとえると、大きな画像１つと小さな画像４つを一まとめにして、一まとめしたものをいくつも同じページ内で表示することは可能ですか？？） もし可能なら、そのやり方を教えてください。サンプルソースみたいなのをつけていただくと、うれしいです。 よろしくお願いします。

  • javascriptの商用で使える無料テンプレート

    http://www.aromakankyo.or.jp/ の緑のコンテンツバーの下の部分の画像が切り替わるようなホームページをつくりたいのですが、 javascriptを使っていると思うのですが、会社のＰＲのホームページを作ろうと思っていて 無料で使えるテンプレート素材　javascriptをコピーして入れたいお写真を入れれるみたいなものがあれば教えていただけますか？ よろそくお願いいたします。

  • こんなJavaScript探してます！

    はじめまして。 早速ですが、下記のようなジャバスプリクトを探しています。 ------------------------------------------- ┌──────────┐　 │　　　　　　　　　　　　　　　 │ │　　　　Ａ　　　　　　　　　　 │ └──────────┘　←４枚とも画像です。 ┌─┐┌─┐┌─┐ │ １││２ ││３ │　 └─┘└─┘└─┘　　 １の画像にマウスオンすると、１とＡの画像が別の画像が表示され（すり替えられ）尚且つ１をクリックで別ページにジャンプ。 １※　１・２・３ともリンク先は異なる ２※　マウスオーバー時に表示される画像は1とAとでは異なる ３※　２・３も同様の機能がある ------------------------------------------- 探してみたところ http://bunjin.com/java/change_img0.htmlが近いように思えますが、 このスプリクトを応用してできるでしょうか？ JavaScriptでなくても、こんな方法で出来る等、お教え頂ければ幸いです！ 宜しくお願い致します。

  • JavaScript?

    http://mytahiti.jp/ のサイトで”タヒチがある奇跡”の下に4つの画像があるのですが、画像をクリックするとフルスクリーンなります。 このように表示させるには、どのように書き込めばよいのでしょうか？ よろしくお願いします

  • スタイルシート　画像ポップアップについて

    マウスオンで画像をポップアップさせたいのですが、いくつか 検索をしていて「これだ！」という物があったのですが、ちょっと 変更したくいろいろ試したのですが・・・ やり方が解らないのでご質問させてください。 http://www16.big.or.jp/~ogura1/java_scr/text_image/text_image.html 上記のＵＲＬの画像のポップアップはテキストにマウスオンすると 画像が右側にポップアップする形なのですが これを左側に出るようにしたいのですが、どのようにしたらよいでしょうか？ 教えてください。宜しくお願いします。

  • オンマウス時に任意の場所へ画像を複数表示

    いろいろ探してはみましたが意味がわかりません。 誰か教えてください。 説明が下手ですので図をいれて説明します。 画像の上にマウスをもってきた時、（画像が　■　だとします）　 　　　　　　　　□　□ 　　　　　　　　　■　 　　　　　　　　□　□ このように■の上にマウスを乗せると四枚の画像を四方に表示させ、マウスを外したら消えるようにしたいのですが、どなたかソース解かる方いましたらお願いします。 またＧＩＦアニメを□の画像で表示できるのでしょうか？　　　　　　　

    • ベストアンサー
    • Java
  • ホームページを作っています。

    現在ホームページを作っているのですが、一つ教えて下さい。 マウスを「△△△」に重ねるとテキスト部分に「△△△」のページの説明が表示されるようにしたいのですが、簡単なＨＴＭＬタグ又はＪＡＶＡタグを教えて頂けませんでしょうか？

  • 教えて！ｇｏｏで図を使った質問をするには？

    こんにちは。 たとえばWindows画面上のややこしい説明や、この景色はどこ？　など図や画像を使わないと説明できない質問がある場合、どうやって図や画像を質問に乗せますか？ 自分のホームページのＵＲＬを書くとｇｏｏに削除されてしまいますし・・・

  • javascriptかjQueryか・・・

    ホームページ作成・・・スライドするメニューについてです。 javascriptなどは初心者です。 例えばmixiの右下メニューの中の、「コラボ特集」のようなメニューを作りたいと思っております。 詳細としては、まずHPを開いたら、横長のボックスメニューが出てきます。 最初に3枚の画像が表示されています。4枚目以降は、右に格納(見えない)されていて、4枚目の画像の頭だけが少し出ています。⇒右矢印をクリックすると、4枚目、5枚目が表示され、同時に1枚目、2枚目は左に格納(見えない)されていきます。 逆に←左矢印をクリックしていったら、1枚目、2枚目の画像が現れていく・・・ つまり、常に表示される画像は3枚で、右と左に画像が少しずつ頭を出している、というメニューを作りたいんですね。 その画像には詳細ページへ飛ぶリンクボタンもつけます。 オンマウスで矢印マークが浮かび上がり、マウスが離れると、画像だけのメニューに戻るというのが理想ですが、複雑すぎるのでしたら、常に左右ボタンがついていてもかまいません。 詳しいコードや、URLを教えていただけたら嬉しいです。 「これをアレンジしてみてください」というのは、もしかしたら私には難しすぎると思いますので、できるだけ詳細をお願いします。 わかりにくい説明で申し訳ありません・・・。 皆さまお忙しい中恐縮ですが、どうぞよろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する