実行結果
設置サンプルのソース
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -90,
left: -33,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
</script>
<!-- CSS -->
<style type="text/css">
.bubbleInfo { position:relative; width:500px; height:200px; top:100px; left:50px; }
.bubbleInfo,
.bubbleInfo * { margin:0; padding:0; }
.trigger { position:absolute; }
/* Bubble pop-up */
.popup { position:absolute; display:none; z-index:50; border-collapse:collapse; }
.popup td.corner { height:15px; width:19px; }
.popup td#topleft { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-1.png); }
.popup td.top { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-2.png); }
.popup td#topright { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-3.png); }
.popup td.left { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-4.png); }
.popup td.right { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-5.png); }
.popup td#bottomleft { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-6.png); }
.popup td.bottom { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-7.png); text-align:center;}
.popup td.bottom img { display:block; margin:0 auto; }
.popup td#bottomright { background-image:url(/content/img/ajax/coda-popup-bubbles/bubble-8.png); }
.popup table.popup-contents { font-size:12px; line-height:1.2em; background-color:#fff; color:#666; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; }
table.popup-contents th { text-align:right; text-transform:lowercase; }
table.popup-contents td { text-align:left; }
tr#release-notes th { text-align:left; text-indent:-9999px; background:url(/content/img/ajax/coda-popup-bubbles/starburst.gif) no-repeat top right; height:17px; }
tr#release-notes td a { color:#333; }
</style>
<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>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照： <a href='http://jqueryfordesigners.com/coda-popup-bubbles/'>Coda Popup Bubbles</a></p>
<p>▼画像にマウスオーバーすると、ダウンロードするファイルの情報が吹き出しされます。</p>
<!-- CODE -->
<div class="bubbleInfo">
<div>
<a href="hoge.zip" onclick="return false;"><img class="trigger" src="/content/img/ajax/zip.png" id="download" /></a>
</div>
<table id="dpop" class="popup">
<tbody>
<tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>
<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tbody><tr>
<th>File:</th>
<td>coda 1.1.zip</td>
</tr>
<tr>
<th>Date:</th>
<td>11/30/07</td>
</tr>
<tr>
<th>Size:</th>
<td>17 MB</td>
</tr>
<tr>
<th>Req:</th>
<td>Mac OS X 10.4+</td>
</tr>
<tr id="release-notes">
<th>Read the release notes:</th>
<td><a title="Read the release notes" href="releasenote.html" onclick="return false;">リリースノート</a></td>
</tr>
</tbody></table>
</td>
<td class="right"></td>
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="/content/img/ajax/coda-popup-bubbles/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody>
</table>
</div>
<!-- / CODE -->
</div>
</body>
</html>
