画像の中のお好きな地点をクリックすると、下のフォーム欄にその名称が表示されます。
例えば「くも」の絵が描かれている所をクリックすると、フォーム欄に「くも」と言う名前が表示されます。
ついでに英語でも表示されるので、英語のお勉強にもなります。
また、物体によっては複数の言葉が表示されます。
例えば「家」の場合。「家」と言う言葉とどこをクリックしたかによって、その場所名も表示されます。
「家」の「窓」をクリックすると、「家」と「窓」と表示されます。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html><head>
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
function pic(dore)
{hiki=new Array();
hiki[0]="taiyou"; hiki[1]="kumo"; hiki[2]="kumo"; hiki[3]="kumo";
hiki[4]="tree_ha"; hiki[5]="tree_miki"; hiki[6]="mountain"; hiki[7]="mountain";
hiki[8]="smoke"; hiki[9]="smoke"; hiki[10]="smoke"; hiki[11]="yane";
hiki[12]="entotu"; hiki[13]="mado"; hiki[14]="doa"; hiki[15]="jitensya";
hiki[16]="saku"; hiki[17]="kusa"; hiki[18]="kusa"; hiki[19]="kusa";
hiki[20]="kusa"; hiki[21]="kusa"; hiki[22]="kusa"; hiki[23]="kusa";
hiki[24]="kusa"; hiki[25]="kusa"; hiki[26]="hana"; hiki[27]="hana";
hiki[28]="hana"; hiki[29]="hana"; hiki[30]="hana"; hiki[31]="hana";
hiki[32]="hana"; hiki[33]="miti"; hiki[34]="kabe"; hiki[35]="sora";
hiki[36]="kawa"; hiki[37]="jimen";
kekka_ja=new Array();
kekka_ja[0]="たいよう"; kekka_ja[1]="くも"; kekka_ja[2]="くも"; kekka_ja[3]="くも";
kekka_ja[4]="はっぱ"; kekka_ja[5]="みき"; kekka_ja[6]="やま"; kekka_ja[7]="やま";
kekka_ja[8]="けむり"; kekka_ja[9]="けむり"; kekka_ja[10]="けむり"; kekka_ja[11]="やね";
kekka_ja[12]="えんとつ"; kekka_ja[13]="まど"; kekka_ja[14]="どあ"; kekka_ja[15]="じてんしゃ";
kekka_ja[16]="さく"; kekka_ja[17]="くさ"; kekka_ja[18]="くさ"; kekka_ja[19]="くさ";
kekka_ja[20]="くさ"; kekka_ja[21]="くさ"; kekka_ja[22]="くさ"; kekka_ja[23]="くさ";
kekka_ja[24]="くさ"; kekka_ja[25]="くさ"; kekka_ja[26]="はな"; kekka_ja[27]="はな";
kekka_ja[28]="はな"; kekka_ja[29]="はな"; kekka_ja[30]="はな"; kekka_ja[31]="はな";
kekka_ja[32]="はな"; kekka_ja[33]="みち"; kekka_ja[34]="かべ"; kekka_ja[35]="そら";
kekka_ja[36]="かわ"; kekka_ja[37]="じめん";
kekka_en=new Array();
kekka_en[0]="the sun"; kekka_en[1]="a cloud"; kekka_en[2]="a cloud"; kekka_en[3]="a cloud";
kekka_en[4]="a leaf"; kekka_en[5]="a trunk"; kekka_en[6]="a mountain"; kekka_en[7]="a mountain";
kekka_en[8]="smoke"; kekka_en[9]="smoke"; kekka_en[10]="smoke"; kekka_en[11]="a roof";
kekka_en[12]="a chimney"; kekka_en[13]="a window"; kekka_en[14]="a door"; kekka_en[15]="a bicycle";
kekka_en[16]="a fence"; kekka_en[17]="grass"; kekka_en[18]="grass"; kekka_en[19]="grass";
kekka_en[20]="grass"; kekka_en[21]="grass"; kekka_en[22]="grass"; kekka_en[23]="grass";
kekka_en[24]="grass"; kekka_en[25]="grass"; kekka_en[26]="a flower"; kekka_en[27]="a flower";
kekka_en[28]="a flower"; kekka_en[29]="a flower"; kekka_en[30]="a flower"; kekka_en[31]="a flower";
kekka_en[32]="a flower"; kekka_en[33]="a way"; kekka_en[34]="a wall"; kekka_en[35]="the sky";
kekka_en[36]="a river"; kekka_en[37]="the ground";
for(i=0; i<hiki.length; i++)if(hiki[i] == dore)break;
if(i!=4 && i!=5 && i!=11 && i!=12 && i!=13 && i!=14 && i!=34)
document.form1.text1.value="それは「"+kekka_ja[i]+"」だよ。\nえいごでは「"+kekka_en[i]+"」って、いうんだよ！";
else if(i==4 || i==5)
{document.form1.text1.value="それは「き」だよ。\nえいごでは「a tree」って、いうんだよ！\n";
document.form1.text1.value+="いまおしたところは、「"+kekka_ja[i]+"」だよ。\nえいごでは「"+kekka_en[i]+"」って、いうんだよ！";}
else
{document.form1.text1.value="それは「いえ」だよ。\nえいごでは「a house」って、いうんだよ！\n";
document.form1.text1.value+="いまおしたところは、「"+kekka_ja[i]+"」だよ。\nえいごでは「"+kekka_en[i]+"」って、いうんだよ！";}
}
//-->
</script>
</head>
<body>
<table bgcolor="#F4A460" cellpadding="3" border=1 align=center>
<tr><th>
<img src="home.jpg" border="0" width="300" height="300" usemap="#picture" alt="図形（クリッカブルマップ）">
<map name="picture">
<area shape="polygon" coords="28,42,28,34,32,26,38,20,44,18,53,17,60,19,67,24,72,34,73,40,72,48,65,56,59,61,49,62,43,61,35,57,30,50" href="JavaScript:pic('taiyou');" alt="たいよう">
<area shape="polygon" coords="111,42,115,38,118,32,124,31,130,25,139,28,144,27,149,33,152,34,156,43" href="JavaScript:pic('kumo');" alt="くも">
<area shape="polygon" coords="170,74,174,70,176,64,181,63,187,57,193,58,195,60,201,59,207,63,207,66,210,65,216,75" href="JavaScript:pic('kumo');" alt="くも">
<area shape="polygon" coords="231,39,235,36,237,30,244,28,248,24,255,23,257,25,265,25,269,31,272,31,279,40" href="JavaScript:pic('kumo');" alt="くも">
<area shape="polygon" coords="15,200,50,170,30,170,55,145,40,140,70,120,95,140,85,145,110,170,90,170,125,200" href="JavaScript:pic('tree_ha');" alt="き">
<area shape="rect" coords="59,200,78,215" href="JavaScript:pic('tree_miki');" alt="き">
<area shape="polygon" coords="0,215,15,200,56,201,56,215" href="JavaScript:pic('mountain');" alt="やま">
<area shape="polygon" coords="80,214,80,201,126,201,105,181,115,176,180,175,145,176,155,176,140,191,155,194,155,215" href="JavaScript:pic('mountain');" alt="やま">
<area shape="polygon" coords="235,124,240,120,250,116,263,117,270,121,261,131,241,130" href="JavaScript:pic('smoke');" alt="けむり">
<area shape="polygon" coords="256,101,260,98,270,95,282,97,285,101,280,106,270,109,261,106" href="JavaScript:pic('smoke');" alt="けむり">
<area shape="polygon" coords="279,84,281,80,288,79,295,80,299,85,295,88,289,89,281,89" href="JavaScript:pic('smoke');" alt="けむり">
<area shape="polygon" coords="140,190,210,135,280,190" href="JavaScript:pic('yane');" alt="いえ">
<area shape="polygon" coords="251,166,251,140,252,139,250,134,232,135,231,139,233,141,233,153" href="JavaScript:pic('entotu');" alt="いえ">
<area shape="rect" coords="220,198,250,225" href="JavaScript:pic('mado');" alt="いえ">
<area shape="rect" coords="180,200,205,245" href="JavaScript:pic('doa');" alt="いえ">
<area shape="polygon" coords="240,260,234,258,230,254,231,248,235,244,240,243,242,239,240,238,239,235,241,234,243,235,243,236,247,236,246,238,254,239,254,238,254,236,254,234,261,235,259,239,258,241,259,243,268,244,270,249,270,257,266,259,258,260,255,258,254,258,254,258" href="JavaScript:pic('jitensya');" alt="じてんしゃ">
<area shape="polygon" coords="193,238,189,238,189,241,191,242,193,242,194,256,198,257,199,256,200,242,208,242,208,255,210,257,214,256,214,242,222,242,222,255,224,257,229,256,229,241,238,241,238,243,241,243,243,238,239,237,240,235,242,235,244,235,244,233,242,230,238,232,238,237,228,237,228,233,226,231,223,233,222,237,214,237,214,234,211,231,208,233,208,237,200,237,199,233,198,230,194,232,193,237" href="JavaScript:pic('saku');" alt="さく">
<area shape="polygon" coords="246,237,254,237,254,239,245,239" href="JavaScript:pic('saku');" alt="さく">
<area shape="polygon" coords="255,235,259,231,262,233,262,237,271,237,271,233,274,231,278,234,278,237,289,238,289,233,291,231,295,233,295,238,299,237,299,242,295,242,295,255,293,257,288,256,288,242,278,242,278,256,276,257,272,256,272,242,261,242,261,242,258,243,258,240,258,239,259,238,260,235,260,235" href="JavaScript:pic('saku');" alt="さく">
<area shape="polygon" coords="26,232,19,227,23,226,26,223,31,227,30,227" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="99,230,93,225,99,223,103,226" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="51,225,44,221,51,217,56,220" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="124,225,119,220,125,217,129,220" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="135,243,129,240,135,236,141,239" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="124,264,117,260,124,256,128,260" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="142,278,136,273,142,270,146,273" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="111,296,105,291,111,288,116,291" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="170,291,162,288,168,283,174,286" href="JavaScript:pic('kusa');" alt="くさ">
<area shape="polygon" coords="2,220,3,215,10,213,15,216,16,220,13,225,8,227,4,226,4,226" href="JavaScript:pic('hana');" alt="はな">
<area shape="polygon" coords="63,227,65,221,71,220,77,222,78,227,75,233,69,234,64,231" href="JavaScript:pic('hana');" alt="はな">
<area shape="polygon" coords="110,239,112,233,116,231,122,233,123,239,121,243,116,246,112,243" href="JavaScript:pic('hana');" alt="はな">
<area shape="polygon" coords="135,224,136,220,142,217,147,219,149,225,146,230,141,232,137,229" href="JavaScript:pic('hana');" alt="はな">
<area shape="polygon" coords="108,278,109,274,115,271,120,273,122,280,119,284,114,285,109,283" href="JavaScript:pic('hana');" alt="はな">
<area shape="polygon" coords="139,290,141,284,146,282,151,285,153,291,149,295,145,296,141,294" href="JavaScript:pic('hana');" alt="はな">
<area shape="polygon" coords="182,289,184,283,191,282,197,287,196,293,193,295,189,296,184,294" href="JavaScript:pic('hana');" alt="はな">
<area shape="polygon" coords="165,248,186,247,204,248,184,250,173,252,166,256,167,260,175,263,188,267,203,268,223,272,240,275,258,279,272,285,281,292,284,299,227,299,220,290,212,286,202,283,188,281,175,277,156,272,145,265,143,259,144,256,146,253,153,250,163,248,167,247" href="JavaScript:pic('miti');" alt="みち">
<area shape="rect" coords="156,193,266,249" href="JavaScript:pic('kabe');" alt="いえ">
<area shape="rect" coords="0,0,300,215" href="JavaScript:pic('sora');" alt="そら">
<area shape="polygon" coords="0,235,56,239,83,244,98,250,106,259,105,272,98,283,88,294,80,299,0,299,0,294,13,289,26,282,38,274,43,266,41,257,38,253,26,249,16,247,8,246,0,246,0,245,0,245" href="JavaScript:pic('kawa');" alt="かわ">
<area shape="rect" coords="0,215,300,300" href="JavaScript:pic('jimen');" alt="じめん">
</map>
<br>
<form name="form1">
<textarea name="text1" cols="50" rows="5">
</textarea><br>
<input type="reset" value="けしちゃう！">
</form>
</th></tr></table>
</body>
</html>
[ 解説 ]
もしオリジナルの画像を作成したい場合は、クリッカブルマップに対する知識が必須となります。
クリッカブルマップに対する知識がある方は、まずお好きな画像を1枚用意してください。
次に通常のクリッカブルマップを作成する手順で、マップを作成してください。
クリッカブルマップ内の要素を増やしたい場合、減らしたい場合は必要に応じて増減して下さい。
上から6〜39行目に結果でキーワード、表示される文字、英語の文字が設定されています。
これらはクリッカブルマップの各要素の上から順番に連動しています。
「[＊]」で表示された部分で、数字が同じものが3つずつあります。
同じ数字同士、キーワード、日本語の結果文字、英語の結果文字と連動しています。
お好きなように結果を書き換えて下さい。
ただし数字をずれて書き換えてしまいますと、正しく結果が表示されないのでご注意下さい。
上から43行目に結果で表示する文章があります。
お好きなように変更して下さい。
ただし全角文字の部分のみご変更下さい。半角文字部分は変更しないで下さい。
動かなくなる場合があり得ます。
また上から45、46行目、48、49行目にも結果で表示する文章がありますが、
43行目と同じ内容をお書き下さい。
これらも同じく、全角部分のみご変更下さい。
（JavaScriptの仕組みがわかる方は、お好きなようにカスタマイズして下さって結構です。）
これで変更作業は終わりです。
（補足）
テキストエリア内の文字を改行させたい場合は、改行させたい箇所に「\n」を書いてください。
|
