テーブルを4分割し左下に小さい画像、右上に大きい画像。でその小さい画像をマウスでロールオーバーした際に右上の大きい画像が変わるjavaスクリプトについてなんですが,
4分割(上記)のテーブルを一つ作成した所すんなり画像はかわり、思い通りで来たのですがもう一つすぐ下に同じようにしたら両方ともが変わらなくなりました。
ヘッド内のスクリプトは
Images[1] = new Image();
Images[1].src = "画像url";
Images[2] = new Image();
Images[2].src = "画像url";
画像に
onMouseOver="change_image(1)" onMouseOut="change_image(2)"
です。
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がほとんど分からない度素人なのです。
どなたか、よろしくお願いします。
No.4ベストアンサー
- 回答日時:
すみません。
#2は間違いでした。#3の方が指摘してる通りですね。
私も、テーブル内1行目のイメージのnameがダブっているせいだと思います。
#3の方のソースでいいかと思いますが、
なるべく前のままにするなら
テーブル内1行目のイメージの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;
}
}
とすればいいと思います。
No.5
- 回答日時:
以下はどうですか!?
<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();)はしていません。
このイメージ・ダグを「幾つでも」、「何処にでも」配置すればよいです。
ご希望と違う場合は、ご勘弁を!?
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"><!--
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>
こちらのソースでは、画像の入れ替えの対象を、関数を分けることで振り分けるようにしてあります。
とりあえず、このようなソースではいかがでしょうか?
参考になれば。 長々と失礼しました。
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は要りません。
この回答への補足
ありがとうございます。
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";
どうでしょう?images1~6と7~12で個々のテーブルに分かれています。
「テーブル一つだと動く、増やすと動かなくなる。」ということはテーブル一つ以上このスクリプトでは増やせないということなのでしょうか?
No.1
- 回答日時:
これだけでは、判断できないので
スクリプト部分とテーブル部分を載せることはできますか?
この回答への補足
わかりました。
【ヘッド部分】
<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>
画像はテーブル各6枚あり合計12枚です。かく画像
は15Kぐらいあります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Visual Basic(VBA) Visual Basic : ImageListの画像がそろったときにメッセージを表示 1 2023/07/20 13:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptでスロットマシン
-
テーブルの行数を可変長にした...
-
プルダウンメニューを表の中に...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
Javascriptでテーブルタグの座...
-
Table内TDの子要素を移動させた...
-
連動テーブルのクロスハイライト
-
javascriptでdata.txtのJSONデ...
-
フォームの内容でリンク先URLの...
-
ラジオボタンのNullチェック
-
slickのレスポンシブ > center...
-
【javascript】連想配列からセ...
-
テーブルの変数について
-
return trueとreturn falseの用...
-
JavaScriptでテーブルをクリッ...
-
POST時に要素を削除してからPOST
-
HTMLのフォーム名とJavaScript...
-
ボタン無しでフォーム内容送信
-
チェックボックスにチェックが...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
JQueryでテーブルの行を追加し...
-
カレンダーに印を付けたい
-
javascriptで画像をテーブルに...
-
クリックごとに文字色が交互に...
-
任意に文字数指定のできる原稿...
-
idの振り直しについて
-
tbody要素のinnerHTMLが書き換...
-
指定のテキストをクリックする...
-
複数画像のロールオーバー
-
マウスが重なったら画像の上に...
-
JavaScript 保守性の高めたい 2
-
jQueryでの親の親の隣の子供の...
-
Javascriptでテーブルタグの座...
おすすめ情報