JavaScriptの動作しない問題と解決法

このQ&Aのポイント
  • JavaScript初心者が作ろうとしている画像切り替え機能が動作しない問題についての質問です。
  • 画像の切り替え機能が正しく表示されることを確認しましたが、マウスオーバー時に動作しない状態です。
  • エラーメッセージ(IE6)の内容は「オブジェクトを指定してください」と表示されています。
回答を見る
  • ベストアンサー

Java Scriptが動作しなくて困っています

Java Scriptについては全くの初心者です。よろしくお願いいたします。 今作ろうとしていますのが、 「3~4個のサムネイル画像と1個の拡大画像(A)を設定し、 サムネイルにオンマウスすると、各々の拡大された画像が 元の拡大画像(A)から切り替わって表示される」 というものです(よくショッピングサイトの商品紹介ページ 等で使われているものです)。 これを色々とやってみているのですが、どうしても動作してくれません。 ソースは以下↓のとおりです。 <SCRIPT language="JavaScript"> <!-- function change(num){ if(num==1) document.flame.src="http://a-cloche.sd.shop.jp/pic-labo/limg/nadeshiko_C0001-02-08.jpg" alt="撫子カラー 白"; if(num==2) document.flame.src="http://a-cloche.sd.shop.jp/pic-labo/limg/nadeshiko_C0001-03-01.jpg" alt="撫子カラー 濃紺"; } // --> </SCRIPT> <DIV align="center"><IMG src="http://a-cloche.sd.shop.jp/pic-labo/limg/nadeshiko_C0001-01-11.jpg" alt="撫子カラー赤" name="flame"><BR> <BR> <BR> <IMG src="http://a-cloche.sd.shop.jp/pic-labo/timg/nadeshiko_C0001-02-08.jpg" alt="撫子カラー 白" onMouseOver="change(1)"> <IMG src="http://a-cloche.sd.shop.jp/pic-labo/timg/nadeshiko_C0001-03-01.jpg" alt="撫子カラー 濃紺" onMouseOver="change(2)"> </DIV> 上記のソースで、各画像は一応きちんと表示されるのですが (サムネイル画像2個、拡大画像1個)、 サムネイルにオンマウスをしても、全く動かない状態です。 ・表示場所:自分のブログ内 ・エラーメッセージ(IE6):ライン258・文字1・エラー=オブジェクトを指定してください・コード0 HTML初心者なので言葉が足りない部分があるかと思います。申し訳ありません。 ご指導のほど、どうかよろしくお願いいたします。

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

  • ベストアンサー
  • ecli_0907
  • ベストアンサー率100% (1/1)
回答No.1

<SCRIPT language="JavaScript"> <!-- function change(num){ if(num==1) document.flame.src="​http://a-cloche.sd.shop.jp/pic-labo/limg/nadeshiko_C0001-02-08.jpg&...​ alt="撫子カラー 白"; if(num==2) document.flame.src="​http://a-cloche.sd.shop.jp/pic-labo/limg/nadeshiko_C0001-03-01.jpg&...​ alt="撫子カラー 濃紺"; } // --> </SCRIPT> あまりよくわかりませんが、以下のようにsrcとaltは分ける必要があるのではないですか? document.flame.src="​http://example.com/a.jpg"; document.flame.alt="撫子カラー 白";

acchanco
質問者

お礼

教えていただいたとおりにしたら出来ました! 本当に有難うございました。感動してしまいました!

関連するQ&A

  • 二重の画像切り替え

    以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 (ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。) 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 CのいずれかをクリックするとBの3つのサムネイル画像がすべて切替り、 更にBのいずれかをクリックすると拡大画像のAが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←A(Bの拡大画像) └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←B(車の各方向からの写真画像) └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←C(車のカラーバリエーション) └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--A(Bの拡大画像)--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--B(車の各方向からの写真画像)--> <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> <!--C(車の各方向からの写真画像)--> <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> <!--カラー切り替えスクリプト-->  ・  ・  ・

  • ジャバスクリプトでクリックして画像を切り替えていま

    画像は一つのスライドセットに5枚ほど用意してあり、 今回、あらたにもう一セット同じページに追加したところ、相互のく動作がうまくいきません。 コードをジャバスクリプトの部分だけコピーしてみます。どこかに誤りがあったら是非ご教授ください。 <div id="nav2"> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> <li><a href="#image3">3</a></li> <li><a href="#image4">4</a></li> <li><a href="#image5">5</a></li> <li><a href="#image6">6</a></li> </ul> </div> <div id="nav3"> <ul class="imagelist"> <li><a class="current" href="#image7">1</a></li> <li><a href="#image8">2</a></li> <li><a href="#image9">3</a></li> <li><a href="#image10">4</a></li> <li><a href="#image11">5</a></li> </ul> </div> : : : <div id="slideshow"> <img id="image1" src="/livingimg/002.jpg"alt="Image 1" /> <img id="image2" src="/livingimg/031.jpg" alt="Image 2" /> <img id="image3" src="/livingimg/6039.jpg" alt="Image 3" /> <img id="image4" src="/livingimg/6336.jpg" alt="Image 4" /> <img id="image5" src="/livingimg/5563.jpg" alt="Image 5" /> <img id="image6" src="/livingimg/5860.jpg" alt="Image 6" /> </div> <div id="slideshow"> <img id="image7" src="/interiorimg/035akari.jpg"alt="Image 7" /> <img id="image8" src="/interiorimg/034.jpg" alt="Image 8" /> <img id="image9" src="/interiorimg/5923akari.jpg" alt="Image 9" /> <img id="image10" src="/interiorimg/akari190.jpg" alt="Image 10" /> <img id="image11" src="/interiorimg/5866akari.jpg" alt="Image 11" /> </div> こんな具合です。またhead部分に <style type="text/css"> <!-- #slideshow img{ display: none; } --> </style> と書いてあります。これで回答いただくことに必要な情報は十分でしょうか もちろん一つのセットの場合は正常に動作しています。 宜しくお願いします。 補足 ちなみに url は http://brownpaper.biz/interior.htm です。

  • table内の画像を中央寄せ、のせると拡大、方法?

    画像にマウスポインタをのせると画像が拡大される機能を備えた 画像の表を作りたいです。 テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。 CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。 あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。 各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。 下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。 アドバイスをお願いいたします。 ~~~ HTML ~~~ <link rel="stylesheet"type="text/css" href="a.css"> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">あいう <th bgcolor="#FFA07A">えおか <th bgcolor="#FFA07A">きくけ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ああああああああああああああああ</td> <td align="left">いいいいいいいいいいいいいいい</td> <td align="left">うううううううううううううううう</td> </tr> </table> <br> <br> <table border="1" width="500" cellpadding="5" bordercolor="#333333" /> <tr> <th bgcolor="#FFA07A">こさし <th bgcolor="#FFA07A">すせそ <th bgcolor="#FFA07A">なにぬ </tr> <tr> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> <td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td> </tr> <tr> <td align="left">ええええええええええええええええええええええ</td> <td align="left">おおおおおおおおおおおおおおおおおおおお</td> <td align="left">かかかかかかかかかかかかかかかかかか</td> </tr> </table> ~~~ CSS ~~~ a.thumbnail { display: block; float: left; } a.thumbnail img{ position: relative; } a.thumbnail, a.thumbnail img{ width: 130px; height: 170px; margin: 0px 0px 0px 5px; } a.thumbnail:hover { border: none; cursor: default; } a.thumbnail:hover img { width: auto; height: auto; }

    • ベストアンサー
    • HTML
  • 画像の先読み

    画像の先読み 拡大画像の表示場所とサムネイルの表示場所がありサムネイルをクリックすると拡大画像の場所にクリックしたサムネイルが拡大表示されるものを作っています。 以下のソースで試しており動作は問題ないのですが動作がぎこちないです。 具体的にはサムネイルをクリックすると拡大画像の場所がフェードアウトしフェードインします。 ※ここまでは正常 フェードインしたかと思いきやクリックする前の画像が1秒程表示されその後クリックした画像に切り替わる感じでフェードの効果が全く無意味になってしまいます^^; 事情があり画像の出力をphpで行っているのが原因かと思ったのですが単純にキャッシュの問題かとも思い画像の先読みなどを組み込めればいいのですがどのようにすれば可能でしょうか? [html] <p id="imgMain"><img src="resize.php?file=/imgimg01.jpg" alt="" id="target" /></p> <ul id="gallery"> <li><a href="resize.php?file=/img/img01.jpg" ><img src="resize.php?file=/img/img01.jpg&amp;x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img02.jpg"><img src="resize.php?file=/img/img02.jpg&amp;x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img03.jpg"><img src="resize.php?file=/img/img03.jpg&amp;x=173" alt="" /></a></li> </ul> [js] $(document).ready( function() { $("#gallery a img") .fadeTo(1, 1) .hover( function() { $(this).fadeTo(200, 0.5); }, function() { $(this).fadeTo(500, 1); } ) $("#gallery a").click(function() { var changeSrc = $(this).attr("href"); $("#target").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); });

  • オンマウスでの拡大画像の位置指定

    サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか?ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか?どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>

    • 締切済み
    • CSS
  • HP作成/ジャバスクリプトの記載方法

    こんにちは。HP作成初心者です。 下記のタグ(サムネイル画像をクリックすると、別窓で拡大表示)なんですが、別窓を開いた際に <BODY oncontextmenu="alert('右クリック禁止です');return false;">を記載して別窓内の右クリックを禁止させたいんですが、下記文章内のどのスペースに禁止タグを貼付ければよいか解らずに困っています。 よろしければアドバイス御願します。 サムネイル別窓ソース↓ a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('s.t.gif','sample','width=400,height=400')" border="0"> <img src="s.t.gif" width="80" height="80" border="0"> <a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('member1.jpg','sample','width=400,height=400')" border="0"> <img src="member1.jpg" width="80" height="80" border="0"></a> <a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('member1.jpg','sample','width=400,height=400')" border="0"> <img src="member2.jpg" width="80" height="80" border="0"></a>

    • ベストアンサー
    • Mac
  • java スライド クリック メニューについて

    左右に矢印画像がありクリックでサムネイルが移動するようなスクリプトにしたいです。 すみません、以下のようなスクリプトでサムネイル画像を横スクロールさせています。 実際にはスクロールではなく、一度に画像が配列されarrow_lをクリックすれば左にarrow_rをクリックすれば右に画像が移動するというようなサムネイル画像を作りたいのですが、以下のソースからどのようにすれば良いでしょうか? また参照できるサイトがあればお教えいただきたく思っております。 何卒宜しくお願いします。 <input type="image" src="img/arrow_l.gif" id="左" onclick="hs.direction='left'" value="←" /> <marquee id="hs" scrollamount="6" onmouseover="this.stop()" onmouseout="this.start()"> <img src="images/sum-bw2.jpg" alt="bw" hspace="2" border="0" /> <img src="images/sum-ex2.jpg" alt="bw" hspace="2" id="bw" /> <img src="images/sum-sh2.jpg" alt="bw" hspace="2" id="bw2" /> </marquee> <input type="image" src="img/arrow_r.gif" onclick="hs.direction='right'" value="→" />

  • jQueryの隣接セレクターが上手く動作しない

    jQueryを用いてギャラリーのページを作成しています。 ページのイメージは上部にサムネイル画像が並べてあり、その下にクリックされたサムネイル画像に対応する大きな画像を表示するというものです。その中で隣接セレクターが上手く動作せず悩んでいます。どなたか教えていただきたく、よろしくお願いいたします。 具体的には HTML部分 <\-- サムネイル部分 --> <div id="navi"> <ul> <li> <a href="images/img1.jpg"><imgsrc="images/img1_thum.jpg" alt="作品1" /></a>  </li> : : </ul> </div> <\-- 大きな画像表示部分 --> <div id="main"> <img src="とりあえず最初の作品のパス" alt="最初の作品"/> </div> jQuery部分 $(function(){ $("#navi a").click(function(){ var filename=$(this).attr("href"); var altname=$("+img",this).attr("alt"); : : ここで、filenameには a要素のhref属性の値が入るのですが、altnameが undefined になってしまいます。 私は $("+img",this).attr("alt");  で  this (この場合はa要素)の次のimg要素のalt属性 (たとえば「最初の作品」)が返ると考えているのですがなにが間違っているのでしょうか?

  • 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
  • ドリームウィバー8(Dreamweaver8)で簡単にサムネイル指定

    ドリームウィバー8でサムネイル画像を作成する方法は? 現在、次の様な手順でサムネイル画像を作ってます。 469px × 423pxの画像を幅300pxのサムネイル表示にして、右クリックで拡大表示させたいとき・・・ 1.画像を貼り付ける(画像の説明HTMLソース) <img src="http://○○○○○○.jpg" width="469" height="423" alt="画像の説明" /> 2.サムネイル表示用のHTMLタグを手入力する つまり、1番のHTMLソースを間に挟む <a href="http://○○○○○○.jpg" target="blank">画像の説明HTMLソース</a> 3.サムネイルの大きさを計算する。 サムネイル幅を300px。元画像の大きさが469pxなので 300÷469=0.63 たて横同じ比率で縮小したいので縦に同じ比率を掛ける 423×0.63=266.49 4.HTMLソースの幅と高さをそれぞれwidth="300" height="266"に修正 完成HTMLソース <a href="http://○○○○○○.jpg" target="blank"> width="469" height="423" alt="画像の説明" /></a> この手順どう考えてもめんどうだと思います。ドリームウィバー8(Dreamweaver8)で簡単に出来るのではないかと調べているのですが、なかなか見つかりません。どなたか良い方法をご存知でしたら教えてください

    • ベストアンサー
    • HTML

専門家に質問してみよう