各サムネイル画像にマウスオーバーすると、それに準じた画像＋テキストのセットが入れ替わるような仕組みを作りたいです。
方法や参考アドバイスお願いします。
No.1
180
32
60pt
簡単な方法で2つあります。
一つは、HTMLに準じた画像＋テキストのセットを書いたものをCSSで隠しておき、サムネイルのマウスオーバー時にjavascriptで準じた画像＋テキストのセットの表示非表示の命令を飛ばす方法です。
97
93
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になっているときはリンクを外す、などの命令も書くことができます。
No.2
304
10pt
http://okwave.jp/qa354565.html?ans_count_asc=1
このあたりの説明が近いかもしれません。
１．＜div id="名前"＞＜/div＞ たとえばHTMLにこういうタグを書いて
２．onMouseOverイベントでJavascript関数を呼び出す
３．Javascriptの処理の中で
関数A(){
var imgdiv = document.getElementById('名前');
imgdiv.innerHTML = "<ＩＭＧ ＳＲＣ=\"AAA.ＪＰＧ\">"; （←半角になおしてください）
}
1
2
コメント（0件)