(cache) JavaScriptでマウスを乗せると小窓が現れるスクリプト

JavaScriptでマウスを乗せると小窓が現れるスクリプト

　2008-04-02

　先日Add Clipsにマウスオーバータイプが登場したと紹介しましたが、今回は同じようにマウスを乗せると下に小窓が現れるスクリプトを紹介してみます。Dynamic Driveというサイトで紹介されていました。

マウスを乗せてみてください

マウスを乗せると小窓が現れます
枠の大きさなどはCSSで変更できます

　赤字で表示しているdropdowncontent.jsはダウンロードして各自サーバにアップしてください。

<script type="text/javascript" src="dropdowncontent.js"></script>

<style type="text/css">
<!--
#subcontent{
 position:absolute;
 background-color:#E6E6FA;
 visibility: hidden;
 border: 1px solid #000088;
 width: 300px;
 padding: 8px;
 font-size : 12px;
}
-->
</style>

<a href="/" id="searchlink" rel="subcontent">マウスを乗せてみてください</a>

<DIV id="subcontent">マウスを乗せると小窓が現れます<br>
枠の大きさなどはCSSで変更できます</DIV>

<script type="text/javascript">
dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
</script>

　ちなみに下にあるJavaScriptで表示の方法を変更するとこができます。

searchlink　：　idを指定

right-bottom　：　小窓を表示する位置。この場合右下に表示

500　：　小窓が開くまでの時間

mouseover　：　clickにするとクリックで小窓が開きます