ベストアンサー

縮小画像をマウスオーバーで画像を切り替えるjavaスクリプトで

2004/11/25 14:05

テーブルを４分割し左下に小さい画像、右上に大きい画像。でその小さい画像をマウスでロールオーバーした際に右上の大きい画像が変わる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）
専門家の回答

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

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2004/11/25 18:25 回答No.4

すみません。＃２は間違いでした。 #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)

2004/11/25 18:53 回答No.5

以下はどうですか！？ <html><head><title>TEST</title> <script type="text/javascript"></script> </head><body> <table width="700" border="0" align="center"> <tr> <td height="400"><img name="FIG" src="fresh.jpg"></td> <tr align="center"> <td><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();）はしていません。このイメージ・ダグを「幾つでも」、「何処にでも」配置すればよいです。ご希望と違う場合は、ご勘弁を！？

noname#199778

2004/11/25 18:07 回答No.3

テーブルのソースをコピペして、テーブルを二つに増やした時に、スクリプトが動かなくなっていると言うことでしたら、画像入れ替えの対象となる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"></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)

2004/11/25 15:40 回答No.2

とりあえず、気づいた所を書きます。 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は要りません。

質問者

補足 2004/11/25 15:53

ありがとうございます。 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と７～１２で個々のテーブルに分かれています。「テーブル一つだと動く、増やすと動かなくなる。」ということはテーブル一つ以上このスクリプトでは増やせないということなのでしょうか？

BLUEPIXY
ベストアンサー率50% (3003/5914)

2004/11/25 14:48 回答No.1

これだけでは、判断できないのでスクリプト部分とテーブル部分を載せることはできますか？

質問者

補足 2004/11/25 14:51

わかりました。【ヘッド部分】 <script language="JavaScript" type="text/JavaScript">  </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ぐらいあります。