JavaScriptによる画像切り替え

JavaScriptを使って画像を切り替えるボタンを設置する方法です。この方法だとページ自体を更新しないので比較的軽くなると思います。


<SCRIPT type="text/javascript">
<!--
function showimg1(){
document.area1.src = "画像1のURL";
}

function showimg2(){
document.area1.src = "画像2のURL";
}

function showimg3(){
document.area1.src = "画像3のURL";
}
-->
</SCRIPT>

<img src="最初に表示する画像のURL" name="area1">

 <input type="button" onclick="showimg1()" value="画像1">
 <input type="button" onclick="showimg2()" value="画像2"> 
 <input type="button" onclick="showimg3()" value="画像3"> 
 「showimg4」「showimg5」…という感じに緑の部分の数字をかぶらないようにすればボタンを追加できます。

ボタンをクリックすると画像とリンク先が切り替わります。

コメントいただきましたので追記してみました。こちらは画像と一緒にリンク先も切り替わり実用的かもしれません。複数設置する場合are、showingなどの変数は重複しないよう気をつけてくださいね。


<SCRIPT type="text/javascript">
<!--
function showimg1(){
  document.area1.src = "画像1のURL";
  document.getElementById("area2").href = "リンク先URL";
}

function showimg2(){
  document.area1.src = "画像2のURL";
  document.getElementById("area2").href = "リンク先URL";
}

function showimg3(){
  document.area1.src = "画像3のURL";
  document.getElementById("area2").href = "リンク先URL";
}
-->
</SCRIPT>

<a href="最初のリンク先URL" id="area2" >
  <img src="最初に表示する画像のURL" name="area1">
</a>

<input type="button" onclick="showimg1()" value="画像1">
<input type="button" onclick="showimg2()" value="画像2">
<input type="button" onclick="showimg3()" value="画像3">

ボタンをクリックすると説明文も切り替わります

ついでにもう1つ。画像とリンク、さらに下にある解説文もクリック1つで切り替わります。こちらも「imgLink」、「linkArea」などは変数ですのでご自由に設定しても大丈夫です。

ここの文字も一緒に変わります。

<SCRIPT type="text/javascript">
<!--
function showimg1(){
  document.imgLink.src = "画像1のURL";
  document.getElementById("linkArea").href = "リンク先URL";
  document.getElementById("message").innerHTML = "表示する文章1";
}

function showimg2(){
  document.imgLink.src = "画像2のURL";
  document.getElementById("linkArea").href = "リンク先URL";
  document.getElementById("message").innerHTML = "表示する文章2";
}

function showimg3(){
  document.imgLink.src = "画像3のURL";
  document.getElementById("linkArea").href = "リンク先URL";
  document.getElementById("message").innerHTML = "表示する文章3";
}
  -->
</SCRIPT>

<a href="最初のリンク先URL" id="linkArea" >
  <img src="最初に表示する画像のURL" name="imgLink">
</a>
<div id="message">最初に表示する文章</div>

<input type="button" onclick="showimg1()" value="画像1">
<input type="button" onclick="showimg2()" value="画像2">
<input type="button" onclick="showimg3()" value="画像3">
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
初めまして。
こちらの記事を参考に切り替え機能を付けさせてもらったのですが、
Javasは右も左もわからないもので;
切り替え画像にリンクを貼ることはできるでしょうか?
【2011/01/23 19:55】 | NFF #- | [edit]
初めまして。
Javasは素人で右も左もわからないので、こちらのソースを参考に画像切り替えを作らせて貰ったのですが、画像にリンクを張ることってできますでしょうか?
よろしかったらご教授お願いします><
【2011/01/23 20:09】 | NFF #Gv/INgs. | [edit]
NFFさま、ご質問ありがとうございます。

確かにリンクが付いてあった方が実用的ですね。

別記事にて解説してみましたのでぜひご覧ください。

http://weboook.blog22.fc2.com/blog-entry-222.html
【2011/01/24 23:15】 | 管理人 #E2ywrYdA | [edit]
はじめまして。
不躾な質問ですみません。

「ボタンをクリックすると説明文も切り替わります」

のボタンをnext,backにかえて
一周したら画像1に戻るようなループさせることはできませんか?

いろいろ探したのですがしっくりくるものは見つからず
素人で自分で書き換えることもできなく
質問させて頂きました。

よろしかったらご教授下さい。
【2011/04/19 18:48】 | kob #- | [edit]
はじめまして。

仰られるような内容のものですとこの記事で
紹介されているものとちょっと違い、
配列を使うことになります。

http://www.pori2.net/js/DOM/3.html

このサイトで画像をクリックすると次の画像に進む
というものが紹介されています。

これを応用すれば可能になるかと思います。
【2011/04/20 23:09】 | 管理人 #E2ywrYdA | [edit]
はじめまして。

最後の「ボタンをクリックすると説明文も切り替わります」なのですが、設置してみたところ、画像しか切り替わりません。
説明文はどのように切り替えるのでしょうか。
【2011/06/23 21:52】 | merumo #JqCKsvdc | [edit]
はじめまして~

サンプルはクリックしたときの文字をすべて一緒にしているので、変わっていないように見えるのだと思います。
サンプルを若干変えていますので、もう一度コピペで確認していたしましただければと思います。
【2011/06/24 13:49】 | 管理人 #E2ywrYdA | [edit]
こんばんは。早速のご返答ありがとうございます。

コピペで試した場合は動作確認が出来ました。

リンク先が不要(画像と説明文の切り替えだけにしたい)なので、「最初のリンク先URL」の記述を外してしまうと、説明文が変化しなくなってしまうようなのです。クリックする場所もボタンではなくサムネイル画像に置き換えたいのでちょっと苦労しました。

とりあえず自身のページへのリンクという形にしたら説明文も切り替わるように出来ました。
【2011/06/24 18:29】 | merumo #JqCKsvdc | [edit]
うまくいってよかったです。

またお立ち寄りくださいね~
【2011/06/25 16:17】 | 管理人 #E2ywrYdA | [edit]
「ボタンをクリックすると画像とリンク先が切り替わります。」
の項目ですが…
スクリプト範囲のURLは変更しましたが…なぜか…「最初のリンク先URL」にしかジャンプしません。。

誰か教えてください。
【2011/07/06 12:33】 | あああ #- | [edit]
IEは対応していないのでしょうか…??
【2011/07/06 17:12】 | あああ #- | [edit]
ご指摘ありがとうございます。

IEでもエラーが出ないようにコードを書き換えました。
これで大丈夫だと思います。

すいませんでした。
【2011/07/08 00:33】 | 管理人 #E2ywrYdA | [edit]
よく出来てますね。

少しデザインを変えようと
<input type="button" onclick="showimg1()" value="画像1">

上記のボタン部分をロールオーバーで切替わる画像にしようと考えているの
ですがうまく行きません。

どうすればよいでしょうか
【2011/07/13 21:13】 | backpony #liBzb54w | [edit]
WEB作成初心者でも分かりやすくて、ありがとうございます。
クリックとボタンをマウスオーバーと画像に変えても動いて良かったです。

>backponyさん
やりたいことがこれでしょうか?
http://www.red.oit-net.jp/tatsuya/java/image3.htm

【2011/07/19 18:24】 | galaxie500 #- | [edit]
おはようございます。

galaxie500さん、ありがとうございます~。

backponyさんが仰っているものにぴったりかなと思います。
【2011/07/22 08:06】 | 管理人 #E2ywrYdA | [edit]
galaxie500さん
確認が遅れてごめんなさい。

http://www.red.oit-net.jp/tatsuya/java/image3.htm

まず、上記ページの下の4つの画像1つにマウスを合わせると個々
の画像がロールオーバーで変化するようにし、

その画像をクリックすると上部1つの画像が切り替わり固定され
画像のリンク先から別のページへ飛ぶようにしたいのです。

お願いします。
【2011/07/22 18:41】 | backpony #- | [edit]
javascriptで画像の切り替えを探していました。
ありがとうございます。質問になってしまうのですが、
フレーム割をした状態ではこの画像の切り替えが動きませんでした。
どうすればよいかもしよろしければ教えていただければ幸いです。
【2012/01/20 13:21】 | 大学生 #- | [edit]
お役に立てて幸いです。

ご質問の件ですが、もしボタンと画像が違うフレームにあるのでしたら動かないはずです。
見た目は1つのページでも、中身は違った2つのページですので、
違うページの画像を制御するのは不可能だと思います。
【2012/01/20 18:04】 | 管理人 #E2ywrYdA | [edit]
はじめまして。JavaScriptによる画像切り替えですがうまく使用できました。この「画像1・画像2・画像3」ボタンにくわえて「前へ」「次へ」ボタンもくわえることは可能でしょうか? (画像1~3ボタンをおしてそれぞれの画像がでる+前へボタンで前の画像に、次へボタンで次の画像に)
【2012/02/09 19:03】 | みーちゃん #t6ZFu9VA | [edit]
はじめまして、みーちゃん さん

今回紹介したものは、ボタンの役割がはっきり決まっています。
「画像1」のボタンを押すと、「画像1」を表示するという具合ですね。

ご質問の件ですが、「前へ」「次へ」のボタンは、
表示されている次の画像を表示するということで、
表示する画像は、そのときどきで変わってきます。

ですので、今回紹介したものとは別物となります。

方法については、今はちょっと忙しいのでご勘弁ください。
時間できれば別エントリーで紹介させていただきます。
【2012/02/10 07:42】 | 管理人 #E2ywrYdA | [edit]
実際に参考にさせていただいております。

一定時間がたつと時間が切り替わるようにする事は可能なのでしょうか?
あれば、設定方法もご教授頂ければ幸いです。

宜しくお願い致します。
【2012/06/22 17:21】 | やごん #- | [edit]
やごんさん

コメントありがとうございます。

ご質問の件ですが、もちろん可能だと思いますが
ここで紹介したものとはまったく別物になると思いますので
今回はご容赦いただければと思います。

これからもよろしくお願いします!
【2012/07/01 07:23】 | 管理人 #E2ywrYdA | [edit]
初めまして。
こちらのサイトを参考にさせていただいているのですが、
一番最後の「ボタンをクリックすると説明文も切り替わります」
の際に選ばれた画像のボタンが押されているのが分かるように
色などを変更するにはどのようにしたら良いでしょうか。
教えていただけますと助かります。よろしくお願いします。
【2014/09/27 00:01】 | miomio #- | [edit]
miomio さん

試していないのでできるかどうか分かりませんが
ラジオボタンとCSS3の:checkを使えばいかがでしょうか。
【2014/09/28 07:38】 | - #E2ywrYdA | [edit]
はじめまして。

こちらのページ参考にさせていただいています。

”ボタンをクリックすると画像とリンク先が切り替わります。”ですが
showimg9から画像が切り替わらなくなりました。

また、同じページ内でこのareaの数字を変えれば別のグループでもできますか?
【2015/02/24 18:13】 | sue #- | [edit]
参考になりました!
JavaScriptは難しそうで構えていたのですが、とてもわかりやすい解説で、実際に出来ることができました。
ありがとう!
【2015/03/01 08:52】 | ダミー #- | [edit]
sue さん

数が多くなることで動かなくなるということはないと思いますので
名前が間違えていないか、かぶっていないか等確認してみていただければと思います。

変数やidがかぶっていなければ別のグループでも作成できるはずです。
【2015/03/05 07:27】 | 管理人 #E2ywrYdA | [edit]
ダミー さん

コメントありがとうございます。
お役に立ててよかったです。

またお立ち寄りください!
【2015/03/05 07:28】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加