ゼミI実習


ゼミIで使用しているテキストがあります

HTML実習(その7)クリッカブルマップ


前回は白地図に参加国の国旗を並べてもらいました。今回は白地図の国旗をクリックした時にウィンドウを使って情報を表示する方法について練習してみます。この方法をクリッカブルマップといいます。ezHTMLを使って練習してみましょう。

まず、次のような画像がすでに用意されているものとします。これはアジアのものでasia_kokki.pngという名前のファイルです。


前回までに作ったページのうちasia.htmというWebページができているものとします。そのページは以下のようになっているものとします。

<html>
<head>
<title>
WorldCup2006<大陸別参加国 アジア></title>
<style type="text/css">
<!--
body{background-color:#ffffff;margin-left:10%;margin-right:10%}
#header{
  margin: 0;
  padding: 10px 0px;
  border-bottom: 1px solid #cccccc;
  width: 100%;
  background-color: #ff4500;
}
#left{
  float:left;
  width: 25%;
  font-size: 80%;
  margin: 0 3% 0 0;
  padding: 0px;
  background-color: #eeeeee;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
#right{
  margin: 0;
  padding: 3% 3% 0 0;
  font-size: 80%;
  font-family: Arial,sans-serif;
  color: #333333;
  line-height: 1.166;	
}
#footer{
  font-size: 80%;
  clear:both;
  border-top: 1px solid #cccccc;
  padding: 10px 0 0 0;
  margin-top: 3%;
}
-->
</style>
</head>
<body>
<div id="header">
WorldCup2006<大陸別参加国 アジア>
</div>
<div id="left">
大陸別参加国一覧<br><br>
<a href="afrika.htm">アフリカ</a><br>
<a href="asia.htm">アジア</a><br>
<a href="oceania.htm">オセアニア</a><br>
<a href="europa.htm">ヨーロッパ</a><br>
<a href="america.htm">北米・中米</a><br>
<a href="camerica.htm">南米</a>
</div>
<div id="right">
</div>
<div id="footer">
つらいけど、がんばれ日本!
 
</div>
</body>
</html>

このWebページをezHTMLで開いてください。開いたらdivタグ中の”つらいけど、がんばれ日本!”の下の部分をクリックしてください。ここに画像の中でクリックする部分の情報が入ります。

メニューの標準>クリッカブルマップの作成をクリックします。ウィンドウが現れるのでまず、画像ファイルを読み込みます。

左上のフォルダアイコンをクリックします。必要なファイル、ここではasia_kokki.pngを選択し開きます。

次の手順で日本、韓国、イラン、サウジアラビアの順に国旗に対しクリッカブルマップの設定を行います。

・四角形の絵のアイコンがあるので、これをクリックします。
・日本の国旗の左上の部分をクリックします。
・範囲を設定する部分が表示されます。
・右下の部分をドラッグして日本の国旗を覆うように囲みます。
・囲んだら、四角形の絵のアイコンの二つ右に、フォルダに+のアイコンがあるのでこれをクリックして選択した部分の情報を登録します。
・ファイルを開くのウィンドウが出てきます。ファイル名が開いたページのものであることを確認し開くボタンをクリックします。
・alt属性値の設定用のウィンドウが開くので、国旗がわかるように入力しましょう。jpnと入力します。
・左側の部分に今設定した情報が追加されています。
・同様にして残りの国旗についても試してください。

残りの国旗についても設定したら、四角形の絵のアイコンの三つ左に貼り付けのアイコンをクリックします。すると次のようなクリッカブルマップの情報がページのプログラムに追加されます。ただし、人によってcoords属性などの値は違っていると思います。

<img src="asia_kokki.png" border="0" alt="asia_kokki.png(39345 byte)" 
     width="713" height="557" usemap="#imagemap">
<map name="imagemap">
	<area shape="rect" coords="580,165,632,200" href="asia.htm" alt="jpn">
	<area shape="rect" coords="504,176,556,211" href="asia.htm" alt="kor">
	<area shape="rect" coords="69,189,126,223" href="asia.htm" alt="irn">
	<area shape="rect" coords="23,264,75,300" href="asia.htm" alt="ksa">
</map>

上書き保存してから、ブラウザで確認してみましょう。地図が表示され、各国旗の部分がクリックできるようになっています。クリックすると上のクリッカブルマップの情報のareaタグのhref属性で指定したページが表示されます。

このままではおもしろくありませんので、別のページを開くようにしてみましょう。次のページを用意してください。jpn.htmとします。

<html>
<head>
<title>
日本の情報
</title>
</head>
<body>
日本の情報<br><br>
<input type="button" value="閉じる" onClick="window.close()">
</body>
</html>

それから、さっき貼り付けたクリッカブルマップのタグの部分を変更します。

<img src="asia_kokki.png" border="0" alt="asia_kokki.png(39345 byte)" width="713" 
     height="557" usemap="#imagemap">
<map name="imagemap">
	<area shape="rect" coords="580,165,632,200" href="javascript:popWin(1)" 
	      alt="jpn">
	<area shape="rect" coords="504,176,556,211" href="asia.htm" alt="kor">
	<area shape="rect" coords="69,189,126,223" href="asia.htm" alt="irn">
	<area shape="rect" coords="23,264,75,300" href="asia.htm" alt="ksa">
</map>

日本の国旗の部分のhrefの値を

href="javascript:popWin(1)"

のように変更しています。

これはjavascriptで書いた関数popWinに1の値を渡しています。このプログラムはheadタグのところでstyleタグの下に次のプログラムを付け加えます。

<script language="javascript">
<!--
function popWin(k){
  switch(k){ 
    case 1:subWin=window.open("jpn.htm","日本","width=240,height=160");break;
  }
}
-->
</script>

ここでwindow.openという関数を使って、さっき作ったjpn.htmを指定しています。あとはタイトルとウィンドウの大きさを指定しています。

kのところにさっき渡した値が入っていてその値によりswitch文を使って場合分けをしています。

練習1.今回作った残りの国についても、日本と同じようなウィンドウが開くようにしてみなさい。

<ヒント> 韓国の分を追加したい時には

<map name="imagemap">
	<area shape="rect" coords="580,165,632,200" href="javascript:popWin(1)" 
	      alt="jpn">
	<area shape="rect" coords="504,176,556,211" href="javascript:popWin(2)"
	      alt="kor">
	<area shape="rect" coords="69,189,126,223" href="asia.htm" alt="irn">
	<area shape="rect" coords="23,264,75,300" href="asia.htm" alt="ksa">
</map>

のように属性hrefのところでpopWinに2を渡し、実際のプログラムでは次のように

function popWin(k){
  switch(k){ 
    case 1:subWin=window.open("jpn.htm","日本","width=240,height=160");break;
    case 2:subWin=window.open("kor.htm","韓国","width=240,height=160");break;
  }
}

switch文の変数kで2を受けた場合には、case 2:のプログラムが処理されます。この時kor.htmのファイルも忘れずに用意しておきましょう。

練習2.残りの地域についてもクリッカブルマップを作成し、各国旗をクリックした時にその国の情報を表示するようにしなさい。