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

解決済

質問者：jvnirdks
質問日時：2004/11/25 14:05
回答数：5件

テーブルを４分割し左下に小さい画像、右上に大きい画像。でその小さい画像をマウスでロールオーバーした際に右上の大きい画像が変わる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がほとんど分からない度素人なのです。
どなたか、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： BLUEPIXY
回答日時：2004/11/25 18:25

すみません。

＃２は間違いでした。
#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;
}
}
とすればいいと思います。

- 0
- 件

通報する

No.5

回答者： Bo_Bo
回答日時：2004/11/25 18:53

以下はどうですか！？

<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();）はしていません。
このイメージ・ダグを「幾つでも」、「何処にでも」配置すればよいです。

ご希望と違う場合は、ご勘弁を！？

- 0
- 件

通報する

No.3

回答者： lead1976
回答日時：2004/11/25 18:07

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

こちらのソースでは、画像の入れ替えの対象を、関数を分けることで振り分けるようにしてあります。
とりあえず、このようなソースではいかがでしょうか?

参考になれば。長々と失礼しました。

- 0
- 件

通報する

No.2

回答者： BLUEPIXY
回答日時：2004/11/25 15:40

とりあえず、気づいた所を書きます。

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は要りません。

この回答への補足

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

補足日時：2004/11/25 15:53

通報する

- 0
- 件

通報する

No.1

回答者： BLUEPIXY
回答日時：2004/11/25 14:48

これだけでは、判断できないので

スクリプト部分とテーブル部分を載せることはできますか？

この回答への補足

わかりました。

【ヘッド部分】
<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ぐらいあります。