twitter
facebook
InsTagram
YouTube軽量ツールチップ「poptitle.js」
※以前別の場所で書いた文章を備忘的に書き記しておきます。
【投稿年月日】2009-03-03 【ジャンル】JavaScript
Ｗｅｂサイト（のトップページ）のデザイン変更に合わせて、ツールチップの出力方法も変更しました。javascriptのライブラリーを探しましたが、軽量でいいものが見当たらなかったので、他のツールチップを参考に自作しました。poptitle.js
ma-bank.com/skins/blue2/poptitle.js
設置は簡単で
<script type="text/javascript" src="./poptitle.js"></script>
のように記述するだけです。特徴
- 設置が簡単。
- 軽量。カスタマイズが容易。
- フェードイン・フェードアウトに対応。
- 透明度等を細かく指定することが可能。
- aタグとimgタグに対応。
- HTMLの記述が可能。
- javascriptが無効の場合でもtitleは表示されるので影響なし。
サンプル
aタグかimgタグにtitle属性がある場合、ツールチップがフェードイン・フェードアウトされます。なお、imgタグの場合は、alt属性がタイトルとして表示さます。【サンプル１】 競売物件研究所
<a href="http://bit.tisoku.net/" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。">競売物件研究所</a>
【サンプル２】
<img src="../skins/blue2/img/img10.png" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。" alt="競売物件研究所" width="96" />
また、popimg属性に画像のパスを指定すると場合、ツールチップに画像を追加されます。
【サンプル３】 競売物件研究所
<a href="http://bit.tisoku.net/" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。" popimg="../skins/blue2/img/img10.png">競売物件研究所</a>
【サンプル４】
<img src="../skins/blue2/img/img10.png" title="全国の競売不動産のランキング・利回り・地図等の各種情報を提供中。" alt="競売物件研究所" popimg="../skins/blue2/img/img10.png" width="96" />
HTMLを記述することも可能ですが、「<」「>」「"」「&」をエスケープする必要があるので少し面倒かもしれません。
【サンプル５】 競売物件研究所
<a href="http://bit.tisoku.net/" title="全国の<strong>競売不動産</strong>のランキング・利回り・地図等の各種情報を<span style="color:red; font-size:18px;">提供中</span>。" popimg="../skins/blue2/img/img10.png">競売物件研究所</a>
【サンプル６】 競売物件研究所
<a href="http://bit.tisoku.net/" title="全国の<strong>競売不動産</strong>のランキング・利回り・地図等の各種情報を<span style="color:red; font-size:18px;">提供中</span>。<img src="../skins/blue2/img/img10.png" alt="" />">競売物件研究所</a
カスタマイズ
「poptitle.js」の以下の部分を変更することで、フェードイン・フェードアウトなどをカスタマイズすることができます。var css_width = 250; //ツールチップの幅
var css_border = "solid 1px #aaa"; //ツールチップの枠線
var title_tag = "h3"; //ツールチップのタイトルタグ
var speed = 20; //フェードイン・フェードアウトのスピード
var timer = 200; //フェードイン・フェードアウトの時間
var timer_end = 100; //フェードアウトまでの待機時間
var alpha_start = 60; //フェードイン開始時の透明度
var alpha_end = 93; //フェードイン終了時の透明度
var h_offset = 10; //ツールチップの離れ具合（縦）
var v_offset = 10; //ツールチップの離れ具合（横）
ツールチップのCSSについては「cssSet:function(ps)」の部分をカスタマイズします。また、「ps.fontWeight = "bold";」のようにCSSを簡単に追加することもできます。var css_border = "solid 1px #aaa"; //ツールチップの枠線
var title_tag = "h3"; //ツールチップのタイトルタグ
var speed = 20; //フェードイン・フェードアウトのスピード
var timer = 200; //フェードイン・フェードアウトの時間
var timer_end = 100; //フェードアウトまでの待機時間
var alpha_start = 60; //フェードイン開始時の透明度
var alpha_end = 93; //フェードイン終了時の透明度
var h_offset = 10; //ツールチップの離れ具合（縦）
var v_offset = 10; //ツールチップの離れ具合（横）
ps.color = "#000"; //ツールチップの文字色
ps.background = "#eee"; //ツールチップの背景色
ps.fontSize = "13px"; //ツールチップの文字サイズ
ps.lineHeight = "180%"; //ツールチップの行の高さ
ps.width = css_width + "px"; //ツールチップの幅
ps.padding = "5px"; //ツールチップの文字色
ps.border = css_border; //ツールチップの枠線
ps.textAlign = "left"; //ツールチップの行揃え
ps.zIndex = "100";
ps.position = "absolute";
ps.background = "#eee"; //ツールチップの背景色
ps.fontSize = "13px"; //ツールチップの文字サイズ
ps.lineHeight = "180%"; //ツールチップの行の高さ
ps.width = css_width + "px"; //ツールチップの幅
ps.padding = "5px"; //ツールチップの文字色
ps.border = css_border; //ツールチップの枠線
ps.textAlign = "left"; //ツールチップの行揃え
ps.zIndex = "100";
ps.position = "absolute";
EDIUNET | PHP/MySQL | 独り言 | 提供サービス | JavaScript