リンクにマウスオーバーすると影付きでツールチップを表示します。
Ajax
Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてDHTMLで動的にページの一部を書き換えるというアプローチを取る。
AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ XMLの略で、2005年2月18日にJesse James Garrettにより名付けられた。
Ajax From Wikipedia
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Tooltip with transparent shadow | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<style type="text/css">
#dhtmlgoodies_tooltip{
background-color:#EEE;
border:1px solid #000;
position:absolute;
display:none;
z-index:20000;
padding:2px;
font-size:0.9em;
-moz-border-radius:6px; /* Rounded edges in Firefox */
}
#dhtmlgoodies_tooltipShadow{
position:absolute;
background-color:#555;
display:none;
z-index:10000;
opacity:0.7;
filter:alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
-moz-border-radius:6px; /* Rounded edges in Firefox */
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Updated:
March, 11th, 2006 - Fixed positioning of tooltip when displayed near the right edge of the browser.
April, 6th 2006, Using iframe in IE in order to make the tooltip cover select boxes.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_tooltip = false;
var dhtmlgoodies_tooltipShadow = false;
var dhtmlgoodies_shadowSize = 4;
var dhtmlgoodies_tooltipMaxWidth = 200;
var dhtmlgoodies_tooltipMinWidth = 100;
var dhtmlgoodies_iframe = false;
var tooltip_is_msie = (navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('opera')==-1 && document.all)?true:false;
function showTooltip(e,tooltipTxt){
var bodyWidth = Math.max(document.body.clientWidth,document.documentElement.clientWidth) - 20;
if(!dhtmlgoodies_tooltip){
dhtmlgoodies_tooltip = document.createElement('DIV');
dhtmlgoodies_tooltip.id = 'dhtmlgoodies_tooltip';
dhtmlgoodies_tooltipShadow = document.createElement('DIV');
dhtmlgoodies_tooltipShadow.id = 'dhtmlgoodies_tooltipShadow';
document.body.appendChild(dhtmlgoodies_tooltip);
document.body.appendChild(dhtmlgoodies_tooltipShadow);
if(tooltip_is_msie){
dhtmlgoodies_iframe = document.createElement('IFRAME');
dhtmlgoodies_iframe.frameborder='5';
dhtmlgoodies_iframe.style.backgroundColor='#FFFFFF';
dhtmlgoodies_iframe.src = '#';
dhtmlgoodies_iframe.style.zIndex = 100;
dhtmlgoodies_iframe.style.position = 'absolute';
document.body.appendChild(dhtmlgoodies_iframe);
}
}
dhtmlgoodies_tooltip.style.display='block';
dhtmlgoodies_tooltipShadow.style.display='block';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX + 10;
dhtmlgoodies_tooltip.style.width = null; // Reset style width if it's set
dhtmlgoodies_tooltip.innerHTML = tooltipTxt;
dhtmlgoodies_tooltip.style.left = leftPos + 'px';
dhtmlgoodies_tooltip.style.top = e.clientY + 10 + st + 'px';
dhtmlgoodies_tooltipShadow.style.left = leftPos + dhtmlgoodies_shadowSize + 'px';
dhtmlgoodies_tooltipShadow.style.top = e.clientY + 10 + st + dhtmlgoodies_shadowSize + 'px';
if(dhtmlgoodies_tooltip.offsetWidth>dhtmlgoodies_tooltipMaxWidth){ /* Exceeding max width of tooltip ? */
dhtmlgoodies_tooltip.style.width = dhtmlgoodies_tooltipMaxWidth + 'px';
}
var tooltipWidth = dhtmlgoodies_tooltip.offsetWidth;
if(tooltipWidth<dhtmlgoodies_tooltipMinWidth)tooltipWidth = dhtmlgoodies_tooltipMinWidth;
dhtmlgoodies_tooltip.style.width = tooltipWidth + 'px';
dhtmlgoodies_tooltipShadow.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_tooltipShadow.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
if((leftPos + tooltipWidth)>bodyWidth){
dhtmlgoodies_tooltip.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth)) + 'px';
dhtmlgoodies_tooltipShadow.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth) + dhtmlgoodies_shadowSize) + 'px';
}
if(tooltip_is_msie){
dhtmlgoodies_iframe.style.left = dhtmlgoodies_tooltip.style.left;
dhtmlgoodies_iframe.style.top = dhtmlgoodies_tooltip.style.top;
dhtmlgoodies_iframe.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_iframe.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
}
}
function hideTooltip(){
dhtmlgoodies_tooltip.style.display='none';
dhtmlgoodies_tooltipShadow.style.display='none';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='none';
}
</script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1><a href="http://www.dhtmlgoodies.com/index.html?whichScript=tooltip_shadow">Tooltip with transparent shadow - dhtmlgoodies.com</a> | 設置サンプル</h1>
<p>リンクにマウスオーバーすると影付きでツールチップを表示します。</p>
<blockquote cite="http://ja.wikipedia.org/wiki/Ajax">
<h2>Ajax</h2>
<p>Ajax（アジャックス、エイジャックス）は、ユーザーインターフェース構築技術の総称。<a href="http://ja.wikipedia.org/wiki/XMLHttpRequest" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）');return false">XMLHttpRequest</a>（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じて<a href="http://ja.wikipedia.org/wiki/DHTML" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'DHTML（Dynamic HTML）は静的なHTMLの内容をCSSとJavaScript等のクライアントサイドスクリプト言語を用いて動的に変更するウェブ技術を指す抽象概念。');return false;">DHTML</a>で動的にページの一部を書き換えるというアプローチを取る。</p>
<p>AjaxはAsynchronous （アシンクロナス／エイシンクロナス、非同期） JavaScript ＋ <a href="http://ja.wikipedia.org/wiki/Extensible_Markup_Language" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Extensible Markup Language （エクステンシブルマークアップランゲージ）。');return false;">XML</a>の略で、2005年2月18日にJesse James Garrettにより名付けられた。</p>
<cite><a href="http://ja.wikipedia.org/wiki/Ajax" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'Ajax From Wikipedia');return false;">Ajax From Wikipedia</a></cite>
</blockquote>
</body>
</html>