無料ホームページの作り方。７日で自分オリジナルのCSSやタグ打ちページを作ろう

JavaScript

完全無料のホームページの作り方講座「7タグ」！がんばっていきましょ～

これもひとつの言語ですが、HTMLやスタイルシートと決定的に違うのは、
JavaScriptはプログラミングであるということです。

・クリックすると別ウィンドウが開く
・画面上に雪を降らせる
・マウスを動かすと画像がついてくる

など、ホームページでよく見かけるおもしろ技は、たいていJavaScriptです。

しかしやはりプログラミングです。
HTMLすら覚えたてのみなさんが、プログラミングなんてできるわけはありません
（できる人いたらごめんなさい・・・）。

でも大丈夫です！
親切なプログラマーさんたちが、自分で組んだプログラムを、無料で配布してくださっています！

どこでもらえるか、は後でお教えするとして・・・
ここでは、ためしに私が作ったJavaScriptプログラムを使って、どんなもんだか味わっていただきたいと思います。
内容は、
「マウスを乗せると画像が変わる」です(InternetExplorer、Netscape6.0以降　対応)。

リンクボタンにマウスを乗せてみてください(^-^)↓（クリックはしないでね、乗せるだけね！）

こんな風になります、GO!!

「menu.html」を開いてください。
４日目に素材屋さんでもらってきたテキストアイコンの、まだ使ってない方を確認してください。
「オンマウスで表示される画像」になります。
「menu.html」を、次のように編集してください！コピペしてもいいです。

<HTML>
  <HEAD>
    <TITLE>ななたぐのへや</TITLE>
    <SCRIPT type="text/javascript">
      <!--

          //７日で作る！タグ打ちホームページ*JavaScript講座*
          //URL：https://7-tag.com/

      var img=new Array(); //通常表示される画像
      img[0]=new Image(),img[0].src="img/top.gif";
      img[1]=new Image(),img[1].src="img/profile.gif";
      img[2]=new Image(),img[2].src="img/diary.gif";
      img[3]=new Image(),img[3].src="img/bbs.gif";
      img[4]=new Image(),img[4].src="img/link.gif";

      var img2=new Array(); //オンマウスで表示される画像
      img2[0]=new Image(),img2[0].src="img/top2.gif";
      img2[1]=new Image(),img2[1].src="img/profile2.gif";
      img2[2]=new Image(),img2[2].src="img/diary2.gif";
      img2[3]=new Image(),img2[3].src="img/bbs2.gif";
      img2[4]=new Image(),img2[4].src="img/link2.gif";

    function ChangeImage(a){
      if ( document.images ){
             document.images["img_"+a].src = img2[a].src ;
      }
    }

    function BackImage(b){
      if ( document.images ){
            document.images["img_"+b].src = img[b].src ;
      }
    }

   //-->
   </SCRIPT>
  </HEAD>

  <BODY bgcolor=#B0C4DE background="img/wall.gif">

    <center>

    <span onMouseOver="ChangeImage(0)" onMouseOut="BackImage(0)">
    <a href="top.html" target="contents">
    <img src="img/top.gif" border=0 name="img_0"></a>
    </span>
    <br><br>

    <span onMouseOver="ChangeImage(1)" onMouseOut="BackImage(1)">
    <a href="profile.html" target="contents">
    <img src="img/profile.gif" border=0 name="img_1"></a>
    </span>
    <br><br>

    <span onMouseOver="ChangeImage(2)" onMouseOut="BackImage(2)">
    <a href="diary.html" target="contents">
    <img src="img/diary.gif" border=0 name="img_2"></a>
    </span>
    <br><br>

    <span onMouseOver="ChangeImage(3)" onMouseOut="BackImage(3)">
    <a href="http://・・・（掲示板のアドレス）" target="contents">
    <img src="img/bbs.gif" border=0 name="img_3"></a>
   </span>
   <br><br>

   <span onMouseOver="ChangeImage(4)" onMouseOut="BackImage(4)">
   <a href="link.html" target="contents">
   <img src="img/link.gif" border=0 name="img_4"></a>
   </span>
   <br><br>

    <a href="mailto:sample@sample.xx"><img src="img/mail.png" border=0></a>

   </center>

  </BODY>
</HTML>

※画像が５つ以上ある人は、各所の数字を増やして書き足していってください。

できたら、ブラウザで確認しましょう。
１箇所でも間違えるとエラーして正しく動きません。

また、エラーとは別に、InternetExplorerの場合、次のようなメッセージバーが出ることがあります。
MSIE アクティブコンテンツのセキュリティ

これは、「JavaScript」や「ファイルのダウンロード」などにコンピューターウィルスなどの悪意のあるものを仕組む人がいるために、InternetExplorerがセキュリティを敷いているためです。
バーをクリックし、「ブロックされているコンテンツを許可」をクリックし、さらに出てくる確認メッセージで「はい」をクリックすると、JavaScriptは動くようになります。

同じ「マウスを乗せると画像が変わる」でも、人によってプログラミングの仕方が異なります。
実は、もっと簡単な方法でもできるのですが、ここではあえて大変なほうをやってもらいました。
興味ある方は、あとでいろんなJavaScriptサンプル配布サイトさんと見比べてみてください。

*JavaScript*

JavaScript