>文章の中で、説明の必要な用語に解説を付けたいと
用語に解説を付けるなら、ポップアップメッセージを使用するのが分かりやすいと思います。
フレームよりjavascript方が見やすいかな...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>用語の解説</TITLE>
<STYLE type="text/css">
<!--
/* ここで表示されるスタイルを指定 */
.spanstyle {
position:absolute;
visibility:hidden;
color:#000; /* フォント色 */
font-size:10pt; /* フォントサイズ */
/* font-weight:bold; 太字にする */
border:1px gray solid; /* 枠線の太さ 色 形状 */
padding:5px;
background-color:white; /* 背景色 */
z-index:100;
/* センタリングはネスケで表示位置が大幅にずれます */
}
/* 影のスタイル*/
.syadow {
position:absolute;
visibility:hidden;
color:gray; /* フォント色 */
font-size:10pt;
border:1px gray solid; /* 枠線の太さ 色 形状 */
padding:5px;
background-color:gray; /* 背景色 */
z-index:90;
/* z-indexはspanstyleより必ず小さく */
}
}
-->
</style>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
var message = new Array();
// メッセージの内容
message[0] = 'Aタグ'
message[1] = 'SPANタグ'
message[2] = '右端や下端の近くでも<br>見にくくなる事はない'
//-->
</SCRIPT>
<!-- 下記のメインJavaScriptを外部読み出しにすることをおすすめ -->
<SCRIPT type="text/javascript" language="JavaScript">
<!--
var sep_x = 0;
var sep_y = 20;
var mess_w = new Array();
var mess_h = new Array();
// 影モードの設定 ----------------------
// alphaModeはIEでの影モードです。
// trueで有効、7,7は横ずれ位置、縦ずれ位置、40は透明度(小さいほど薄い0~100)
// 「true」は有効、「false」は無効
var alphaMode = new Array(true,7,7,40); //IE-only
var syadowStyleMode = true; //影のスタイルを別指定する
var syadowStyleName = "syadow"; //別指定する場合のclass名
// 透明度変化設定 ----------------------
var alphaMotion = true; // Alpha変化モード
var alphaStep = 10; // 透明度変化ステップ
var alphaIntv = 50; // 透明度変化スピード
// ---------------------------------------------------
var alphaFlag = true;
var alphaTimerID = 0;
var opacityLevel = new Array();
opacityLevel[0] = (alphaMotion)?0:100;
opacityLevel[1] = (alphaMotion)?0:alphaMode[3];
opacityLevel[2] = 0;
opacityLevel[3] = 0;
var id1,id2;
// ---------------------------------------------------
var messTimerID=0;
var disp_flg = 0;
var flg= 0;
var NN6flg = 0; // NN6対策用
var ms = 0;
var ms2= 0;
var x = 0;
var y = 0;
var winSize = new Array();
var mac = (navigator.userAgent.indexOf('Mac')>=0);
var opera = (navigator.userAgent.indexOf('Opera')>=0);
var op6 = (navigator.userAgent.indexOf('Opera 6')>=0)||(navigator.userAgent.indexOf('Opera/6')>=0);
var op7 = (navigator.userAgent.indexOf('Opera 7')>=0)||(navigator.userAgent.indexOf('Opera/7')>=0);
var ie5 = (navigator.appVersion.indexOf('MSIE 5')>=0)||(navigator.appVersion.indexOf('MSIE 6')>=0)||(navigator.appVersion.indexOf('MSIE 7')>=0);
var ie4 = (navigator.appVersion.indexOf('MSIE 4')>=0);
// 下記はMac&Operaはfilterをサポートしていない
alphaMode[0] = (mac||opera)?false:alphaMode[0];
alphaMotion = (mac||opera)?false:alphaMotion
// Windowサイズを取得
function getWinsize(){
winSize[0] = ((!document.all && document.getElementById)||(document.layers)) ? window.innerWidth : document.body.clientWidth;
winSize[1] = ((!document.all && document.getElementById)||(document.layers)) ? window.innerHeight : document.body.clientHeight;
}
// レイヤーサイズの取得
function getLaysize(num){
var wh = new Array();
if (document.all && !op7){
var thisspan = document.all("span"+num);
wh[0] = ((ie4)||(ie5))?thisspan.offsetWidth :thisspan.style.pixelWidth;
wh[1] = ((ie4)||(ie5))?thisspan.offsetHeight:thisspan.style.pixelHeight;
}
if (document.layers){
var thisspan = eval("document.span"+num);
wh[0] = thisspan.clip.width;
wh[1] = thisspan.clip.height;
}
if ((!document.all && document.getElementById) || op7){
var thisspan = document.getElementById("span"+num);
wh[0] = thisspan.offsetWidth;
wh[1] = thisspan.offsetHeight;
}
return wh;
}
// マウス座標位置取得
function handlerMM(e){
x = (document.all&&!opera) ? document.body.scrollLeft+event.clientX : (op6)?event.clientX : e.pageX;
y = (document.all&&!opera) ? document.body.scrollTop+event.clientY : (op6)?event.clientY : e.pageY;
flg=1;
if(disp_flg ==1){ mdisp(ms2);}else{mdel(ms2);}
}
// メッセージの表示
function mdisp(ms){
disp_flg = 1;
if (flg==1 && document.all && !op6){
if(ie4){
messize = getLaysize(ms);
mess_w[ms] = messize[0];
mess_h[ms] = messize[1];
}
x =(winSize[0]<x+sep_x+mess_w[ms]+10-document.body.scrollLeft)?winSize[0]-mess_w[ms]-10+document.body.scrollLeft:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-document.body.scrollTop)?y-mess_h[ms]-20:y+sep_y;
var thisspan = document.all("span"+ms).style;
thisspan.posLeft=x;
thisspan.posTop =y;
thisspan.pixelWidth = mess_w[ms];
thisspan.pixelHeight = mess_h[ms];
thisspan.visibility="visible";
if(alphaMode[0]&&ie5){
thisspan = document.all("syadow"+ms).style;
thisspan.posLeft=x+alphaMode[1];
thisspan.posTop =y+alphaMode[2];
thisspan.pixelWidth = mess_w[ms];
thisspan.pixelHeight = mess_h[ms];
thisspan.zIndex = 90;
thisspan.visibility="visible";
}
if(alphaFlag&&alphaMotion&&ie5){opacityChange(ms);}
}
if (flg==1 && document.layers){
x =(winSize[0]<x+sep_x+mess_w[ms]+20-pageXOffset)?winSize[0]-mess_w[ms]-20+pageXOffset:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-pageYOffset+15)?y-mess_h[ms]-15:y+sep_y;
var thisspan = eval("document.span"+ms);
thisspan.left=x;
thisspan.top=y;
thisspan.clip.width = mess_w[ms];
thisspan.clip.height = mess_h[ms];
thisspan.visibility="visible"
}
if (flg==1 && !document.all && document.getElementById && !op6){
if(NN6flg==0){ //NN6対策
for(i=0;i<message.length;i++){
messize = getLaysize(i);
mess_w[i] = messize[0];
mess_h[i] = messize[1];
}
NN6flg=1;
}
x =(winSize[0]<x+sep_x+mess_w[ms]+30-scrollX)?winSize[0]-mess_w[ms]-30+scrollX:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-scrollY+15)?y-mess_h[ms]-20:y+sep_y;
var thisspan = document.getElementById("span"+ms);
thisspan.style.left=x;
thisspan.style.top =y;
thisspan.style.width = mess_w[ms];
thisspan.style.height = mess_h[ms];
thisspan.style.visibility="visible"
if(alphaMode[0]&&ie5){
thisspan = document.getElementById("syadow"+ms);
thisspan.style.left=x+alphaMode[1];
thisspan.style.top =y+alphaMode[2];
thisspan.style.width = mess_w[ms];
thisspan.style.height = mess_h[ms];
thisspan.style.zIndex = 90;
thisspan.style.visibility="visible";
}
if(alphaFlag&&alphaMotion&&ie5){opacityChange(ms);}
}
if (flg==1 && op6){
if(NN6flg==0){
for(i=0;i<message.length;i++){
messize = getLaysize(i);
mess_w[i] = messize[0];
mess_h[i] = messize[1];
}
NN6flg=1;
}
x =(winSize[0]<x+sep_x+mess_w[ms]-document.body.scrollLeft)?winSize[0]-mess_w[ms]+document.body.scrollLeft:x+sep_x;
y =(winSize[1]<y+sep_y+mess_h[ms]-document.body.scrollTop)?y-mess_h[ms]-10:y+sep_y;
var thisspan = document.getElementById("span"+ms);
thisspan.style.left=x;
thisspan.style.top =y;
thisspan.style.width = mess_w[ms];
thisspan.style.height = mess_h[ms];
thisspan.style.visibility="visible"
}
ms2=ms;
}
// メッセージの非表示
function mdel(ms){
disp_flg = 0;
if(alphaMotion&&ie5){opacityClear(ms);}
if (document.all){
var thisspan = document.all("span"+ms).style;
thisspan.visibility="hidden";
if(alphaMode[0]&&ie5){
thisspan = document.all("syadow"+ms).style;
thisspan.visibility="hidden";
}
}
if (document.layers){
var thisspan = eval("document.span"+ms);
thisspan.visibility="hidden";
}
if (!document.all && document.getElementById){
var thisspan = document.getElementById("span"+ms).style;
thisspan.visibility="hidden";
if(alphaMode[0]&&ie5){
thisspan = document.getElementById("syadow"+ms).style;
thisspan.visibility="hidden";
}
}
ms2=ms;
}
// ---------------------------------------------------
function opacityChange(ms){
id1 = (document.all)?document.all("span"+ms):document.getElementById("span"+ms);
id2 = (document.all)?document.all("syadow"+ms):document.getElementById("syadow"+ms);
opacityLevel[2] += alphaStep;
if(opacityLevel[2]>100){opacityLevel[2]=100;alphaFlag=false;}
opacityLevel[3] = Math.round(opacityLevel[2]*alphaMode[3]/100);
id1.filters.Alpha.opacity=opacityLevel[2];
id2.filters.Alpha.opacity=opacityLevel[3];
if(alphaFlag){alphaTimerID = setTimeout("opacityChange("+ms+")",alphaIntv);}
}
function opacityClear(ms){
id1 = (document.all)?document.all("span"+ms):document.getElementById("span"+ms);
id2 = (document.all)?document.all("syadow"+ms):document.getElementById("syadow"+ms);
opacityLevel[2] = 0;
opacityLevel[3] = 0;
id1.filters.Alpha.opacity=opacityLevel[2];
id2.filters.Alpha.opacity=opacityLevel[3];
clearTimeout(alphaTimerID);
alphaFlag=true;
}
function NN_reload(){
if (document.layers){location.reload();}else{getWinsize();}
}
// メッセージの先読み
for (i=0;i<message.length;i++){
document.write("<div id='span"+i+"' class='spanstyle' style='position:absolute;filter:Alpha(opacity="+opacityLevel[0]+")'");
if(ie4){document.writeln(" style='width:10px;'><table><tr><td nowrap");}
document.write(">");
document.writeln(message[i]);
if(ie4){document.writeln("</td></tr></table>");}
document.writeln("</div>");
if(alphaMode[0]&&ie5){
syadowcss = (syadowStyleMode)?syadowStyleName:"spanstyle";
document.write("<div id='syadow"+i+"' class='"+syadowcss+"' style='position:absolute;filter:Alpha(opacity="+opacityLevel[1]+");'>");
document.writeln(message[i]);
document.writeln("</div>");
}
var messize = new Array();
if(document.all || document.layers){
messize = getLaysize(i);
mess_w[i] = messize[0];
mess_h[i] = messize[1];
}
}
// マウスイベント
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
if (!document.all && document.getElementById && !op6 && !op7){
window.onmousemove = handlerMM;
window.captureEvents(Event.MOUSEMOVE);
}else{
document.onmousemove = handlerMM;
}
window.onresize = NN_reload;
getWinsize();
//-->
</SCRIPT>
</HEAD>
<BODY>
<p align="center">
説明<br>
<p>
<!-- ( )内番号とmessage[ ]の番号を合わせる事。 -->
<a href="#" style="text-decoration:none" onMouseover="mdisp(0)" onMouseout="mdel(0)">Aタグ</a>の部分<br>
<small>
Aタグはネスケ及びMac版IEでは表示されません。
</small><br><br>
<span style="color:red;text-decoration:none" onMouseover="mdisp(1)" onMouseout="mdel(1)">SPANタグ</span>の部分<br>
<small>
SPANタグもネスケで表示されません。
<br><br>
※Aタグ、SPANタグでスタイル指定は可能
</small>
<br><br>
<div align="right">
<a href="#" onMouseover="mdisp(2)" onMouseout="mdel(2)">右端や下端の近くでも、見にくくなる事はない</a>
</div>
<br><br>
</BODY>
</HTML>