Hi-Farm blog

2006年12月20日 14:03

Link thumb

雑誌でみかけた、Ajaxの
Link Thumbライブラリ。

右の下の方にある外部サイトへのリンクに適用してみました。
マウスをロールオーバーさせると、サムネールのあるサイトについては、下にサムネールが表示されます。

これを使ってみたのですが、簡単ですねー。
ライブラリをダウンロードし、HTML内に<script>で記述。

CSSで各種設定を記述

.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
width: 160px;
height: 120px;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: transparent url(linkpic_shadow.gif) no-repeat bottom right;
width: 160px;
height: 120px;
}

で、サムネイル表示させたいところにクラス指定。
<a href="" class="lnkthumb">----</a>

これで該当部分がサムネイル表示されるようになります。

ちなみにこれはサムネイルを保存しているサ−バーがあって、そこへサムネイル画像を探しに行っているみたいです。

2006年12月01日 17:22

javascriptのpopup

window.close();

FFの場合はPOPUPしたウィンドウにしかきかない
(みたい)

2006年05月24日 14:33

javascriptとcssの疑似プルダウンメニュー

仕事で仕方なく疑似プルダウンを作ることになり、ちょっと困ってたのですが、作れたのでメモ代わりに。

仕様:
グローバルナビゲーションにロールオーバーしたときに、各ページのローカルメニューが現れて、クリックしたときにはそのローカルメニューは消える。

はじめに、divやulでローカルメニューをつくり、visibility = "hidden";で非表示にしておく。

次に、グローバルナビのaタグに、onmouseover=""でローカルメニューが表示されるようにjavascriptを組む。

ローカルメニューが、ul id="top"だとすると、
document.getElementById("top").style.visibility = "visible";
でロールオーバーの時に表示されるようになる。
これを各グローバルナビに設定していく。

このままだと、現れたローカルメニューが消えないので、
bodyにでも(何でもいいですけどね) onmouseup="消えるスクリプト";を仕込めばOK!

サンプルは、、、またあげておきます。