HTMLリファレンス　～HTMLタグ辞典～

 

サンプル

 

2-1 マウスオーバー

１．このとき<script></script>は<head>内に書きます。
２．色違いの画像を下記のように2種類用意します。

images/kotira.gif


images/kotira_f2.gif
「img1」はname属性なので、複数のマウスオーバーを作る時にはそれぞれ「img 2」や「img3」などの名前を付けましょう。

 

2-2 リンク先の内容説明（テキストを表示）

１．このとき<script></script>は<head>内に書きます。
２．テキストはフォームのテキストフィールドに表示されます。

サンプル ソースコード
サンプルページが別ウィンドウで開きます
javaに関する記述
  1. 画像にマウスを合わせると、javaで定義した画像に変わる
htmlに関する記述
  1. ommouseoverでカーソルをポイントに合わせたときに表示したい画像を指定
  2. onmouseoutでカーソルをポイントから離したときに表示したい画像を指定
  3. 通常の表示にはカーソルを離したときに表示したい画像をimgで指定
 
<script language="JavaScript">
<!--
function myChgPic(myPicURL,myImgTagName){
document.images[myImgTagName]
.src = myPicURL; }
// -->
</script>

</head>
<body>
<a href="#"
onmouseover="myChgPic
('images/kotira_f2.gif','img1')"
onmouseout="myChgPic
('images/kotira.gif','img1')">
<img src="images/kotira.gif" name="img1" border="0"></a>
「ここに説明が出ます」は、スクリプトないとHTML内で同じ文言や記号にするとよいでしょう。

 

2-3 ページ読み込み時に画像をランダム表示

１．<head>内にスクリプトを記述するだけです。
２．画像を3種類用意する。

サンプル ソースコード
サンプルページが別ウィンドウで開きます
javaに関する記述
  1. 画像にマウスを合わせると、javaで定義した画像に変わる
htmlに関する記述
  1. フォーム内に画像やテキストへのマウスオーバー時に文字が表示されるよう指定
  2. それぞれの画像にリンク指定
  3. それぞれのテキストにリンク指定
 
<head>
<script language="JavaScript">
<!--
function dispTF(txt) {
document.myFORM.myFLD.value = txt; }
// -->
</script>
</head>

<body>
<form name="myFORM">説明はこちら<input type="text" size="40" name="myFLD">
</form>
画像のマウスオーバー<br>
<br>
<a href="../html_6.html" onMouseover="dispTF('HTMLセクション6 リンク')"><img src="images/2_2_1.gif" alt="" width="87" height="33" border="0" /></a>
<a href="../css_6.html" onMouseover="dispTF('CSSセクション6 リンク')"><img src="images/2_2_2.gif" alt="" width="87" height="33" border="0" /></a>
<a href="..//reference/" onMouseover="dispTF('このサイトのトップページ')"><img src="image/2_2_3.gif" alt="" width="87" height="33" border="0" /></a>
<br><br>

<br>
テキストでは次の通りです<br>
<br>

<a href=""../html_6.html" onMouseover="dispTF('HTMLセクション１')">HTML</a><br>
<a href="../css_6.html" onMouseover="dispTF('CSSセクション１')">CSS</a><br>
<a href="..//reference/" onMouseover="dispTF('このサイトのトップページ')">TOP</a>
</body>
サンプル ソースコード
サンプルページが別ウィンドウで開きます
javaに関する記述
  1. F5キーを繰り返し押すと定義した3種類の写真がランダムに表示される
  2. 表示したい枚数を入力し else if 以下の記述により表示したい写真を指定
  <script Language="JavaScript">
<!--
var imgMax = 3; //セットする画像の枚数。
var imgRand = Math.floor(Math.random() * imgMax);

if(imgRand == 0) document.write('<img src="image/2_3_1.gif" width=200 height=150>');
else if(imgRand == 1) document.write('<img src="image/2_3_2.gif"width=200 height=150>');
else if(imgRand == 2) document.write('<img src="image/2_3_3.gif"width=200 height=150>');

//-->
</script>

/*これ以下、
else if(imgRand == 3) document.write('<img src="画像">');
else if(imgRand == 4) document.write('<img src="画像">');
枚数は”0”から始まる変数の変化でどんどん増やせます。
1行目の "imgMax=examlpe"、セットする画像の枚数の値を変更してください。*/

 

2-4 別ページへジャンプする

<head>内にスクリプトを記述するだけです。
サンプル ソースコード
サンプルページが別ウィンドウで開きます
javaに関する記述
  1. 違うページへ転送をさせる定義
  <script Language="JavaScript">
<!--
location.href = "java_2_4_2.html";

//-->
</script>
/*java_2_4_2.htmlというファイル名のところは、ｈｔｔｐ：／／から始まるアドレスをいれてもいい。*/