webdesignkeys

CSSやjavascriptなどを利用した動的なサイト作りやwebデザインに関するネタを紹介!

Subscribe by RSS RSS Icon
Follow me Twitter Twitter Icon
 
 

スポンサーサイト

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

Comment

コメントの投稿













管理者にだけ表示を許可する
 

jqueryでマウスオーバー時にクールなアニメーションポップアップを表示させる-jquery tooltips-

jquery-entry05.jpg
マウスオーバー時にポップアップを表示するtooltipsというjqueryを紹介します。

tooltipsdemo00.jpg
かなりクールなプラグインなので、このサイトでも導入してみました。

参考サイト

参考サイトデモ

STEP1 jqueryのダウンロード、導入

以下のサイトからjqueryの最新版をダウンロードして下さい。

http://jquery.com/

ダウンロードしたものをサーバーにアップロードして、<head>タグ内に以下のように記述して下さい。
<script type="text/javascript" src="ファイルのURL" ></script>

また以下のようにAJAX Libraries APIのajaxライブラリからjqueryを読み込むことも可能なので、

自分のサーバーにアップロードしなくてもいいやっていう人は以下のように記述しても結構です。

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

STEP2 jquery -tooltips- の導入

以下のjavascriptソースコードを<head>タグ内に記述します。

内容の微調整後に外部化してください。

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);
		
		if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){
		
		$(this).removeAttr("title").mouseover(function(){
					my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
		}).mousemove(function(kmouse){
				var border_top = $(window).scrollTop(); 
				var border_right = $(window).width();
				var left_pos;
				var top_pos;
				var offset = 20;
				if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
					left_pos = kmouse.pageX+offset;
					} else{
					left_pos = border_right-my_tooltip.width()-offset;
					}
					
				if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
					top_pos = border_top +offset;
					} else{
					top_pos = kmouse.pageY-my_tooltip.height()-offset;
					}	
				
				
				my_tooltip.css({left:left_pos, top:top_pos});
		}).mouseout(function(){
				my_tooltip.css({left:"-9999px"});				  
		});
		
		}

	});
}

	
$(document).ready(function(){
	 simple_tooltip("a","tooltip");
});

STEP3 CSSコードの記述

スタイルシートでは以下のようにします。

これを記述しないと表示されません

ここで紹介しているCSSはこのサイトで表示しているポップアップと同じになります。

バッググラウンドのカラーやボーダー要素などは簡単に変えられるので色々試して見てください。

画像なども入れると面白いかもしれませんね^^

*top:-9999px;の記述は消してはいけません。

tooltipsdemo.jpg
   
.tooltip{
position:absolute;
top:-9999px;
background-color:#dedede;
padding:3px;
border:1px solid #0b0b0b;
width:200px;
}

.tooltip p{
margin:0;
padding:0;
color:#fff;
background-color:#222;
padding:5px 5px;
width:190px;
top:-9999px;
}

STEP4 title属性

これで準備は整いましたが実際に表示させる文字はアンカー部分のtitle属性です。

画像のデモのは、実際には以下のように記述しています。

tooltipsdemo01.jpg

<a href="http://vector4free.com/"title="★venctor<br />vectorのハイクオリティーな壁紙をダウンロードすることができます。"><img src="http://blog-imgs-27.fc2.com/u/d/d/uddesign/vector4.jpg" alt="125x125 banner 4" /></a>

ここまでの手順で動作させることができます。

以下から簡単な設定の変更の方法を紹介します。

「tooltipsの適応範囲を変更する」

初期設定では、ソースファイルのaタグの中のtitleタグ全てに適応されます。

例えばこれをタイトルだけやナビゲーションのみに適応させたい場合には、

以下のようにソースを書き換えます。

id属性の場合
$(document).ready(function(){
	 simple_tooltip("#container a","tooltip");
});

class属性の場合
$(document).ready(function(){
	 simple_tooltip(".navigator a","tooltip");
});

「透明度の設定」「フェードインの速度の設定」

透明度を変えるにはopacityを変更します。0.0が透明に1.0が不透明に近づきます。

フェードのスピードを変えるにはfadeInの数値を変更します。数値を大きくすれば遅くなります。

my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);

「ポップアップの描画位置」

マウスオーバー時のポップアップの位置を変更する時は以下のコードをいじって見てください。

var offset = 20;

Comment

コメントの投稿













管理者にだけ表示を許可する
 
<< PREV | HOME | NEXT >>

FC2 template
fc2_template_question.jpg

Category

NEWS
 

Comment

Archives

Favorite
125x125 banner 1
125x125 banner 2
125x125 banner 3
125x125 banner 4

Object
CoRich word of mouth information
Web service is developed through word of mouth information. ⇒CoRich
web design keys fc2 blog ranking!!
It challenges the ranking on my site. Please click this links. ⇒FC2 Blog Ranking
Proin magna amet fermentum dignissim
Nulla gravida, lacus molestie convallis dolor sem suscipit nisl, ut pharetra erat leo in elit.
Fusce pulvinar euismod urna vel viverra
Quisque malesuada laoreet tellus vel iaculis. Morbi nulla leo euismod pulvinar erat.
Class aptent taciti sociosqu ad litora
Curabitur vestibulum est eu purus bibendum eu eleifend diam tempor. Fusce metus eros, faucibus ut hendrerit ac.

Links

 
 
 
 
 
 
Copyright Info.

Nulla enim nibh, conse ctetuer sed, vesti bulum eleme ntum, sagittis nec, diam. Mauris blan dit vehi cula neque. Read More

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