- ベストアンサー
画像をクリックして別の画像を表示させたい
現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 （下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。） ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で５枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか？ 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。
- kototo
- お礼率84% (58/69)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんにちは。 補足見ました。 画像をクリックして、次のページに移ろうとする(結果的に、「ページが見つかりません」と表示される)ケースでは、リンクの設定が違っているのではないかと思います。 このスクリプトでは、ページの移動をしないでJavaScriptの処理を呼び出し、画像の内容を差し替えるものですので、「ページが見つかりません」と表示されるのは、おそらくhref属性の記述にどこか記述ミスがあるということでしょう。 <a href="JavaScript: change();"> 上記の部分が、間違いなく記述されているか、確認してみると良いと思います。 hrefの記述に消してしまった部分などはないでしょうか? あるいは、別のページを指定したりしていませんでしょうか? そこに異常があるように見られない場合は、その部分を以下に書き換えてみて下さい。 <a href="#" onClick="change(); return false;"> これでも、リンクをクリックされたことに反応してスクリプトを起動するという、元の記述と同じ効果が得られるはずです。 ページが移動するアクションも起きないと思います。
その他の回答 (2)
- pureh
- ベストアンサー率69% (36/52)
変更点は、スクリプトとＩＭＧタグです。 オマケ（ａｌｔ属性）もつけてみました、不要なら削除してください。 <script language="JavaScript"> <!-- num=0; function change() { var aSrc; num++; num %= 5; //０１～９９までＯＫ aName = "album00.jpg".replace(/[0-9][0-9]/,((num+101)+'').substr(1,3)); document.myIMG.src = "../img/" + aName; document.myIMG.alt = aName; } --></script> <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg" alt="album01.jpg" name="myIMG" border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body>
お礼
おかげさまでできました！ 最初にできなかった原因がわからないのですが 自分で調べてみたいと思います。 ありがとうございました＾－＾
補足
こんにちは。 ご回答ありがとうございます。 教えていただいたものでやってみたのですが #1のlead1976さんから教えていただいたものと同様 クリックすると「ページが見つかりません」 というページが表示されてしまいました。 ということは次のページに行くように 私のほうで指定していないと思うのですが どこをどう間違ってるのかいくら見てもわかりません・・・ ａｌｔ属性は表示させたかったのでとても助かりました。 もう少しがんばってみようと思っています。 ありがとうございました。
こんにちは。 質問文に提示されているスクリプトで正常に動作しなかったのは、body以下のimg要素に、スクリプト側で指定しているname属性が正しくふられていないためだと思います。 <img src="../img/album01.jpg"name="album01"border="0"> この部分を、 <img src="../img/album01.jpg" name="myIMG" border="0"> に直せば、このスクリプトで一応は動くと思います。 なお、属性値は""で括られていても、それぞれを半角スペースで区切ったほうが良いと思います。 ただ、このスクリプトでは2枚目の画像に置き換える以上の動作が望めないようです。 スクリプトを、以下のようにしてみてはいかがでしょうか。 <script type="text/javascript"><!-- var n=0; var ss_pic=new Array(); for (i=0; i<=4; i++){ //「i<=4」の4は[画像の枚数-1]です。 ss_pic[i]=new Image(); } ss_pic[0].src="../img/album01.jpg"; ss_pic[1].src="../img/album02.jpg"; ss_pic[2].src="***3.jpg"; ss_pic[3].src="***4.jpg"; ss_pic[4].src="***5.jpg"; /* 以上の箇所で、表示させたい画像のURLを格納しておきます。 追加するときには、「ss_pic[5].src="***6.htm"」のように、ss_pic[x]の中のxを1ずつ増やしながら、順次画像のURLを追加してください。 */ function change(){ if (n==4){ n=0;}// この「n==4」の4も、[画像の枚数-1]です else { n++;} document.myIMG.src=ss_pic[n].src; } //--> </script> こうすると、5枚の画像を、画像リンクをクリックするたびに変更することができます。 5枚目まで行った後は、1枚目に戻ります。 画像の数を増やす場合は、スクリプト中にコメントが書いてある部分をそれぞれ修正すれば、対応できると思います。 参考になれば幸いです。
お礼
できました！ 原因はわからないのですが、画像にリンクを貼ったら ちゃんととびました。 でもそれじゃせっかくのjavascriptの意味がないのかなぁ。 原因を自分で調べて勉強してみたいと思います。 ありがとうございました＾－＾
補足
こんにちは、lead1976さん。 またお世話になってしまいました。 教えていただいたものでやってみたのですが クリックすると「ページが見つかりません」 というページが表示されてしまいました。 ということは次のページに行くように指定していないと 思うのですが、どこをどう間違ってるのか いくら見てもわかりません・・・ もう少しがんばってみようと思っています。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
lead1976さん、たびたびすみません（＞＜） <a href="JavaScript: change();"> の記述は 問題なくされていました。 すると今度は画面は表示されるのですが 画像がＸ印になって表示されなくなってしまったのです。 <a href="#" onClick="change(); return false;"> こちらのほうもやってみましたら結果は同じでした。 なので直接<a href="album02.html">と指示したら きちんと表示されました。でもこれではJavaScriptを 記述する意味がなくなってしまいますよね。 うぅ。 この辺の理解ができていないのですが、これ以上ご迷惑をかけられないので自分でやってみたいと思います。 また別の質問でお世話になるかもしれません。。。 どうもありがとうございました。