スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

 先日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にするとクリックで小窓が開きます
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
このコメントは管理人のみ閲覧できます
【2010/07/24 20:44】 | - # | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。