デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

クリッカプルマップ対応Jqueryのみでツールチップ

·

master

ツールチップのJavascriptは数多くあるが、クリッカプルマップに対応したものが以外に少ない。
下のサンプルでは、他のJavascriptファイルを必要としないシンプルなTooltipでありながら以下の機能を備える。
  • 表示時のフェードインおよび速度の設定が可能。
  • 表示時の半透明（透明度）が設定可能。
  • マウス座標に対する表示位置が設定可能。
  • 画像を使わずツールチップの角丸が設定可能。
  • 文字サイズフォントの設定が自由。
スクリプトは以下の通り。
Jquery他、ファイルのダウンロードは不要。使いたいページの<body>内にスクリプトをそのまま丸ごとコピーするだけで簡単に実装できる。
【スクリプト】
JAVASCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" >
$(function(){
$('area.tooltip').mouseover(function(e){
$('div#' + e.target.id).css({opacity:0, display:'block'});
$('div#' + e.target.id).fadeTo('normal', 0.5);
});
$('area.tooltip').mousemove(function(e){
$('div#' + e.target.id).css('left', e.pageX + 20);
$('div#' + e.target.id).css('top', e.pageY - 50);
});
$('area.tooltip').mouseout(function(e){
$('div#' + e.target.id).css({display:'none'});
});
});
</script>

CSS

<style>
.tipText {
position: absolute;
padding: 10px;
background-color: #ffffff;
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tipText b {
font-size:20px;
}
</style>

HTML

<img src="bgt.gif" width="234" height="60" border="0" usemap="#Map" style="margin-left: 0px;" />

<map name="Map">
  <area shape="circle" coords="208,28,20" href="javascript:void(0);" onClick="copen(1);" id="tip1" class="tooltip" />
  <area shape="rect" coords="17,28,166,50" href="javascript:void(0);" onClick="copen(2);" id="tip2" class="tooltip" />
</map>

<div id="tip1" class="tipText" style="display:none;"><b>王様</b><br />(さらに容量が拡大されました)</div>
<div id="tip2" class="tipText" style="display:none;"><b>ハッスルサーバー</b><br />(おすすめのサーバーです)</div>

【設定（カスタマイズ）】

フェードイン・透明度
$(‘div#’ + e.target.id).fadeTo(‘normal’, 0.5);
速度は、”fast”、”normal”、”slow”、または完了までの時間をミリ秒
透明度は、0から1。薄いと読み辛くなるから0.5以上が好ましい
表示位置
$(‘div#’ + e.target.id).css(‘left’, e.pageX + 20);
$(‘div#’ + e.target.id).css(‘top’, e.pageY – 50);
上記ではマウスの位置右側20ピクセル離れた位置、上に50ピクセル上がった位置が基点となる。
背景色
background-color: #ffffff;
背景色を濃くした場合は文字色を白にするといい（color: #ffffff;を追加）
影
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
この指定で右側と下側に１ピクセルの線を設定している。
角丸
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
古いブラウザは四角のまま
フォントサイズ
font-size:20px;
<b>以外の部分にサイズを指定したい場合はtipText内に指定する
.tipText {
〜
font-size:14px;
}

【指定方法】

クリッカプルマップ
  <area shape=”circle” coords=”208,28,20″ href=”javascript:void(0);” onClick=”copen(1);” id=”tip1″ class=”tooltip” />
クリッカプルマップのhrefはjavascript:void(0);とする
onClick=”copen(1);”
カッコ内の数字1から順に振っていく
id=”tip1″の数字も合わせる
この数字が表示される文字のIDに対応する
 class=”tooltip”必須
ツールチップ
<div id=”tip1″ class=”tipText” style=”display:none;”><b>王様</b><br />(さらに容量が拡大されました)</div>
id=”tip1″の数字がクリッカプルマップに設定したIDの数字に対応する
class=”tipText”必須
 style=”display:none;”で非表示にしておく

In:

, ,

Tags:

, , ,