人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: kentajoy
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript アドバイス サムネイル テキスト マウスオーバー
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● 牛乳先生(tukihatu)
●60ポイント

簡単な方法で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になっているときはリンクを外す、などの命令も書くことができます。


2 ● dedara
●10ポイント

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\">"; (←半角になおしてください)

}

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ