Ajax,Javascript、ユーザーの行動を視覚的＆システム的に補助するスクリプトサンプル設置方法
ツールチップ
jquery-1.3.2.min.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Tooltip jQuery Plugin Demo</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").easyTooltip();
});
</script>
<meta name="description" content="Simple easy-to-use jQuery plugin for custom tooltips">
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
/* Easy Tooltip */
#easyTooltip{
padding:5px 10px;
border:1px solid #195fa4;
background:#195fa4 url(bg.gif) repeat-x;
color:#fff;
}
/* // Easy Tooltip */
</style>
</head>
<body>
<p>Yoga is a science. That is the second thing to grasp.
Yoga is a science, and not a <a href="#" title="tooltipText">vague</a>, dreamy drifting or imagining.
It is an applied science, a systematized collection of laws applied to bring about a definite end.
It takes up the laws of psychology, applicable to the unfolding of the whole consciousness of man on every plane,
in every world, and applies those rationally in a particular case.
This rational <a href="#" title="tooltipText">application</a> of the laws of unfolding consciousness acts exactly .</p>
</body>
</html>
jQueryを使用したツールチップです。
a要素についた title属性 をツールチップテキストとして表示します。
他に Jabascript でタグをレイアウトして表示することもできます。
サイトへ行き、easytooltip.zip をダウンロードして下さい。
解凍したら、jsフォルダと画像をアップロードします。
サンプルでは、jquery-1.3.2.min.js を差し替えて使用しています。
アップしたスクリプトを読み込ませます。
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
パスと順番に注意して読み込ませてください。
次にツールチップの設定を記述します。
<script type="text/javascript">
$(document).ready(function(){
$("a").easyTooltip();
});
</script>
これで設定は完了です。
このスクリプトは、a要素のtitle属性を自動的に抽出してツールチップとして表示するので、
ツールチップを表示させたい場合は、a要素にtitle属性で記述し、
表示させたくない場合は、title属性を記述しなければOKです。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
