- PR -

JavaScript onmouseover にて同時に3箇所変更？

1
投稿者投稿内容
Oct
会議室デビュー日: 2008/03/13
投稿数: 6
お住まい・勤務地: 東京都
投稿日時: 2008-03-27 20:26
始めまして。
JavaScript初心者ですが、宜しくお願いします。

今回お聞きしたいのは、一つの[onmouseover]イベントで[ASP:Table]のセル３箇所を同時に変更したいということです。

一つの[onmouseover]：画像Ａに対してのイベント
3箇所に入れたい値：[セルＡ]＝文字列・[セルＢ]＝画像Ｂ・[セルＣ]＝文字列

[セルＡ・Ｂ・Ｃ]には初期値があり、元々はそれぞれに違う文字列と画像が表示されています。
しかし、予め用意してある画像が同ページ上に１０枚ほどあり、それにマウスを合わせた場合に[セルＡ・Ｂ・Ｃ]の値を画像に合う情報に変更したいと考えております。

そもそも、そんなことが出来るのかどうかさえ分かりませんが、ご存知の方がいらっしゃいましたらご教授下さい。

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-03-27 23:19
いまさらなんですが、JavaとJavaScriptは・・・です。理解していますよね？

板が違うと適切な回答が得られるかどうか怪しいもんです。

しかもASPだし。.NET ならば、Insider.NET の方で質問した方がより
明快な回答が期待できるかと考えます。

＞一つの[onmouseover]：画像Ａに対してのイベント
これがどこの画像Aなのかいまいち分かりませんが、、、、

<ASP:Table /> の展開されたHTMLが以下のものとしたとき、

コード:
<table id="Table1" border="1">
<tr>
   <td>CellA</td>
   <td><img src="B.gif"></td>
   <td>StringC</td>
</tr>
</table>

<span onmouseover="swap1(0)"><img src="A.gif"></span>
<span onmouseover="swap1(1)"><img src="C.gif"></span>
<span onmouseover="swap1(2)"><img src="E.gif"></span>

<script>
function swap1(n) {
   var items = [
    { TextA:"文言１１", ImageB:"xxx1.jpg", TextC:"文言２１" },
    { TextA:"文言１２", ImageB:"xxx2.jpg", TextC:"文言２２" },
    { TextA:"文言１３", ImageB:"xxx3.jpg", TextC:"文言２３" }
   ];
   var o = document.getElementById("Table1");

   o.rows[0].cells[0].innerText = items[n].TextA;
   o.rows[0].cells[1].firstChild.src = items[n].ImageB;
   o.rows[0].cells[2].innerText = items[n].TextC;

   
}
</script>


となります。

var items のところは、１次配列の要素がハッシュテーブルみたいな感じですかね。

mouseover させる文言・画像イメージ等必要に応じてサーバーサイドで設定する
必要がある場合は、適宜ASPタグを埋め込んで、<template> かなんか使って、
リストを展開させるようにしたら良いでしょう。

1

スキルアップ／キャリアアップ（JOB@IT）