【Javascript】サムネイル画像が3枚あり、その画像の下に各サムネイルに準じた1枚の画像とその説明文テキストがあります。

各サムネイル画像にマウスオーバーすると、それに準じた画像+テキストのセットが入れ替わるような仕組みを作りたいです。
方法や参考アドバイスお願いします。

回答の条件
  • 1人2回まで
  • 登録:2008/06/03 16:03:48
  • 終了:2008/06/10 16:05:03

回答(2件)

id:tukihatu No.1

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322008/06/03 17:33:47

ポイント60pt

簡単な方法で2つあります。

一つは、HTMLに準じた画像+テキストのセットを書いたものをCSSで隠しておき、サムネイルのマウスオーバー時にjavascriptで準じた画像+テキストのセットの表示非表示の命令を飛ばす方法です。

html
<ul>
<li><a href="javascript:tab('1');">タブ1</a></li>
<li><a href="javascript:tab('2');">タブ2</a></li>
<li><a href="javascript:tab('3');">タブ3</a></li>
</ul>
<div id="con1" class="on">
~
</div>
<div id="con2" class="off">
~
</div>
<div id="con3" class="off">
~
</div>

javascript
//初期のSIDを設定
nowsid = "con1";

function tab(tabNum){
    sid = "con" + tabNum;

    document.getElementById(nowsid).className="off";
    document.getElementById(sid).className="on";

    nowsid = sid;
}

↑イメージ

もう一つは、javascriptの方にHTML文を書いておき、innerHTMLで吐き出す方法です。

html
<body onload="tab('1');">
<ul>
<li><a href="javascript:tab('1');">タブ1</a></li>
<li><a href="javascript:tab('2');">タブ2</a></li>
<li><a href="javascript:tab('3');">タブ3</a></li>
</ul>
<div id="con"></div>

javascript
htmlcon = new Array();
//内容
htmlcon[1] = "<b>タブ1内容</b>";//≶とかエスケープしないとだめかも
htmlcon[2] = "<b>タブ2内容</b>";
htmlcon[3] = "<b>タブ3内容</b>";

function tab(tabNum){
    document.getElementById("con").innerHTML=htmlcon[tabNum];
}

↑イメージ

こちらは注意として、onload時に一度コマンドを実行しなければいけない。

即興で書いたから動ごかなそうだけど、イメージは伝わるかと。

liのところにID付けたりすれば、現在のタブがonになっているときはリンクを外す、などの命令も書くことができます。

id:dedara No.2

dedara回答回数30ベストアンサー獲得回数42008/06/04 01:40:03

ポイント10pt

http://okwave.jp/qa354565.html?ans_count_asc=1

このあたりの説明が近いかもしれません。

1.<div id="名前"></div> たとえばHTMLにこういうタグを書いて

2.onMouseOverイベントでJavascript関数を呼び出す

3.Javascriptの処理の中で

関数A(){

var imgdiv = document.getElementById('名前');

imgdiv.innerHTML = "<IMG SRC=\"AAA.JPG\">"; (←半角になおしてください)

}

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません