- ベストアンサー
縮小画像をマウスオーバーで画像を切り替えるjavaスクリプトで
テーブルを４分割し左下に小さい画像、右上に大きい画像。でその小さい画像をマウスでロールオーバーした際に右上の大きい画像が変わるjavaスクリプトについてなんですが, ４分割（上記）のテーブルを一つ作成した所すんなり画像はかわり、思い通りで来たのですがもう一つすぐ下に同じようにしたら両方ともが変わらなくなりました。 ヘッド内のスクリプトは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; 画像に onMouseOver="change_image(1)" onMouseOut="change_image(2)" です。 ２個目のテーブルは Images[1] = new Image(); Images[1].src = "画像url"; Images[2] = new Image(); Images[2].src = "画像url"; この下に Images[3] = new Image(); Images[3].src = "画像url"; Images[4] = new Image(); Images[4].src = "画像url"; とし 画像には onMouseOver="change_image(3)" onMouseOut="change_image(4)" としました。 当方javaがほとんど分からない度素人なのです。 どなたか、よろしくお願いします。
- jvnirdks
- お礼率0% (0/5)
- JavaScript
- 回答数5
- ありがとう数0
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
すみません。＃２は間違いでした。 #3の方が指摘してる通りですね。 私も、テーブル内１行目のイメージのnameがダブっているせいだと思います。 ＃３の方のソースでいいかと思いますが、 なるべく前のままにするなら テーブル内１行目のイメージのnameを 名前をimage1とimage2にして function change_image( Image_no ) { if(Image_no<7){ document.image1.src = Images[Image_no].src; } else { document.image2.src = Images[Image_no].src; } } とすればいいと思います。
その他の回答 (4)
- Bo_Bo
- ベストアンサー率65% (97/149)
以下はどうですか！？ <html><head><title>TEST</title> <script type="text/javascript"><!-- function chgImg(img) { document.FIG.src = img; } //--></script> </head><body> <table width="700" border="0" align="center"> <tr> <td height="400"><!-- (*1) --><img name="FIG" src="fresh.jpg"></td> <tr align="center"> <td><!-- (*2) --><img src="small.jpg" border="0" onMouseOver="chgImg('big.jpg')" onMouseOut="chgImg('fresh.jpg')"></td> </tr> </table> </body></html> -------- 例文の為、レイアウト、ダグの属性などは簡素化しました。 (*1) のイメージが表示される領域は、画像が変わっても領域のサイズが変化 しないように、幅、高さを指定しておく方が良いです。最も大きい画像サイ ズに合わせることをお忘れなく。 （サイズを統一して、イメージの width, height を記述するのが最良です。） (*2) のイメージ・ダグが縮小版イメージの表示とスクリプトのスイッチとな ります。 大きな画像を何枚もキャッシュする必要はないと思うので、イメージ・オブ ジェクトの生成（new Imgae();）はしていません。 このイメージ・ダグを「幾つでも」、「何処にでも」配置すればよいです。 ご希望と違う場合は、ご勘弁を！？
テーブルのソースをコピペして、テーブルを二つに増やした時に、スクリプトが動かなくなっていると言うことでしたら、画像入れ替えの対象となる2つのimg要素に付けられたnameが同じ名前になっていることが、スクリプトが動作しなくなった原因なのではないかと推測します。 はじめの補足中の、「document.image.src=Images[Image_no].src;」の行(この記述については、問題のある記述ではありません)は、「imageと言う名前(name="image")をもつimg要素で表示してある画像のsrcを、Images[Image_no]に格納してあるsrcに置き換える」と言う指示になります。 この指示を実行する際には、name="image"をもつimg要素を一つ特定して、そのimg要素の中身を書き換えますが、同じnameを持つimg要素が複数ある場合、画像を入れ替えするimg要素を一つに特定できないために、動作不良を起こすこともあるでしょう。 解決策についてですが、画像を入れ替えて表示させるimg要素に、それぞれ別々のname属性を与え、それに合わせてスクリプトも書き換えるようにするのが良いと思います。 下記に、補足のソースを元にした例を書きます。 <html> <head> <title>テスト</title> <script type="text/javascript"><!-- Images = new Array(); //Imageオブジェクト用配列 Images_url = new Array(); //ImageのURLを格納するための配列 Images_url[1] = "../images/staff/asahina/asahina_1.jpg"; Images_url[2] = "../images/staff/asahina/asahina_2.jpg"; Images_url[3] = "../images/staff/asahina/asahina_3.jpg"; Images_url[4] = "../images/staff/asahina/asahina_4.jpg"; Images_url[5] = "../images/staff/asahina/asahina_5.jpg"; Images_url[6] = "../images/staff/asahina/asahina_6.jpg"; Images_url[7] = "../images/staff/hikawa/hikawa_1.jpg"; Images_url[8] = "../images/staff/hikawa/hikawa_2.jpg"; Images_url[9] = "../images/staff/hikawa/hikawa_3.jpg"; Images_url[10] = "../images/staff/hikawa/hikawa_4.jpg"; Images_url[11] = "../images/staff/hikawa/hikawa_5.jpg"; Images_url[12] = "../images/staff/hikawa/hikawa_6.jpg"; /* 以上、画像ファイルのURLを配列内に格納 */ for (i=1; i<Images_url.length; i++){ Images[i] = new Image(); Images[i].src = Images_url[i]; } // Images配列をイメージオブジェクトとして定義 function change_image1( Image_no ) { document.image1.src = Images[Image_no].src; } // img要素name="image1"の画像置換え function change_image2( Image_no ) { document.image2.src = Images[Image_no].src; } // img要素name="image2"の画像置換え //--></script> </head> <body> <table width="700" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="385"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CC9999"> <tr> <td bgcolor="f1e3e2"> </td> </tr> </table></td> <td width="315" align="center" valign="middle"> <div align="right"><img name="image1" src="../images/staff/asahina/asahina_1.jpg" width="310" height="385"></div></td> </tr> <tr> <td align="center"> <table width="100%" border="0" cellspacing="3"> <tr align="center"> <td><img src="../images/staff/asahina/asahina_1.jpg" width="55" height="55" onMouseOver="change_image1(1)" onMouseOut="change_image1(1)"></td> <td><img src="../images/staff/asahina/asahina_2.jpg" width="55" height="55" onMouseOver="change_image1(2)" onMouseOut="change_image1(1)"></td> <td><img src="../images/staff/asahina/asahina_3.jpg" width="55" height="55" onMouseOver="change_image1(3)" onMouseOut="change_image1(1)"></td> <td><img src="../images/staff/asahina/asahina_4.jpg" width="55" height="55" onMouseOver="change_image1(4)" onMouseOut="change_image1(1)"></td> <td><img src="../images/staff/asahina/asahina_5.jpg" width="55" height="55" onMouseOver="change_image1(5)" onMouseOut="change_image1(1)"></td> <td><img src="../images/staff/asahina/asahina_6.jpg" width="55" height="55" onMouseOver="change_image1(6)" onMouseOut="change_image1(1)"></td> <tr> </table></td> <td width="315" valign="top"> </td> </tr> </table> <table width="700" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="385"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CC9999"> <tr> <td bgcolor="f1e3e2"> </td> </tr> </table></td> <td width="315" align="center" valign="middle"> <div align="right"><img name="image2" src="../images/staff/hikawa/hikawa_1.jpg" width="310" height="385"></div></td> </tr> <tr> <td align="center"> <table width="100%" border="0" cellspacing="3"> <tr align="center"> <td><img src="../images/staff/hikawa/hikawa_1.jpg" width="55" height="55" onMouseOver="change_image2(7)" onMouseOut="change_image2(7)"></td> <td><img src="../images/staff/hikawa/hikawa_2.jpg" width="55" height="55" onMouseOver="change_image2(8)" onMouseOut="change_image2(7)"></td> <td><img src="../images/staff/hikawa/hikawa_3.jpg" width="55" height="55" onMouseOver="change_image2(9)" onMouseOut="change_image2(7)"></td> <td><img src="../images/staff/hikawa/hikawa_4.jpg" width="55" height="55" onMouseOver="change_image2(10)" onMouseOut="change_image2(7)"></td> <td><img src="../images/staff/hikawa/hikawa_5.jpg" width="55" height="55" onMouseOver="change_image2(11)" onMouseOut="change_image2(7)"></td> <td><img src="../images/staff/hikawa/hikawa_6.jpg" width="55" height="55" onMouseOver="change_image2(12)" onMouseOut="change_image2(7)"></td> </tr> </table></td> <td width="315" valign="top"> </td> </tr> </table> </body> </html> こちらのソースでは、画像の入れ替えの対象を、関数を分けることで振り分けるようにしてあります。 とりあえず、このようなソースではいかがでしょうか? 参考になれば。 長々と失礼しました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
とりあえず、気づいた所を書きます。 function change_image( Image_no ) { document.image.src = Images[Image_no].src; } は、 document.images[Image_no].src = Images[Image_no].src; だと思います。 あと、TABLE側で change_image(6_)とかは、 change_image(6)でいいのでは？ あと関係ないけど、 MM_preloadImages() ってこの場合要りませんよね。 それとtypeが書いてあれば、languageは要りません。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
これだけでは、判断できないので スクリプト部分とテーブル部分を載せることはできますか？
補足
わかりました。 【ヘッド部分】 <script language="JavaScript" type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </script> <SCRIPT LANGUAGE="JavaScript"> Images = new Array(); Images[1] = new Image(); Images[1].src = "../images/staff/asahina/asahina_1.jpg"; Images[2] = new Image(); Images[2].src = "../images/staff/asahina/asahina_2.jpg"; Images[3] = new Image(); Images[3].src = "../images/staff/asahina/asahina_3.jpg"; Images[4] = new Image(); Images[4].src = "../images/staff/asahina/asahina_4.jpg"; Images[5] = new Image(); Images[5].src = "../images/staff/asahina/asahina_5.jpg"; Images[6] = new Image(); Images[6].src = "../images/staff/asahina/asahina_6.jpg"; Images[7] = new Image(); Images[7].src = "../images/staff/hikawa/hikawa_1.jpg"; Images[8] = new Image(); Images[8].src = "../images/staff/hikawa/hikawa_2.jpg"; Images[9] = new Image(); Images[9].src = "../images/staff/hikawa/hikawa_3.jpg"; Images[10] = new Image(); Images[10].src = "../images/staff/hikawa/hikawa_4.jpg"; Images[11] = new Image(); Images[11].src = "../images/staff/hikawa/hikawa_5.jpg"; Images[12] = new Image(); Images[12].src = "../images/staff/hikawa/hikawa_6.jpg"; function change_image( Image_no ) { document.image.src = Images[Image_no].src; } </SCRIPT> 【テーブル部分】 <table width="700" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="385"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CC9999"> <tr> <td bgcolor="f1e3e2"> </td> </tr> </table></td> <td width="315" align="center" valign="middle"> <div align="right"><img name="image" src="../images/staff/hikawa/hikawa_1.jpg" width="310" height="385"></div></td> </tr> <tr> <td align="center"> <table width="100%" border="0" cellspacing="3"> <tr align="center"> <td><img src="../images/staff/hikawa/hikawa_1.jpg" width="55" height="55" onMouseOver="change_image(1_)" onMouseOut="change_image(1_)"></td> <td><img src="../images/staff/hikawa/hikawa_2.jpg" width="55" height="55" onMouseOver="change_image(2_)" onMouseOut="change_image(1_)"></td> <td><img src="../images/staff/hikawa/hikawa_3.jpg" width="55" height="55" onMouseOver="change_image(3_)" onMouseOut="change_image(1_)"></td> <td><img src="../images/staff/hikawa/hikawa_4.jpg" width="55" height="55" onMouseOver="change_image(4_)" onMouseOut="change_image(1_)"></td> <td><img src="../images/staff/hikawa/hikawa_5.jpg" width="55" height="55" onMouseOver="change_image(5_)" onMouseOut="change_image(1_)"></td> <td><img src="../images/staff/hikawa/hikawa_6.jpg" width="55" height="55" onMouseOver="change_image(6_)" onMouseOut="change_image(1_)"></td> </tr> </table></td> <td width="315" valign="top"> </td> </tr> </table> 画像はテーブル各６枚あり合計１２枚です。かく画像 は１５Kぐらいあります。
関連するQ&A
- マウスオーバー
マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>
- ベストアンサー
- JavaScript
- 画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。
- ベストアンサー
- JavaScript
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- マウスオーバー時に画像切り替え
JavaScriptで文字（画像）上にマウスポインターをオーバーするともう一つの大きな画像を切り替える、という風にしたくて、以下のようにしました。 <html> <head> <title><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Rosery de la mort PC profile2</title> <style type="text/css"> <!-- HTML { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } BODY { SCROLLBAR-FACE-COLOR: #990000; SCROLLBAR-HIGHLIGHT-COLOR: #993366; SCROLLBAR-SHADOW-COLOR: #660000; SCROLLBAR-3DLIGHT-COLOR: #993366; SCROLLBAR-ARROW-COLOR: #ff0033; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #660000 } --> </style> <script type="text/javascript"> <!-- if (document.images) { // 設定開始（使用する画像を設定してください） // 通常の画像 var img0 = new Image(); img0.src = "image/p1.jpg"; // ポイント時の画像1 var img1 = new Image(); img1.src = "image/p2.jpg"; // ポイント時の画像2 var img2 = new Image(); img2.src = "image/p3.jpg"; // ポイント時の画像3 var img3 = new Image(); img3.src = "image/p4.jpg"; // ポイント時の画像4 var img4 = new Image(); img4.src = "image/p5.jpg"; // ポイント時の画像5 var img5 = new Image(); img5.src = "image/p6.jpg"; // ポイント時の画像6 var img6 = new Image(); img6.src = "image/p7.jpg"; // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </script> </head> <body bgcolor="#000000" text="#ffffff"> <center><img height="75" alt="" src="roseblue-i3.gif" width="72" align="baseline" border="0"><font size="7"><font face="Script" color="#ffffff"><em><strong> Profile <img height="75" alt="" src="roseblue-i5.gif" width="72" align="baseline" border="0"></strong></em></font></font></center> <br><br> <center> <img src="yl2.jpg"> <p><img src="image/p1.jpg" alt="start" name="def"></p> <br><br><br> <p> <onMouseOver="On('img1')" onMouseOut="Off()"><img src="pp1.jpg"> <onMouseOver="On('img2')" onMouseOut="Off()"><img src="pp2.jpg"> <onMouseOver="On('img3')" onMouseOut="Off()"><img src="pp3.jpg"> <onMouseOver="On('img4')" onMouseOut="Off()"><img src="pp4.jpg"> <onMouseOver="On('img5')" onMouseOut="Off()"><img src="pp5.jpg"> <onMouseOver="On('img6')" onMouseOut="Off()"><img src="pp6.jpg"> </p> <br><br> </center> </body> </html> 上のようにしたのですが、アップロードしても、画像が全く表示されません。 因みに参考にしたところはここです。 http://www.tagindex.com/javascript/link/change3.html このサイトでは、リンクのところが文字ですが、私は、リンクなしで文字部分を画像になるようにしました。 画像が表示されないのは、何が問題なのでしょうか？ 画像は全てアップロードしました。
- ベストアンサー
- JavaScript
- 離れた場所にマウスオーバーで画像を変えたい。
宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。 配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。 ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。 <div id="container">ここに画像を表示させたいです！</div> <div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div> <div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div> <div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div> どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。 どうぞ、宜しくお願いいたします。m(_ _)m
- ベストアンサー
- CSS
- マウスオーバーで画像の切替でタイマーをつけるには？
<html> <head> <script type="text/JavaScript"> <!-- imglist = ["img1.gif", "img2.gif"]; preImage = new Array(); for (i=0; i<imglist.length; i++) { preImage[i] = new Image(); preImage[i].src = imglist[i]; } //--> </script> </head> <body> <img src="img1.gif" onmouseover="this.src='img2.gif'" onmouseout="this.src='img1.gif'"> </body> </html> 例えば上記のようなソースでimg1の画像にマウスオーバーでimg2に画像が入れ替わるのですが、 マウスアウトした時に、すぐimg1の画像に戻るのではなく、img2の画像を1分くらい出して その後img1に入れ替わるようにしたいのですが、どうしたらよいでしょうか？ 教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- JavaScriptロールオーバーで画像が変わりません
<SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var imgtopon = new Image(); imgtopon.src = "images/menu/topon.jpg"; // ポイント時の画像 var imgtopoff = new Image(); imgtopoff.src = "images/menu/topoff.jpg"; // 通常の画像 } // ポイント時の処理 function On(name) { if (document.images) { document.images[name].src = eval(name + 'on.src'); } } // 放した時の処理 function Off(name) { if (document.images) { document.images[name].src = eval(name + 'off.src'); } } // --> </SCRIPT> </head> <body> <div id="headwrapper"> </div> <div id="wrapper"> <div id="header"> <h1>～</h1> </div> <div id="pagebody"> <A HREF="～" onMouseOver="On('imgtop')" onMouseOut="Off('imgtop')"><IMG SRC="images/menu/topoff.jpg" ALT="sample1" BORDER="0" WIDTH="102" HEIGHT="54" NAME="imgtop"></A> ↑↑↑終了 ポイントしていないときの画像は表示されますが、ロールオーバーしてもそのままの状態です。 宜しくお願いします。
- 締切済み
- JavaScript
- オンマウスで画像表示する外部スクリプトを呼び出したいのですが
お知恵をお貸し下さい。よろしくお願い致します。 「画像Aを表示」→「オンマウスで画像Bを表示」という効果を、 外部スクリプトを使ってやってみたいと思っています。 ただ外部スクリプトを読み込む時の指定方法がわかりません。 ちなみに、以下のスクリプトを外部に分けず、 <head>～</head>内に書いた時はきちんと動いておりました。 ※外部スクリプトの記述（sample.js） <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { // 設定開始 // 通常の画像 var img0 = new Image(); img0.src = "sample/sample.jpg"; // ポイント時の画像01 var img01 = new Image(); img01.src = "sample/crip/01/01.jpg"; ： ：（このあと02～03と画像が増える予定） ： // 設定終了 } // ポイント時の処理 function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // 放した時の処理 function Off() { if (document.images) { document.images['def'].src = img0.src; } } // --> </SCRIPT> ========================================= ※読み込む先の記述（sample.jsは指定してあります） <a href="index.html" onMouseOver="On('img01')" onMouseOut="Off()"> <FONT SIZE="2" COLOR="indigo">【1】</font></a> 【1】の文字にマウスを持っていくと、違う場所に表示してある 画像Aが画像Bに変わるようにしたいのです。 オンマウスオーバーの指定がよくないのかと思うのですが 具体的にどこをどうしたらいいか、よろしくお願い致します。
- 締切済み
- JavaScript
- マウスオーバーで画像変更で
以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません（＞＜） 間違いを訂正してください！
- ベストアンサー
- JavaScript
- マウスが離れたら元々表示されていた画像に戻したい
次のサンプルでは、 (1) 最初はimg0.gifが表示されています (2) 文字列「やまだ」のうえにマウスが乗るとimg1.gifが表示されます (3) 文字列「すずき」のうえにマウスが乗るとimg2.gifが表示されます (4) 文字列「さとう」のうえにマウスが乗るとimg3.gifが表示されます ここで、各文字列がらマウスが離れたときは表示する画像を最初の「img0.gif」に戻したいです。 素人なりの予想では、たとえば <div onmouseover="changImg1(0,1)">やまだ</div> を <div onmouseover="changImg1(0,1)" onmouseout="changImg1(0,0)">やまだ</div> のように 修正すればできそうな気がしましたが、試すとできませんでした。 具体的な記述をご教示いただきたく、よろしくお願い致します。 <html><head> <script language="javascript"> <!-- if(navigator.appVersion.charAt(0)>=3) { movimg=new Array() movimg[0] = new Image(); movimg[0].src='img0.gif'; movimg[1] = new Image(); movimg[1].src='img1.gif'; movimg[2] = new Image(); movimg[2].src='img2.gif'; movimg[3] = new Image(); movimg[3].src='img3.gif'; }; function changImg1(imgNoA,imgNoB) { if(navigator.appVersion.charAt(0)>=3) { document.images[imgNoA].src=movimg[imgNoB].src; }; }; //--> </SCRIPT> </head><body> <img src="img0.gif"> <div onmouseover="changImg1(0,1)">やまだ</div> <div onmouseover="changImg1(0,2)">すずき</div> <div onmouseover="changImg1(0,3)">さとう</div> </body></html>
- ベストアンサー
- JavaScript
補足
ありがとうございます。 function change_image( Image_no ) { document.image.src = Images[Image_no].src; } は、 document.images[Image_no].src = Images[Image_no].src; だと思います。 さっそく試したんですが、前は二つのテーブルの内 一つを消すとうごいていたのですが、動かなくなりました。 あと、TABLE側で change_image(6_)とかは、 change_image(6)でいいのでは？ ということですが、下記のように治しました。 Images[1] = new Image(); Images[1].src = "../images/staff/asahina/asahina_1.jpg"; Images[2] = new Image(); Images[2].src = "../images/staff/asahina/asahina_2.jpg"; Images[3] = new Image(); Images[3].src = "../images/staff/asahina/asahina_3.jpg"; Images[4] = new Image(); Images[4].src = "../images/staff/asahina/asahina_4.jpg"; Images[5] = new Image(); Images[5].src = "../images/staff/asahina/asahina_5.jpg"; Images[6] = new Image(); Images[6].src = "../images/staff/asahina/asahina_6.jpg"; Images[7] = new Image(); Images[7].src = "../images/staff/hikawa/hikawa_1.jpg"; Images[8] = new Image(); Images[8].src = "../images/staff/hikawa/hikawa_2.jpg"; Images[9] = new Image(); Images[9].src = "../images/staff/hikawa/hikawa_3.jpg"; Images[10] = new Image(); Images[10].src = "../images/staff/hikawa/hikawa_4.jpg"; Images[11] = new Image(); Images[11].src = "../images/staff/hikawa/hikawa_5.jpg"; Images[12] = new Image(); Images[12].src = "../images/staff/hikawa/hikawa_6.jpg"; どうでしょう？images１～6と７～１２で個々のテーブルに分かれています。 「テーブル一つだと動く、増やすと動かなくなる。」ということはテーブル一つ以上このスクリプトでは増やせないということなのでしょうか？