mouseのrolloverで要素が出現するjs

mouseのrolloverやclickイベントに反応して要素が出現するjsを知ったのでメモ。

dropdowncontent.js
この外部jsファイルをlinkで読み込み、

body内のsourceはこんな感じで。

<a href="#" id="ddc_sample" rel="subcontent">ここにマウスをロールオーバーさせると</a>

<div id="subcontent">
    <ul>
        <li>要素（この場合はa）にマウスをロールオーバーさせると小さいボックスが出現する。</li>
        <li>※a要素でなくても使える。</li>
        <li>出現するボックスのサイズ、見た目等はCSSでコントロール可能。</li>
    </ul>
</div>
<script type="text/javascript">
    dropdowncontent.init("ddc_sample", "right-bottom", 300, "mouseover");
    // ddc_sample イベント発生元となる要素名につけるid名
    // right-bottom 出現する要素の出現場所を指定
    // 出現するまでの時間
    // mouseover この場合はmouseoverイベントで clickにするとクリックがイベントに
</script>

実行サンプル（CSSはサンプルを参照のこと）