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

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

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

…ここからが続き

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(../images/sub_category.png) no-repeat;
	margin: 5px -22px;
	padding: 35px 10px 15px;
	text-align: center;
}
.hovertip_target:hover {
	text-decoration: none;
}

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

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article