コメント表示(2)


醤油&味噌
リンク集

JavaScript

ボタンの上にマウスを置くと、コメントが表示されます。
ボタンを押すとそのページにリンクされています。

<SCRIPT LANGUAGE=javascript>
<!--
var msgTb = new Array();
msgTb[0] = "会社概要、地図などを紹介。";
msgTb[1] = "醤油&味噌についての情報を紹介。";
msgTb[2] = "コハク色の透明な醤油、白醤油についての情報を紹介。";
msgTb[3] = "醤油、味噌、麹関連のリンク集です。";
msgTb[4] = "お料理関連のリンク集です。今晩は夕食のご参考にして下さい。";

function msgS0(x,y,ii){
 m0.style.color = "#ffffff";
 m0.style.posLeft = x + 5;
 m0.style.posTop = y + 5;
 m0.style.padding = 10;
 m0.innerHTML = msgTb[ii];
 m0.style.backgroundColor = "#008800";
 m0.style.visibility = "visible";
}

function msgH0(){
 m0.style.visibility = "hidden";
}

//-->
</SCRIPT>
//
<table border="1" width="46%" height="120">
<tr>
<td width="17%" bgcolor="#FDF8B5" height="120" align="center" rowspan="3"><b><font size="2">醤油&味噌</font></b></td>
<td width="39%" bgcolor="#FDF8B5" height="40" align="center"><input type="button" value="太田屋醸造のお話" name="B1" LANGUAGE=javascript onmouseover="msgS0(event.x,event.y,0)" onmouseout="msgH0()" onclick="location.href='../ootaya01.htm'"></td>
</tr>
<tr>
<td width="39%" bgcolor="#FDF8B5" height="40" align="center"><input type="button" value="醤油・味噌のお話" name="B2" LANGUAGE=javascript onmouseover="msgS0(event.x,event.y,1)" onmouseout="msgH0()" onclick="location.href='../s200.html'"></td>
</tr>
<tr>
<td width="39%" bgcolor="#FDF8B5" height="40" align="center"><input type="button" value="白しょうゆについて" name="B3" LANGUAGE=javascript onmouseover="msgS0(event.x,event.y,2)" onmouseout="msgH0()" onclick="location.href='../cook/ootaya02.htm'"></td>
</tr>
<tr>
<td width="17%" bgcolor="#FDF8B5" height="80" align="center" rowspan="2"><font size="2"><b>リンク集</b></font></td>
<td width="39%" bgcolor="#FDF8B5" height="40" align="center"><input type="button" value="醤油・味噌・糀リンク集" name="B4" LANGUAGE=javascript onmouseover="msgS0(event.x,event.y,3)" onmouseout="msgH0()" onclick="location.href='../lka00.html'"></td>
</tr>
<tr>
<td width="39%" bgcolor="#FDF8B5" height="40" align="center"><input type="button" value="料理関連のリンク" name="B5" LANGUAGE=javascript onmouseover="msgS0(event.x,event.y,4)" onmouseout="msgH0()" onclick="location.href='../cook/lka600.html'"></td>
</tr>
</table>
<DIV id="m0" style="position:absolute;padding:10px"></DIV> 
onmouseover="msgS0(event.x,event.y,0)"
マウスをボタンの上に置く(onmouseover)時の処理(msgS0:コメント表示)。
onmouseout="msgH0()"
マウスをボタンから離した(onmouseout)時の処理(msgH0:コメント欄の消去)。
onclick="location.href='../ootaya01.htm'"
ボタンを押した(onclick)時の処理(ページリンク)。
location.href='リンクしたいページ(URL)'
4)<DIV id="m0" style="position:absolute;padding:10px"></DIV>
コメント欄の定義。

function msgS0(x,y,ii){
 if (document.all){
  m0.style.color = "#ffffff";   //文字の色(白)の指定
  m0.style.posLeft = x + 5;  //表示する位置(横)の指定
  m0.style.posTop = y + 5;  //表示する位置(縦)の指定
  m0.style.padding = 10;    //表示するコメント欄の高さの指定
  m0.innerHTML = msgTb[ii]; //表示するコメントの指定
  m0.style.backgroundColor = "#008800";  //表示するコメント欄の背景色指定
  m0.style.visibility = "visible";  //コメント欄を表示
 } 
}

function msgH0(){
 if (document.all){
  m0.style.visibility = "hidden";  //コメント欄の消去
  } 
}
注1)JavaScriptで処理しています。JavaScript対応ブラウウザでご使用下さい。
注2)IE4.0以上で動作可能です。



00/05/22更新

戻る