jQuery マウスオーバー時にサブタグクラウドを表示する

Category
： Javascript

タグクラウドってよく見かけると思うですが、そのタグクラウドをマウスオーバーさせた時にサブタグクラウドって形でポップアップ表示するスクリプトがNoupeさんで紹介されていたので、使い方を解説したいと思います。

jquery Hover Sub Tag Cloud

hovertip.js使い方・ダウンロード

下記画像の場所からhovertip.jsをダウンロードして下さい

hovertip.js

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/hovertip.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	  window.setTimeout(hovertipInit, 1);
	 });
</script>

XHTML

<li><a href="#" title="タグ「css」の一覧" class="rank1" id="j1">css</a>
	<ul class="hovertip" target="j1">
	<li><a href="#" title="タグ「margin」の一覧" class="rank2">margin</a></li>
	<li><a href="#" title="タグ「class」の一覧" class="rank4">class</a></li>
	<li><a href="#" title="タグ「id」の一覧" class="rank3">id</a></li>
	<li><a href="#" title="タグ「clearfix」の一覧" class="rank5">clearfix</a></li>
	</ul>
</li>

上記ソースの用に親要素となる部分に「id="j1"」と記述して、呼び出したいul要素に「target="j1"」と指定する事でホバー時に呼び出す事が出来ます。

hovertip.js

var hovertipSelect = 'div.hovertip';

下の方に記述されている上記ソースを下記ソースの用に書き換えてます。

var hovertipSelect = 'ul.hovertip';

CSS

サブカテゴリとして表示される部分

.hovertip {
	position: absolute;
	display: none;
	width: 220px;
	height: 90px;
	background: url(../image/sub_category.png) no-repeat;
	margin: 5px -22px;
	padding: 35px 10px 15px;
	text-align: center;
}
.hovertip_target:hover {
	text-decoration: none;
}

それ以外の部分は普通のタグクラウド同様に記述しています。