マウスカーソルが乗ると

コメントが表示されます
テキストを中央寄せに表示したり

改行する事もできます


画像の表示もできます
画像のリンクでもOKです
リンク先の説明をポップアップ表示させよう
表示の例
※ この例のリンク先は、すべてトップページです。
 リンクにマウスカーソルが乗ると、ポップアップコメントが表示されます。
プログラムAのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムAのソース
<STYLE TYPE="text/css">
<!--
.c1{
position:absolute; left:0px; top:0px; visibility:hidden;
font-size:9pt; color:#0099FF; 
background-color:#FFFFFF; layer-background-color:#FFFFFF;
border:1px solid #0099FF; padding:5;
}
-->
</STYLE>
プログラムAのソースは、表示されるポップアップコメントのスタイルを設定しているところです。文字の大きさや背景色などをここで設定しますので、下の表を参考にあなたのお好みにかえてください。
かえるところ ソースをかえるところ
文字の大きさ font-size:9pt の 9
文字の色 color:#0099FF の #0099FF
背景の色 background-color:#FFFFFFと
layer-background-color:#FFFFFF の #FFFFFF
罫線の太さ border:1px solid #0099FF の 1
罫線の色 border:1px solid #0099FF の #0099FF
内部のスペース padding:5 の 5
罫線の太さは 0 にしないでください。Netscape Navigatorで見た場合に、表示がおかしくなってしまいます。もし罫線を表示させたくない場合は、太さを 1 のままにしておいて、罫線の色を背景の色と同色にしてくださいね。
プログラムBのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムBのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
var IE = 0,NN = 0,N6 = 0;
if(document.all) IE = true;
else if(document.layers) NN = true;
else if(document.getElementById) N6 = true;
function OnLink(Msg,mX,mY,nX,nY){
var pX = 0,pY = 0;
var sX = -10,sY = 30;
if(IE){
MyMsg = document.all(Msg).style;
MyMsg.visibility = "visible";
}
if(NN){
MyMsg = document.layers[Msg];
MyMsg.visibility = "show";
}
if(N6){
MyMsg = document.getElementById(Msg).style;
MyMsg.visibility = "visible";
}
if(IE){
pX = document.body.scrollLeft;
pY = document.body.scrollTop;
MyMsg.left = mX + pX + sX;
MyMsg.top = mY + pY + sY;
}
if(NN || N6){
MyMsg.left = nX+ sX;
MyMsg.top = nY + sY;
}
}
function OffLink(Msg){
if(IE) document.all(Msg).style.visibility = "hidden";
if(NN) document.layers[Msg].visibility = "hide";
if(N6) document.getElementById(Msg).style.visibility = "hidden";
}
//-->
</SCRIPT>
プログラムBのソースの上から9行目にある sX = -10 と sY = 30 のところで、マウスカーソルからどれだけ離れた位置にポップアップコメントを表示させるかを設定しています。
横の位置は sX = -10 の -10 を、縦の位置は sY = 30 の 30 をお好みの数字にかえてください。
リンクの文字や画像のHTMLソースの例を参考にして、あなたのページのリンクの文字や画像のHTMLソースにプログラムCを貼り付けしましょう。
リンクの文字や画像のHTMLソースの例
<a href="java_top.html" onMouseOver="OnLink('L1',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L1')">リンク先1</a>
<a href="java_top.html" onMouseOver="OnLink('L2',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L2')">リンク先2</a>
<a href="java_top.html" onMouseOver="OnLink('L3',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L3')">リンク先3</a>
<a href="java_top.html" onMouseOver="OnLink('L4',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L4')"><img border="0" src="images/click.gif" width="72" height="19"></a>
プログラムCのソース
onMouseOver="OnLink('L1',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L1')"
このHTMLソースの例には4つのリンクがあります。それぞれにプログラムCが貼り付けしてありますが、それぞれのリンクによって L1 、L2 、L3 、L4 、となっています。
→ onMouseOver="OnLink('L1',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L1')"
これは リンク先1 というリンク文字にマウスカーソルが乗ると、次に紹介するプログラムDのところで設定する L1 のポップアップコメントが表示されるということです。プログラムCのソースの2ヶ所の L1 の部分を、ポップアップコメントを表示させるリンクの数だけ L2 、L3 、L4 、・・・ とかえて貼り付けをしてください。
プログラムDのソースをコピーして、HTMLソースのBODY区間に貼り付けしましょう。場所はBODY区間のいちばん上がいいと思います。 → <body> のすぐ下。
プログラムDのソース
<span id="L1" class="c1">マウスカーソルが乗ると<br><br>コメントが表示されます</span>
<span id="L2" class="c1"><center>テキストを中央寄せに表示したり<br><br>改行する事もできます</center></span>
<span id="L3" class="c1"><center><img border="0" src="images/new02.gif" width="29" height="12"><br><br>画像の表示もできます</center></span>
<span id="L4" class="c1">画像のリンクでもOKです</span>
このプログラムDのソースには、表示されるポップアップコメントの内容が書いてあります。テキストだけではなく、お好みの画像も表示する事ができます。
<span id="L1" class="c1">マウスカーソルが乗ると<br><br>コメントが表示されます</span> の部分は、プログラムCの L1 のリンク文字(リンク先1)にマウスカーソルが乗った時に表示されるポップアップコメントです。
プログラムCの L1 、L2 、L3 、L4 、・・・ に対して、span id="L1" 、span id="L2" 、span id="L3" 、span id="L4" 、・・・ というように追加をしてください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ