• ベストアンサー

画像を入れ替える方法

ホームページで、画像をクリックしたら、その画像だけが入れ替わるようにしたいと思っています。 A.html というファイルの中に、b.jpg という画像があるとします。その画像をクリックしたら、c.jpg に入れ替わるようにしたいのですが、たとえば、直接、c.jpg にリンクすると、その画像だけが表示されてしまいます。かといって、新しくC.htmlというファイルを作って、その中にc.jpgを入れておくと、画面が変ってしまいます。 また、カーソルが触れると画像が入れ替わるようなことも出来るようですが、できればクリックして初めて画像が変るようにしたいのです。 iframe も考えましたが、画像の大きさが違うとうまくいかないと思いますし、もっとなにかいい方法があれば教えてください。

  • HTML
  • 回答数3
  • ありがとう数2

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

<script type="text/javascript"> <!-- function toggle(img){ if(img.normal==null) img.normal=true; img.src= img.normal ? 'c.jpg' : 'b.jpg'; img.normal=!img.normal; } //--> </script> … <img src="b.jpg" alt="画像" onclick="toggle(this)">

genkigan
質問者

お礼

再度、ありがとうございました。 おかげさまでできました。

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

<img src="b.jpg" onclick="this.src='c.jpg'">

genkigan
質問者

お礼

回答、ありがとうございました。 うまくいきました。できれば、クリックして、c.jpg に変ったところで、もう一度クリックしたら、もとのb.jpg に戻るようにしたいのですが、そのような方法があるでしょうか?

noname#15895
noname#15895
回答No.1

JavaScriptというスクリプトがあり、それで簡単にできます。 その程度なら、JavaScriptを理解しなくてもすぐできると思いますので http://www.google.com/ で JavaScript 画像を入れ替える を検索してみてください

関連するQ&A

  • リンク付画像を所定の時間に切り替える方法

    はじめて質問します。よろしくお願いします。 JavaScriptを使ってリンク付の画像を所定の時間に切り替える方法を教えてください。 具体的には 10:00~11:30 は A.jpg を表示。 クリックすると A.dpl というプレイリストを実行。 11:30~15:00 は B.jpg を表示。 クリックすると B.dpl というプレイリストを実行。 15:00~19:00 は C.jpg を表示。 クリックすると C.dpl というプレイリストを実行。 19:00~22:00 は D.jpg を表示。 クリックすると D.dpl というプレイリストを実行。 この時間、画像、リンクは後々変更したいので変更箇所が少なくすむ管理しやすいものにしたいです。 また、これとは別で画像はA.jpgのみでリンクだけを時間によって変えるということは可能でしょうか? すみませんが、ご教授お願いします。

  • ホームページ作成 リンク先の画像を中央表示する方法は?

    ホームページ作成 リンク先の画像を中央表示する方法は? ホームページを作成しているのですが、 画像にリンクした時にその画像の表示が画面の真ん中に来るようにしたいです。 <a href="image/○○○.jpg" target="_blank"> これでやってみると、○○○.jpg の画像が画面の左寄せで出てきます。 画面の中央にくるようにするにはどうすればいいのでしょうか??

  • 《初心者》HPの画像を切り替える方法について

    現在HPを作成中です。画像について質問させて 下さい。 表(table)を使ってメイン表示/サムネイル表示 をさせようと考えとります。 例:《表の中にA/B/Cスペースを作成》  Aスペース:   一番大きいスペースで初めは画像Bを   『大きく』表示  Bスペース:   小さいスペースで画像Bを『小さく』表示  Cスペース:   Bスペースと同じ大きさで画像C『小さく』表示 上記の表で、Cスペースの上にマウスカーソルが 来るとAスペースにC画像を表示、また、Bスペース の上にマウスカーソルが来るとB画像を表示と言う 動きをさせたいのですが、簡単な方法がございま したらお教え下さい。 (もう一つの手法として、B/Cスペースをクリック  して切り替える場合も教えて欲しいです。) OnMouseとか、JAVAとか使いそうですか?

  • 画像をチェンジ→もとに戻す

    ひとつのページに複数のリンクがあります すこしはなれた場所には、リンクと関係ない 画像A がひとつあります テキストリンク01 にマウスカーソルをのせます すると 画像A は 画像B と入れ替わります テキストリンク01 からカーソルをはずします すると 画像B は 画像A にもどります テキストリンク02 にマウスカーソルをのせます すると 画像A は 画像C と入れ替わります テキストリンク02 からカーソルをはずします すると 画像C は 画像A にもどります テキストリンク03 にマウスカーソルをのせます すると 画像A は 画像C と入れ替わります テキストリンク03 からカーソルをはずします すると 画像C は 画像A にもどります ...................... このようなことをしたいんですが少しわがままかもしれないので、無理なら どのテキストリンクにカーソルを置いても 画像A → 画像B  はずすと 画像B → 画像A こういうJavascriptを教えてください

    • ベストアンサー
    • HTML
  • HTMLの画像ファイルにリンクを貼る方法?

    HTMLの画像ファイルにリンクを貼る方法? 「メモ帳」にHTMLのタグを打ち込みIEに表示できるか試しています。画像がうまく出ません。 <image scr=”富士山.jpg”>と入力しました。 画像ファイルはマイドキュメントのマイピクチャーにある「富士山.jpg」です。X印が出て画面が出ません。他の太字/斜体文字/アンダーラインはOKです。ホームページのマニュアルにある「イメージファイルも同じ場所に置く・・」の意味がわかりません。何か一工夫必要なようです。どなたか教えて下さい。以上 >ホームページ「超初心者のためのホームページ作成講座」より ホームページは、いくつかのページを同じ場所(サイト)に置いています。イメージファイルも同じ場所に置いておきます。もし、イメージファイルをサーバに転送していないと、せっかくタグを使ってリンクを張っても表示されません。イメージファイルの名前を間違って記述した場合も、「サーバの中にはそんなファイルないよっ!」ということで、エラーになってしまいます。

  • HP作成方法について

    ホームページを作成をしたいと考えています。 可能な限り簡単な方法でお願いします。 簡単に説明すると、 ホームページのトップ画面にボタンが3つあります。 各ボタンには(1)(2) (3)と番号が振っています。 リンクボタン(1)を一度押すと A の画像の表示 リンクボタン(2)を一度押すと B の画像の表示 リンクボタン(3)を一度押すと C の画像の表示 させるよう作成したいのですが、作成の方法がわかりません ご教授願います。 表示箇所は、リンクボタンと同じ画面です。 また、表示の大きさは、画面全体の一部分(2/5くらいの大きさです。) ABCについては、こちらで指定した画像及びリンク先ホームページです。 よろしくお願いします。

  • CDに保存した画像が変

    CDに、たとえばA.jpg、B.jpg、C.jpgという画像を保存したとします。このときにB.jpgをクリックしてもC.jpgをクリックしてもA.jpgが表示されてしまいます。それぞれをハードディスクにコピーすれば、ちゃんとクリックした画像が現れるのですが、CDから直接ではダメです。なぜなのでしょう。CD内のアイコンをクリックして、ちゃんとその画像が表示されるようにするにはどうすればいいのでしょう。 パソコンはFMV-MVIII305、CD-RはメルコCDRW-446USBです。

  • ワンクリックで二箇所に表示させる方法。

    こんばんは。 下記のようなページを作っているのですが、質問です。 ------¦-------------------    ¦ B    ¦-------------------    ¦  A  ¦ C    ¦     ¦    ¦    ¦ --------------------------- (↑ずれていたらスミマセン…) ABCはそれぞれテーブルのセルの中に入れています。 Cの部分はIframe使用です。 Aというセルにリンクを幾つか置く予定です。 それは通常Cのインラインフレームの中に表示されます。 質問の内容は、そのAの中にあるリンクの一つをクリックすると、Bの領域とCの領域にそれぞれ違うページを表示出来ないかというご相談なのです。 Aの中のリンクの一つをクリックすると、Bにサブメニューが出て、同時にCにはBのサブメニューに対する説明が出る…というような。 そしてBに表示されたサブメニューをクリックするとCに次々表示される、という形にしたいのです。 要領を得ない質問で恐縮ですが、どなたかお知恵をお貸し頂けると幸いです。宜しくお願い致します!

    • ベストアンサー
    • HTML
  • iframeクッキー指定(?)

    iframeを使用しているのですが、 index.html のiframe内に a.html を、 <iframe src=a.html ~>で表示しています。 そこで、index.html 内のリンクでiframe内に b.html を表示します。 ここで更新を押すと、iframe内には a.html が表示された状態に戻ります。そこで、b.htmlを表示したままにしたいのでクッキーを使用して可能にしているのですが、 index.html 内のリンクでc.htmlを表示して更新を押した際にも c.htmlが、(c.htmlにクッキーを使用しないとb.htmlが)表示された状態になります。 b.html を表示した状態で更新を押すと、クッキーによって、b.html を表示したままにし、 c.html を表示した状態で更新を押すと、クッキーを解除し、a.html を表示する方法を教えてください!! (c.htmlのようなファイルが複数あって、b.htmlのようなファイルは1つです。) javascript超初心者ですので、サンプルなど、記載して説明してくださると助かります。

  • ホームページでの画像切り替えについて

    ホームページ初心者です。 メニューとなる画像を3つ(A~C)と画像Xが表示されている画面を開き、 メニュー画像がクリックされると画像Xが表示されている位置にメニュー画像に紐付いた画像を表示したい(Aがクリックされたら画像A、Bがクリックされたら画像Bといった感じ)です。 画像を切り替えるに瞬時に切り替わるのではなく、画像A・画像Bがゆっくり表示されるようなモノをつくりたいのですが、どのように実装したらいいのかわかりません。 どおなたか、ご教授 お願いいたします。

専門家に質問してみよう