JavaScript初心者でも理解できる！クリックした画像だけを変化させるプログラム

前へ 次へ
このQ&Aのポイント
  • JavaScript初心者でもわかるように、クリックした画像だけを変化させるプログラムを作成しましたが、うまく動作しません。
  • HTMLのリンクをクリックすると、クリックした画像が「on.gif」に変化し、他の画像は「off.gif」となるプログラムです。
  • ご助言いただけると嬉しいです。
回答を見る
  • ベストアンサー

javascriptについて

javascriptに関してまだまだ初心者で困っております． 作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです． そこで以下のようなプログラムを作成したのですが，うまく動きません． ご助言頂ければ幸いです． <html> <head> <script type="text/javascript> <!-- function changeImg(no){ for (i=1; i<3; i++){ document.image[i].src = "off.gif"; if(i==no) document.image[i].src = "on.gif"; } } //--> </script> </head> <body> <ul> <li><a href="JavaScript:changeImg(1)"><img src="on.gif" name="image[1]" /></a></li> <li><a href="JavaScript:changeImg(2)"><img src="off.gif" name="image[2]" /></a></li> </ul> </body> </html>

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

このHTMLでこのロジックのままやりたいなら function changeImg(no){ for (i=1; i<3; i++){ document.getElementsByName('image[' + i + ']')[0].src = "off.gif"; if(i==no) document.getElementsByName('image[' + i + ']')[0].src = "on.gif"; } } です。

kyon_1988
質問者

お礼

なるほどです！ 詳しく解説していただき，ありがとうございました．

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

ヒント <img>タグの名前name="image[1]"は "image[1]"という文字列です。 しかるに for (i=1; i<3; i++){ document.image[i].src　= .... というのはまずいでしょ

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

関連するQ&A

  • タグ切り替えのJavaScriptについて

    タグを切り替えるJavaScriptと http://archiva.jp/web/javascript/tab-menu.html （参考サイト） ロールオーバーのJavaScript http://css-happylife.com/template/14/ (参考サイト) この２つを組み合わせようと思ったのですが、どうにもうまくいきません。 今記述しているままではロールオーバーで画像が切り替わりますが、選択しているタグが元の画像に戻ってしまいます。 詳しく説明すると、タグ切り替えのサンプルページでは、Page３を押すとPage3のタグの部分が黒く切り替わっていると思います。しかし、今の記述ではロールオーバーの時しか画像が変わらずマウスを外すと元に戻ってしまいます。 サンプルページではフォントとbackgroud-colorを使用して #tab li a:hover, #tab li.present a { border-color: #333; color: #000; } ここで適用していると思います。 しかし、私は画像を使って切り替えたいのです。 色々試してみたのですが、どうにもうまくいかないため投稿しました。 お力添えよろしくお願いします。 ↓現在の記述↓ <!------------html------------> <ul id="tab"> <li><a href="#page1"><img src="img/about_gnavi_what_off.gif"></a></li> <li><a href="#page2"><img src="img/about_gnavi_type_off.gif"></a></li> <li><a href="#page3"><img src="img/about_gnavi_tellme_off.gif"></a></li> </ul> <!------------css------------> ul#tab{ margin:0; padding:0; } ul#tab li{ float:left; display:inline; margin:8px 0 0 10px; }

    • ベストアンサー
    • CSS
  • 初心者です　jQueryのマウスオーバーについて

    jQueryを使った画像を使ったメニューを作成しています。 <ul class="drop2">をマウスオーバーしたときに親の位置にある画像１.gifが画像１_o.gifに 切り替わるようにしたいと思っています。 調べながら作ってみたのですが、画像の切替がうまくいきません。 parentを使わずに画像1.gifをdivで囲って指定すれば切り替わったのですが、2つ以上メニューを 作ると、他のulにマウスオーバーしたときも切り替わってしまいます。 ご教授して頂けると嬉しいです。 よろしくお願いいたします。 ■スクリプト部分 jQuery(function ($) { $('ul.drop2').mouseover(function () { // console.log('mouseover'); デバック用 var onSrc = $（this).parent('ul.drop1 a img').attr('src').replace('.gif', '_o.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); $('ul.drop2').mouseout(function () { var onSrc =$（this).parent('ul.drop1 a img').attr('src').replace('_o.gif', '.gif'); $（this).parent('ul.drop1 a img').attr('src', onSrc); }); }); ■html部分 <ul class="drop1"> <li><a href="/"><img src="画像1.gif" alt="HOME" /></a> <ul class="drop2"> <li><a href="#"><img src="画像1-1.gif" alt="HOME" /></a></li> <li><a href="#"><img src="画像1-2.gif" alt="HOME" /></a></li> </ul> </li> </ul>

  • CSSで画像を均等に横並びに配置するには？

    テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。 下記のようなイメージで配置したいです。6列。行は可変。 ■…画像 画像の数に応じて、はみだした画像は自動的に下に改行される感じです。 ■　■　■　■　■　■ ■　■　■　■　■ HMTLソースは以下のとおりです。 <ul> <li><a href="*"><img src="img/01.jpg" /></a></li> <li><a href="*"><img src="img/02.jpg" /></a></li> <li><a href="*"><img src="img/03.jpg" /></a></li> <li><a href="*"><img src="img/04.jpg" /></a></li> <li><a href="*"><img src="img/05.jpg" /></a></li> <li><a href="*"><img src="img/06.jpg" /></a></li> <li><a href="*"><img src="img/07.jpg" /></a></li> <li><a href="*"><img src="img/08.jpg" /></a></li> <li><a href="*"><img src="img/09.jpg" /></a></li> <li><a href="*"><img src="img/10.jpg" /></a></li> <li><a href="*"><img src="img/11.jpg" /></a></li> </ul> どのようにCSSを定義すればスマートでしょうか？ よろしくお願いします。

  • イベントハンドラを完全に外部化にしたい

    イベントハンドラをなんとか、完全に外部ファイルにしたいと考えています。 <ul><li> <a href="a.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../ig/c1.gif',1)"> <img src="../ig1.gif" alt="aaa" name="Image1" id="Image1" /></a></li> <li> <a href="b.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../ig/c2.gif',1)"> <img src="../ig2.gif" alt="bb" name="Image2" id="Image2" /></a></li> ・ ・ ・ </ul> サイトのナビ部分のソースです。この中にあるonmouseout、やonmouseoverを外部ファイルにして、 <ul><li> <a href="a.html"><img ～></li> <a href="b.html"><img ～></li>・ ・ ・ </ul>というすっきりした形にできないものでしょうか… イベント登録する関数を作って、ページのonloadで実行しておく という感じかな…と考えていたりするんですが… どのように記述すればよいか お知恵をお貸しください。 ※MM_swapImgRestoreやMM_swapImageはすでに外部化済です

  • 【Jquery】before()でソースを挿入

    Jquery初心者です。　 before()で指定したdivの直前にソースを挿入したいのですが、構文エラーでうまくいきません。 単純なソース（たとえば<p>hello</p>など）はうまく入るのですが、 img等「""」が入るタグがうまく挿入できません。 リストやアンカー、イメージなどを挿入するつもりなのですが、 before()を使う以外で何か方法はありますか？ 書いたソースは <div id="exam">その他の商品はこちら</div> <script type="text/javascript" src="/js/jquery/.js"></script> <script type="text/javascript"> $(function(){ $("div#exam").before("<ul><li><img src="title.gif" alt="おすすめアイテム" /></li><li><a href="/item.html?id=000"><img src="01.gif" alt="アイテムA" /></a></li><li><a href="/item.html?id=001"><img src="02.gif" alt="アイテムB" /></a></li><li><a href="/item.html?id=002"><img src="03.gif" alt="アイテムC" /></a></li></ul>"); return false; }); </script>

  • javascriptでの画像の先読みについて（その２）

    その１からの続きです。。 以下が私の作ったソースです。 <script language="JavaScript"> <!-- var flag=new Array(); var image=new Array(); var img=new Array(); // gif画像の先読み img[0]=new Image();img[0].src="透明gif"; img[1]=new Image();img[1].src="上向き矢印.gif"; img[2]=new Image();img[2].src="矢印の線.gif"; img[3]=new Image();img[3].src="下向き矢印.gif"; var on_mouse=144; for (i=0;i<144;i++) {flag[i] = 0;} function on_image(num){ on_image_no = num; //マウスの位置(0～143) } function off_image(num){ on_image_no = 144; //範囲外 } function mouse_click(){ flag[on_image_no]=(flag[on_image_no]==0); var image_no=0; for(i=0;i<144;i++){ if(flag[i]){ //フラグが立っていたら矢印の始点or終点を表示 if(image_no==0){ document.image[i].src=img[1].src; //上向き矢印 image_no=2; //次から矢印の線を表示 }else{ document.image[i].src=img[3].src; //下向き矢印 image_no=0; //次から透明なgifを表示 } }else{document.image[i].src=img[image_no].src;} } } //--> </script> ＃関係ないですけど、off_image()はいらないかも…。 以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。 よろしくお願いいたします。 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633

  • 作動しないCSSのプルダウン(1)

    windowsバージョン７で確認すると、CSSのプルダウンが起動しません。 下記URLのナビゲーション部分、「BOARDS」という部分と「ＳＴＯＲＥ」 という部分です。CSSに詳しいお方、ご教授いただけないでしょうか？ http://staceysurfboardsjapan.com/sstt.html 【ＨＴＭＬ部分】 <ul id="pulldown-menu"> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/boards.gif',1)"><img src="images/boards2.gif" name="Image9" width="149" height="26" border="0" id="Image9" /></a> <ul> <li><a href="/stacey/boards/twist.html"><img src="images/m_twist.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/guild.html"><img src="images/m_guild.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s3.html"><img src="images/m_s3.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s4.html"><img src="images/m_s4.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/s6.html"><img src="images/m_s6.gif" width="149" height="30" /></a></li> <li><a href="/stacey/boards/cd2.html"><img src="images/m_cd2.gif" width="149" height="30" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image31','','images/m_jmodel.gif',1)"><img src="images/m_gn.gif" name="Image31" width="149" height="30" border="0" id="Image31" /></a></li> </ul> </li> </ul> 載せきれないので次の投稿でＣＳＳも記載します。

  • スタイルシート　画像の置き換え　について

    スタイルシート初心者です。 宜しくお願いします。 ----------------------------------------------- <div id="Nav"> <ul> <li><a href="/nav1/"><img src="/nav1.gif"></a></li> <li><a href="/nav2/"><img src="/nav2.gif"></a></li> </ul> </div> ----------------------------------------------- 上記、nav1.gifとnav2.gifの２枚の画像を、スタイルシートで別の２枚へ差し替えたいのですが、何か方法はありますでしょうか。 #Nav li img{ } ではダメですよね。 何か上手い指定方法があるのでしょうか。 HTMLは変更不可です。

  • リストを一行にせずに横並びにする方法

    リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。 コメントを使わないで横並びにする方法はありますか？ ■html <ul><!-- --><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><!-- --><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li><!-- --></ul> ■css li { display: inline; } ↓のように<!---->をとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>

  • jQueryを使ってある画像を別の画像に置き換えたい。

    jQueryを使ってある画像を別の画像に置き換えたい。 jQueryを使って、<body class="info">の時にだけ <ul id="global-nav">の中の画像「info.gif」を「info_on.gif」に 置き換えるということをしたいです。 <body class="info"> <ul id="global-nav"> <li><img src="info.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> ↓↓↓ <body class="info"> <ul id="global-nav"> <li><img src="info_on.gif" /></li> <li><img src="about.gif" /></li> </ul> </body> どのように記述をしてやるとうまくいきますでしょうか。 色々試しているのですがうまくいきません。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する