ツールチップ（tooltip）は一般的なグラフィックユーザインターフェイス要素です。
itemにカーソル（ポインタ）を重ねると、itemに関する補足情報が記された小さなボックスが現れます。
foss4g2007/tooltip_example.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ka-Map!</title>
<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>
<!-- added for demo -->
<script type="text/javascript" src="http://localhost/ka-map/tools/tooltip/kaToolTip.js"></script>
<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
var queryParams = null;
SET_DHTML();
function myOnLoad()
{
initDHTMLAPI();
//Ka-Map init
myKaMap = new kaMap( 'viewport' );
//自分の環境に合わせて変更してください
myKaMap.server = 'http://localhost/ka-map/';
//kaNavigatorのkaZoomerを設定しています。
var kaNav = new kaNavigator( myKaMap );
kaNav.activate();
myKaZoomer = new kaZoomer(myKaMap);
drawPage();
myKaMap.initialize('worldata');
//Demo function
printMyTips();
}
//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
var browserWidth = getInsideWindowWidth();
var browserHeight = getInsideWindowHeight();
var viewport = getRawObject('viewport');
viewport.style.width = browserWidth + "px";
viewport.style.height = browserHeight + "px";
myKaMap.resize();
}
</script>
<!-- ポイントの描画。ポインタを重ねた時の動作も含まれています。 -->
<script type="text/javascript">
/*
* ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array
//Arrayの中身は、経度、緯度、名前、外部リンク、画像の順になってます。
//インターネットにつないでいる状態で、外部リンクが表示されます。
var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat','http://en.wikipedia.org/wiki/Rabat%2C_Morocco','../foss4g2006/img/300px-Rabat_Mausole_MohammedV.jpg');
aPoints[1] = new Array(41.23,2.11,'Barcelona','http://en.wikipedia.org/wiki/Barcelona%2C_Spain','../foss4g2006/img/240px-Sta-eulalia.jpg');
aPoints[2] = new Array(48.52,2.19,'Paris','http://en.wikipedia.org/wiki/Paris%2C_France','../foss4g2006/img/250px-Aftnn_The_Seine_from_the_Eiffel_Tower.jpg');
aPoints[3] = new Array(41.53,12.29,'Rome','http://en.wikipedia.org/wiki/Roma%2C_Italia','../foss4g2006/img/300px-Castel_Sant_Angelo.jpg');
aPoints[4] = new Array(43.47,11.15,'Florence','http://en.wikipedia.org/wiki/Florence%2C_Italy','../foss4g2006/img/210px-Florence.jpg');
aPoints[5] = new Array(41.11,29.08,'Istanbul','http://en.wikipedia.org/wiki/Istanbul%2C_Turkey','../foss4g2006/img/275px-240774807TYycPB_ph.jpg');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo','http://en.wikipedia.org/wiki/Santo_Domingo','../foss4g2006/img/300px-Santo_domingo.jpg');
aPoints[7] = new Array(46.31,6.38,'Lausanne','http://en.wikipedia.org/wiki/Lausanne%2C_Switzerland','../foss4g2006/img/250px-Cathedral_on_a_hill_in_Lausanne.jpg');
//the function
var canvas = null;
var toolTip = null;
function printMyTips () {
var idx = 50;//canvas zindex
canvas = myKaMap.createDrawingCanvas(idx);
toolTip = new kaToolTip( myKaMap);
var offsetX=-6;//offset to move the image left-right
var offsetY=-19;//offset to move the image top-bottom
toolTip.setTipImage(myKaMap.server + 'images/tip-green.png',offsetX,offsetY);
//上記のpoint arrayを順番に読み込んでいます。
for(i=0;i<aPoints.length;i++){
var div = document.createElement('div');
var img = document.createElement('img');
img.src = myKaMap.server + 'images/tip-red.png';
img.style.position='absolute';
img.style.left='-6px';
img.style.top='-19px';
//set the event
img.onmouseover=myTipClicked;
//set the label
img.mylabel = aPoints[i][2];
//append image the our div
div.appendChild(img);
//add the object to our map
var lon = aPoints[i][0];
var lat = aPoints[i][1];
myKaMap.addObjectGeo(canvas,lat,lon,div);
}
}
//ポインタが重なったときに実行される関数
function myTipClicked(){
//alert(this.mylabel);
for(i=0;i<aPoints.length;i++){
if(aPoints[i][2] == this.mylabel){
var myurl = aPoints[i][3];
var myimg = aPoints[i][4];
var lon = aPoints[i][0];
var lat = aPoints[i][1];
//ボックス内に書かれるHTMLタグ
var textToShow = '';
textToShow += '<div style="position:absolute;width:10px;right:10px;top:10px;color:red;border:1px solid black;"><a href="#" onclick="toolTip.move()">X</a></div>';
textToShow += '<h1>'+this.mylabel+'</h1>';
textToShow += '<a href="' + myurl + '" target="_blank"><img src="' + myimg + '" width="200px"></a>';
toolTip.setText( textToShow );
toolTip.moveGeo(lat,lon);
}
}
}
/*
* END OF ADDED CODE
*/
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #d9d9d9;
overflow: hidden;
}
#viewport {
position: relative;
width: 100%;
height: 100%;
background-color: #f0f0f0;
overflow: hidden;
border: 1px solid #000000;
cursor: move;
-moz-box-sizing: border-box;
}
</style>
//自分の環境に合わせて href="" の指定を修正してください。
<link rel="stylesheet" href="http://localhost/ka-map/tools/tooltip/tooltip.css" type="text/css" />
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport">
<div id="kaLogo"></div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿