マウスカーソルが乗ると

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

改行する事もできます


画像の表示もできます
 画像のリンクでもＯＫです
リンク先の説明をポップアップ表示させよう
表示の例
※ この例のリンク先は、すべてトップページです。
 リンクにマウスカーソルが乗ると、ポップアップコメントが表示されます。
プログラムＡのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムＡのソース
<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>
プログラムＡのソースは、表示されるポップアップコメントのスタイルを設定しているところです。文字の大きさや背景色などをここで設定しますので、下の表を参考にあなたのお好みにかえてください。
かえるところ ソースをかえるところ
文字の大きさ 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 のままにしておいて、罫線の色を背景の色と同色にしてくださいね。
プログラムＢのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムＢのソース
<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>
プログラムＢのソースの上から９行目にある sX = -10 と sY = 30 のところで、マウスカーソルからどれだけ離れた位置にポップアップコメントを表示させるかを設定しています。
横の位置は sX = -10 の -10 を、縦の位置は sY = 30 の 30 をお好みの数字にかえてください。
リンクの文字や画像のHTMLソースの例を参考にして、あなたのページのリンクの文字や画像のHTMLソースにプログラムＣを貼り付けしましょう。
リンクの文字や画像のHTMLソースの例
<a href="java_top.html" onMouseOver="OnLink('L1',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L1')">リンク先１</a>
<a href="java_top.html" onMouseOver="OnLink('L2',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L2')">リンク先２</a>
<a href="java_top.html" onMouseOver="OnLink('L3',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L3')">リンク先３</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>
プログラムＣのソース
onMouseOver="OnLink('L1',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L1')"
このHTMLソースの例には４つのリンクがあります。それぞれにプログラムＣが貼り付けしてありますが、それぞれのリンクによって L1 、L2 、L3 、L4 、となっています。
→ onMouseOver="OnLink('L1',event.x,event.y,event.pageX,event.pageY)" onMouseOut="OffLink('L1')"
これは リンク先１ というリンク文字にマウスカーソルが乗ると、次に紹介するプログラムＤのところで設定する L1 のポップアップコメントが表示されるということです。プログラムＣのソースの２ヶ所の L1 の部分を、ポップアップコメントを表示させるリンクの数だけ L2 、L3 、L4 、・・・ とかえて貼り付けをしてください。
プログラムＤのソースをコピーして、HTMLソースのBODY区間に貼り付けしましょう。場所はBODY区間のいちばん上がいいと思います。 → <body> のすぐ下。
プログラムＤのソース
<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">画像のリンクでもＯＫです</span>
このプログラムＤのソースには、表示されるポップアップコメントの内容が書いてあります。テキストだけではなく、お好みの画像も表示する事ができます。
<span id="L1" class="c1">マウスカーソルが乗ると<br><br>コメントが表示されます</span> の部分は、プログラムＣの L1 のリンク文字（リンク先１）にマウスカーソルが乗った時に表示されるポップアップコメントです。
プログラムＣの L1 、L2 、L3 、L4 、・・・ に対して、span id="L1" 、span id="L2" 、span id="L3" 、span id="L4" 、・・・ というように追加をしてください。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
５・６年生にもわかるやさしいJavaScriptのTOPへ