リンクをクリックすると、隠れていたリンクが出るようにします。
さらにそのリンクからリンクが出てくるように、階層を作ることもできます。
大きな分類を表示して、クリックすると細かい分類のリンクが出てくるようにすると、
レイアウトがすっきりして見やすくなると思います。
隠しておける部分はリンクでなくてもいいし、タグも使えるので画像なども出てくるようにできます。
リンクの前に画像をおいて、クリック前とクリック後は画像を入れ替えるようになっています。
画像を入れ替えない場合、画像を使わない場合は、もっと簡単でシンプルな
こちらのプログラムをお薦めします。
これややこしいけど、やっと理解できました＞＜
いかにわかりやすく書こうかと、かなり時間かけました。
少しは役に立てればいいけど…。
見本で使っている画像は、以下のふたつです。
必要な方は、リンクや報告などいらないので持っていって下さい。
クリックする前
クリックした後
<見本>
1) </title>〜</head>に以下のタグを入れます。
<script language=javascript>
<!--
new Image().src = "【クリック前の画像】";
op="【クリック前の画像】";
cl="【クリック後の画像】";
function dd(obj){
if(document.getElementById)
{document.getElementById(obj)
.style.display=='none'?document.getElementById(obj)
.style.display='':document.getElementById(obj)
.style.display='none';
document.getElementById(obj+"i").src.indexOf('sita')>0?
document.getElementById(obj+"i").src=op:
document.getElementById(obj+"i").src=cl
}
else if(document.all){
document.all(obj).style.display=='none'?
document.all(obj).style.display='':document.all(obj).style.display='none';
document.all(obj+"i").src.indexOf('sita')>0?
document.all(obj+"i").src=op:document.all(obj+"i").src=cl
}
else if(document.layers){
document.layers[obj].display=='none'?
document.layers[obj].display='':document.layers[obj].display='none';
document.layers[obj+"i"].src.indexOf('sita')>0?
document.layers[obj+"i"].src=op:document.layers[obj+"i"].src=cl
}
}
//-->
</script>
|
2) 表示する部分には、以下のタグを使います。
【名前】には、半角英数字で名前をつけてここに入れます。
【開く記号】も半角英数字で名前をつけて、3か所に同じものを入れます。
★このとき、2つめの【開く記号】の後の「i」はそのままで！
【クリック前の画像】は、1) と同じものを入れます。
<div id=【名前】>
<a href="javascript:dd('【開く記号】')">
<img src=【クリック前の画像】 id="【開く記号】i">
【表示する文字や画像】</a>
<div style="display:none;margin-left:15pt"id="【開く記号】">
【隠す文字や画像】
</div></div>
|
さらに文字や画像を隠す場合は、【隠す文字や画像】の中に上記タグを使います。
【名前】と【開く記号】は別のものを入れること。
これをくり返して、階層を作ることができます。
※何か所かにある「margin-left:15pt」は、隠れたリンクが出てきたときの位置で、
そのタグの左に何ピクセルの余白を作るかというタグです。
位置を変えたい場合は、この数字を調整して下さい。
「HTMLタグ」のトップに戻る
|
|
|
