★　１１．ちずを　つくる　★

……………………………………………………………………
えを　ちずのように　つかって、
ひとつのえに　りんくを　たくさん　つけてみよう。
……………………………………………………………………

　 　　　 　えを　ちずに　してみよう　　　　　 　

まず、ちずになる　えを　よういします。
えのファイルの名まえに、「.gif」「.jpg」「.bmp」などのきごうがついていますか？
もし、えがなければ、「６．えを　はりつける」でやったように、えを　ほぞんしてね。

　たとえば、えのなかの　まんなかの「とんぼ」に、リンクを　つけます。（「みてみよう」ボタンをおしてね）

みてみよう！

「とんぼ」を　クリックすると、きいろのぺーじに　ジャンプしました。

１．「さいしょのさいしょ」でつくった「file1.html」に、
したの　ふともじでかいてある　きごう（タグ）をかいてみてね。
（はいいろのところは「file1.html」でつくったものなので、かかなくていいです）

<HTML>
    <HEAD>
      <TITLE>　はじめてのホームページ　</TITLE>
    </HEAD>
    <BODY>
      　　こんにちは。
      <IMG SRC="yui1.jpg"　USEMAP="#aaa">
      　　　　　　　　　　 ↑
      　　　（ここには、あなたのえらんだ　えのファイルの名まえを書いてね）
      <MAP NAME="aaa">
      <AREA SHAPE="circle" COORDS="120,80,40" HREF="rink1.html">
      　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑
      　　　　　　　　　　　　　　　　ここには、リンクさせたい　ファイルの　なまえを　かいてね
      </MAP>
    </BODY>
</HTML>

　 ●・　せつめい　・●
  • <IMG SRC="〜">
    「６．えを　はりつける」で、でてきた　タグです。
    〜という　なまえの、えのファイルをはりつけなさい、というめいれいです。
  • USEMAP="#〜"
    「〜という　なまえの、ちずの　じょうほう（マップデータ）を　つかいなさい」、というめいれいです。
  • <MAP NAME="〜"></MAP>
    このタグに　はさまれた　ところに、　ちずの　じょうほう（マップデータ）を　かきます。
  • <AREA SHAPE="circle" COORDS="○,△,□" HREF="〜">
    まるい　わくで　かこまれた　ところをクリックすると、
    「〜」という　ファイルに　ジャンプしなさい、という　めいれいです。
    「○」は、ひだりはじからの　ながさ、「△」は、うえのはしからの　ながさ、
    「□」は、まるの　おおきさを　あらわします。

  • <AREA SHAPE="circle" > の、
    「circle」を、「rect」にすれば、リンクの　ばしょは、しかくの　わくでかこまれます。
    ただし、COORDS=のかきかたは、すこしかわります。
    COORDS=○,● △,▲"
    「○,●」は、しかくの、ひだりうえの　かど、「△,▲」は、みぎしたの　かどの　ばしょを　かきます。

    ……………………………………………………………………
    これらの　めいれいの　くみあわせで、
    ひとつの　えに　いくつもの　りんくを　つけることが　できます。
    ……………………………………………………………………

    　えのなかの　いろんなところを　クリックしてみてね。（「みてみよう」ボタンをおしてね）

    みてみよう！

    もうすこし　おにいさん、おねえさんのためのまとめです。
    　タグのいろいろ(11)
    　　イメージマップ　タグ

    USEMAP="#〜"（〜はマップデータ名）→使用するマップデータの指定
    <MAP NAME="〜"></MAP>（〜はマップデータ名）→マップデータであることを定義
    AREA SHAPE="〜"
    （〜は領域のタイプの指定）    		→マップデータの領域指定
    AREA SHAPE="circle" COORDS="x,y,r"　：中心が(x,y)、半径がr の円
    AREA SHAPE="rect" COORDS="x1,y1 x2,y2"　：
    　　　左上端の座標が(x1,y1)、右下端の座標が(x2,y2)の長方形
    AREA SHAPE="poly" COORDS="x1,y1 x2,y2 … xn,yn"　：
    　　　各頂点の座標が(x1,y1)、(x2,y2)…(xn,yn)の多角形
    AREA SHAPE="default" : その他の領域
    HREF="〜"（〜はURL）→リンク先の指定
    NOHREF→リンクさせない場合

    まえへ一つもどる つぎをよむつぎへ