オマケ。以下は dt 要素をポイントすると、対応する dd 要素（説明）を表示する。タイプライタ風という条件上、dd 要素内のテキストのみ（dd の子要素を含めてタイプライタ風に出すのは、自分でチャレンジして）。定位置だとかえって面倒なので >>0 と同じく絶対配置にしてある。
<script type="text/javascript">
/*@cc_on@*/
if (document.implementation &&
/*@if (@_jscript)
document.implementation.hasFeature ('HTML', '1.0') &&
@_jscript_version > 5.5 &&
typeof attachEvent != 'undefined' &&
typeof document.createStyleSheet != 'undefined' &&
@else@*/
// document.implementation.hasFeature ('Core' , '3.0') &&
// document.implementation.hasFeature ('Layout' , '3.0') &&
document.implementation.hasFeature ('HTML' , '2.0') &&
document.implementation.hasFeature ('StyleSheets', '2.0') &&
document.implementation.hasFeature ('CSS2' , '2.0') &&
document.implementation.hasFeature ('HTMLEvents' , '2.0') &&
document.implementation.hasFeature ('MouseEvents', '2.0') &&
typeof Function.prototype.call != 'undefined' &&
/*@end@*/
true)
(function () {
/************************************************************************/
var UserConfiguration = {
typingInterval : 100, // 文字タイピング間隔（ミリ秒）
retypeInterval : 1000, // 繰り返し間隔（ミリ秒）
showTimeOut : 500, // ポイントしてから表示までの間隔（ミリ秒）
hideTimeOut : 500, // ポインタを外して消去までの間隔（ミリ秒）
dummy : null };
//______________________________________________________________________
function addEventLi$tener (type, listener, useCapture) {
this./*@if (@_jscript) attachEvent ('on' + @else@*/
addEventListener (/*@end@*/ type, listener, useCapture);
}
function removeEventLi$tener (type, listener, useCapture) {
this./*@if (@_jscript) detachEvent ('on' + @else@*/
removeEventListener (/*@end@*/ type, listener, useCapture);
}
//______________________________________________________________________
var TOListener = function () {
var callee = arguments.callee;
var data, timeout;
if (callee.index < callee.message.length - 1) {
data = callee.message.substring (0, callee.index).concat ('_');
timeout = callee.typingInterval;
callee.index = callee.index + 1;
} else {
data = callee.message;
timeout = callee.retypeInterval;
callee.index = 0;
}
callee.output (data);
callee.timerId = setTimeout (callee, timeout);
};
TOListener.typingInterval = UserConfiguration.typingInterval;
TOListener.retypeInterval = UserConfiguration.retypeInterval;
TOListener.start = function (data) {
this.message = data;
this.index = 0;
this ();
};
TOListener.stop = function () {
clearTimeout (this.timerId);
this.timerId = null;
this.output ('');
};
TOListener.output = function (data) {
this.target.data = data;
/* // for Safari
var p = this.target.parentNode;
p.removeChild (this.target);
p.appendChild (this.target);
*/
};
TOListener.message = '';
TOListener.index = 0;
TOListener.timerId = null;
TOListener.target = document.createElement ('ins').
appendChild (document.createElement ('p')).
appendChild (document.createTextNode (''));
//______________________________________________________________________
var MOListener = function (event) {
var callee = arguments.callee;
var target = event.target || window.event.srcElement;
callee.cancelShowing ();
if (callee.contains (target)) {
callee.cancelHiding ();
} else {
callee.startHiding (callee);
var node = callee.find (target);
if (node && node.nodeName == 'DD') {
callee.startShowing (callee, node, callee.measure (event || window.event));
}
}
};
MOListener.TOListener = TOListener;
MOListener.element = TOListener.target.parentNode.parentNode;
MOListener.showTimeOut = UserConfiguration.showTimeOut;
MOListener.hideTimeOut = UserConfiguration.hideTimeOut;
MOListener.showTimerId = null;
MOListener.hideTimerId = null;
MOListener.find = function (node) {
while (node && node.nodeName != 'DT') node = node.parentNode;
if (node) {
do node = node.nextSibling; while (node && node.nodeName == '#text');
}
return node;
};
MOListener.contains = function (node) {
while (node && node != this.element) node = node.parentNode;
return Boolean (node);
};
// 位置の統一が困難な場合、ブラウザごとにこのメソッドをオーバーライドする
MOListener.measure = function (event) {
/*@if (@_jscript)
var b = document[ (document.compatMode == 'CSS1Compat') ? 'documentElement' : 'body' ];
/*@end@*/
return {
clientX : event.clientX,
clientY : event.clientY,
/*@if (@_jscript)
innerWidth : b.clientWidth,
innerHeight : b.clientWidth,
pageXOffset : b.scrollLeft,
pageYOffset : b.scrollTop
@else@*/
innerWidth : innerWidth,
innerHeight : innerHeight,
pageXOffset : pageXOffset,
pageYOffset : pageYOffset
/*@end@*/
};
};
MOListener.show = function (node, layout) {
this.hide ();
var ow = this.element.offsetWidth;
var oh = this.element.offsetHeight;
if (layout.innerWidth < layout.clientX + ow) {
layout.clientX = layout.innerWidth - ow;
if (layout.clientX < 0) layout.clientX = 0;
}
if (layout.innerHeight < layout.clientY + oh) {
layout.clientY = layout.innerHeight - oh;
if (layout.clientY < 0) layout.clientY = 0;
}
this.element.style.left = layout.clientX + layout.pageXOffset + 'px';
this.element.style.top = layout.clientY + layout.pageYOffset + 'px';
this.TOListener.start (node.textContent || node.innerText || '');
};
MOListener.hide = function () {
this.element.style.left = -9999 + 'px';
this.element.style.top = -9999 + 'px';
this.TOListener.stop ();
};
MOListener.startShowing = function (listener, node, layout) {
listener.showTimerId = setTimeout (function () {
listener.show (node, layout); }, listener.showTimeOut);
};
MOListener.startHiding = function (listener) {
listener.hideTimerId = setTimeout (function () {
listener.hide (); }, listener.hideTimeOut);
};
MOListener.cancelShowing = function () {
clearTimeout (this.showTimerId);
};
MOListener.cancelHiding = function () {
clearTimeout (this.hideTimerId);
};
//______________________________________________________________________
var LoListener = function () {
var callee = arguments.callee;
var element = document.getElementsByTagName ('body')[0].
appendChild (callee.MOListener.element);
element.className = 'inserted-message';
callee.addStyle ();
removeEventLi$tener.call (window, 'load', callee, false);
};
LoListener.addStyle = function () {
/*@if (@_jscript)
document.createStyleSheet().addRule ('dd', 'display: none', 0);
@else@*/
var style = document.getElementsByTagName ('head')[0]
.appendChild (document.createElement ('style'));
style.sheet.insertRule ('dd { display: none; }', 0);
/*@end@*/
};
LoListener.MOListener = MOListener;
//______________________________________________________________________
var ULListener = function () {
var callee = arguments.callee;
removeEventLi$tener.call (document, 'mouseover', callee.MOListener, false);
removeEventLi$tener.call (window , 'unload' , callee , false);
};
ULListener.MOListener = MOListener;
//______________________________________________________________________
addEventLi$tener.call (document, 'mouseover', MOListener, false);
addEventLi$tener.call (window , 'load' , LoListener, false);
addEventLi$tener.call (window , 'unload' , ULListener, false);
//______________________________________________________________________
UserConfiguration = MOListener = TOListener = LdListener = ULListener = null;
/************************************************************************/
} )();
</script>
