JavaScript初心者のための画像切り替え方法
- JavaScript初心者の方に向けて、画像切り替えの方法をご紹介します。
- HTMLタグとJavaScriptを使用して、マウスオーバーした際に画像を切り替える方法について解説します。
- 画像切り替えにはJavaScriptのonmouseoverイベントを利用し、複数の画像を順番に表示するように設定します。
- ベストアンサー
onmouseoverにて画像切り替え
JavaScript初心者です。 基礎的な質問や初歩的な質問でしたら申し訳ありません。 現在WEBサイトを作成しており、HTMLタグに下記のように記述するとして、 <img src="../images/testimg-1.jpg" name="slide"> と画像を貼り付けてあります。 そこで上記画像にオンマウスしたときに、 testimg-1.jpg~testimg-9.jpgの9枚の画像を オンマウスしている間、testimg-1.jpgから順に画像が 入れ替わるJavaScriptを作成したいのですが、 ご教授お願いできませんでしょうか？ まだ、検索不足なのかもしれないのですが、 メニュー等で使われているような、2枚の画像の入れ替えしか見つからず、 思考錯誤しているのですが、スキル不足のためかどうもうまくいきません。 どなたかアドバイスいただけないでしょうか？
- mouages
- お礼率65% (13/20)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんなのは？ ばぶ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <p><img src="0.jpg" alt="slide photo" id="slide"></p> <script type="text/javascript"> var F = null; document.getElementById('slide').onmouseover = function () { if (! F) changer(); }; document.getElementById('slide').onmouseout = function () { clearTimeout(F); F = null; }; function changer() { var t = document.getElementById('slide'); t.src = t.src.replace(/(\d+).jpg$/, (t.src.match(/(\d+)\.jpg$/)[1]-0+1)%10 + '.jpg'); F = setTimeout(changer, 1000); } </script>
その他の回答 (3)
- think49
- ベストアンサー率59% (285/482)
…と、しまった。 ループする過程で 009.jpg から 001.jpg に戻す処理を忘れていました。 以下、#2を修正。 ------ <script type='text/javascript'> (function(){ var img = ["001.jpg","002.jpg","003.jpg","004.jpg","005.jpg","006.jpg","007.jpg","008.jpg","009.jpg"]; var i = 0; var max = img.length-1; function changeImg(){ var test = document.getElementById('test'); test.src=img[i]; if(i < max){ i++; } else { i=0; } } function init(){ var test = document.getElementById('test'); var timerID; test.onmouseover = function(){ timerID = setInterval(changeImg,1000); }; test.onmouseout = function(){ clearInterval(timerID); }; } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init, false); } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })(); </script>
お礼
修正ありがとうございます。 こちらも参考にさせていただきます。 ありがとうございました！
- think49
- ベストアンサー率59% (285/482)
onmouseover, onmouseout は検索でHITすると思いますが、setInterval も組み合わせるので 初めて取り組むコードとしては難しい部類だと思います。 躓きそうだな、と感じる部分は「onmouseoutでclearIntervalする」ところ。 下記コードはFirefox3で動作確認しました。 -------- <script type='text/javascript'> (function(){ var img = ["001.jpg","002.jpg","003.jpg","004.jpg","005.jpg","006.jpg","007.jpg","008.jpg","009.jpg"]; var i = 0; function changeImg(){ var test = document.getElementById('test'); test.src=img[i]; i++; } function init(){ var test = document.getElementById('test'); var timerID; test.onmouseover = function(){ timerID = setInterval(changeImg,1000); }; test.onmouseout = function(){ clearInterval(timerID); }; } if(typeof window.addEventListener == 'function'){ window.addEventListener('load', init, false); } else if(typeof window.attachEvent == 'object'){ window.attachEvent('onload', init); } })(); </script> </head> <body> <div> <img id="test" src="001.jpg" /> </div> -------
お礼
勉強不足で自分が恥ずかしい限りです。 より勉強していきたいと思います
- masapiyochan
- ベストアンサー率46% (140/301)
>testimg-1.jpgから順に画像が入れ替わる これがいまいち不明です。 たとえば、testimg-1.jpgをオンマウスすると、 testimg-1.jpg~testimg-9.jpgの9枚の画像を全て、 順番にアニメーションのようにそれぞれ、 testimgon-1.jpg~testimgon-9.jpgにかえたいのか、 それとも、たとえば、testimg-1.jpgをオンマウスすると、 そのtestimg-1.jpgの画像を、testimg-1.jpg~testimg-9.jpgの順に、 アニメーションみたいに切り替えていきたいのか。 それともそういうのではないのか。まったくわかりませんが・・・。 どれにしても結構簡単に実現できそうです。
お礼
言葉足らずで申し訳ありませんでした。 回答していただきありがとうございました
補足
早速のご回答ありがとうございます。 私の言葉足らずで申し訳ございません。 後者の >testimg-1.jpgをオンマウスすると、 >そのtestimg-1.jpgの画像を、testimg-1.jpg~testimg-9.jpgの順に、 >アニメーションみたいに切り替えていきたいのか。 というように切り替えを行いたいのです。 元々testimg-1.jpg~testimg-9.jpgが存在しており、 オンマウスによって「パッパッ・・・」と9枚の画像を 表示させたいのです。 ん～、このような表現でおわかりになりますでしょうか？ すみません、言葉足らずで・・・。
関連するQ&A
- IE6でのonMouseover、onMouseoutによる画像切り替え
いつもお世話になっています。 JavaScriptでonMouseover、onMouseoutによる画像の切り替えを行っています。 Internet Explorer 7.0 Internet Explorer 6.0 Opera 10.00 safari 4.0 以上のブラウザーで確認をとっているのですが、Internet Explorer 6.0だけ上手く動きません。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーHTML <IMG src="../img/map/1f/map.jpg" width="433" height="469" border="0" name="myIMG1"usemap="#tizu"> <p id="7" onMouseover="Swap('myIMG1', '../img/map/1f/7.jpg'); " onMouseout="Swap('myIMG1', '../img/map/1f/map.jpg');">テスト</p> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー JavaScript function Swap(iName, img_url){ myobj = document.images[iName]; myobj.src = img_url; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 文字にマウスを持っていくと、地図の画像が変わる。 というのをしたいのです。 どなたか助言をよろしくお願いいたします。
- 締切済み
- JavaScript
- 画像の切り替え
教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。
- ベストアンサー
- JavaScript
- onMouseOverで変える位置
お世話になります。 長文失礼します。 <html> <head> <title>ページのタイトル名</title> <SCRIPT LANGUAGE="JavaScript"> <!-- movimg=new Array() movimg[0] = new Image();movimg[0].src='img/img-01-206.jpg'; movimg[1] = new Image();movimg[1].src='img/img-01-208.jpg'; movimg[2] = new Image();movimg[2].src='img/img-01-213.jpg'; function changImg1(imgNoA,imgNoB) { document.images[imgNoA].src=movimg[imgNoB].src; }; <!----> </SCRIPT> </head> <body> <img src="img/img-01-01.jpg" width="300" height="225">--(1) <img src="img/img-01-208.jpg" width="300" height="225">--(2) <BR> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,0);"> <IMG src="img/img-01-206.jpg" border="0"></a> <a href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,1);"> <img src="img/img-01-208.jpg" border="0"></a> <A href="javascript:function voi(){};voi()" onMouseOver="changImg1(0,2);"> <IMG src="img/img-01-213.jpg" border="0"></A> </body> </html> という風にonMouseOverで画像を変えているようにしているのですが、 この場合(1)の画像がかわりますよね。 これで(2)の画像を変えるようにするにはどうすればいいでしょうか？ 参考になるHPなどでも構いませんのでよろしくお願いします。
- ベストアンサー
- JavaScript
- onmouseoverで文章を入れ替える
サムネイルにマウスを移動させると画像が拡大表示されるようにウェブをデザインしました。 テーブルで作りました。 拡大画像の下に文章を入れたいのですが、どのように書けばいいですか？ 現在、下記のようにつくっています 拡大写真の表示 <IMG src="images/album1.jpg" width="400" height="400" name="myBigImage"> 拡大写真の説明 ？？ マウスオーバーさせるサムネイル <A href="javascript:void(0)" onmouseover="myChgPic('images/album1.jpg')"> <IMG src="images/salbum1.jpg" width="100" height="100">
- ベストアンサー
- CSS
- 二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> <ul> <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> ・ ・ ・
- 締切済み
- JavaScript
- ボタンをクリックした感じの画像を設定する
htmlページに、作成した画像を配置し、リンクを貼っています。 画像の上にカーソルを合わせたときに画像を変えることはできたのですが、 クリックしたときに画像を変える方法が分かりません。 クリックしたときに押した感じを表現したいです。 どのようにコードを書けばいいですか？ ご教授お願いいたします！ ちなみにオンマウス時に画像を変化させるため以下のようなコードを書いています。 <img src="./images/logo.jpg" onmouseover="this.src='./images/logo_on.jpg'" onmouseout="this.src='./images/logo.jpg'" alt="お問い合せはこちら" /></a> よろしくお願いいたします！
- ベストアンサー
- HTML
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- JavaScriptで画像を変更する
質問が分かりずらいと思いますが、お願いします。 <body>内に↓が書かれています。 <script language="JavaScript"> <!-- function ChangePics() { for(i = 0; i < 3; i++) document.images[i].src = "white.jpg"; } // --> </script> <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> <form> <input type="button" value="画像一括変更" onclick="ChangePics()"></input> </form> ------------------------------------------------------------ [画像一括変更]ボタンをクリックすると表示されていた３枚の「black.jpg」が「white.jpg」に切り替わります。 ですが、画像のsrcへのアクセスは「document.images[i].src」で 行っているため、 <img src="black.jpg"><br> <img src="black.jpg"><br> <img src="black.jpg"><br> の上に他の画像がある場合はその画像が「white.jpg」に変更されてしまいます。 ですが、<img src="black.jpg" name = "pic1">のようにname属性を付けるのは処理が面倒になるので、避けたいです。 質問の意図は、「作ったJavaScriptのプログラムをブログに載せたいが、そのプログラムの上にほかの画像があるため、正常に動作しない。」ということです。
- ベストアンサー
- JavaScript
- javascriptによる画像切り替えについて2
javascriptによる画像切り替えについて2 先日に引き続きjavascriptによる画像切り替えについての質問です。 http://okwave.jp/qa/q5622789.html 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいと考えました。 fujillinさんのアドバイスと http://www.ziyotoy.net/lab/multi_rollover/# を参考に以下のようなソースである程度やりたかったことができたのですが、若干の変更をしたいものの初心者のためどうすればよいかわかりません。 ご助言いただけないでしょうか？ 現行のソース ◆外部js http://www.ziyotoy.net/lab/multi_rollover/# に掲載されています（長くてこのスペースに書ききれないので…） ◆header内js <script type="text/javascript"> //切り替え対象を指定（id） var mr = new MultiRollover("main_img"); //ロールオーバー対象を指定（id） mr.addTarget("navi"); //切り替え画像を指定（画像へのパス） mr.addSource("./img/main_img_02.jpg", "./img/main_img_03.jpg", "./img/main_img_04.jpg", "./img/main_img_05.jpg", "./img/main_img_06.jpg"); mr.observe(window, "load", mr, mr.create); </script> ◆html <img src="img/main_img_01.jpg" alt="メインイメージ" id="main_img" /> <ul id="navi"> <li><a href="../aboutus/index.html" id="thumb2"><img src="../img/menu_02.jpg" alt="ボタン1" /></a></li> <li><a href="../aboutus/index.html#where" id="thumb3"><img src="../img/menu_03.jpg" alt="ボタン2" /></a></li> <li><a href="../staff/index.html" id="thumb4"><img src="../img/menu_04.jpg" alt="ボタン3" /></a></li> <li><a href="../menu/index.html" id="thumb5"><img src="../img/menu_05.jpg" alt="ボタン4" /></a></li> <li><a href="../event/index.html" id="thumb6"><img src="../img/menu_06.jpg" alt="ボタン5" /></a></li> </ul> この状態でボタンにロールオーバーでid="main_img"の画像を切り替えることができるようになりましたが、ロールアウトしたときに最初のmain_img_01.jpgに戻したいのにmain_img_02.jpgになってしまいます。 ロールアウトしたらmain_img_01.jpgに戻るようにするにはどこを変更したらよいのでしょうか？ http://www.ziyotoy.net/lab/multi_rollover/# の管理者様に質問できればと思ったのですが、ブログのコメント等も受け付けていらっしゃらないようなので、ここで質問させていただきます。 どなたかご助言をお願いいたします。
- ベストアンサー
- JavaScript
- サムネイル画像のclass切替がうまく動かない。
すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
お陰様で思い通りできました！ ありがとうございました。