サンプルページ　　　絵合わせ 3

絵合わせ 3 -ｹﾞｰﾑ

□小Win版

　

　

　

　

　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　 絵合わせ 3　　eawase3.htm        □小Win版。

”神経衰弱”ｹﾞｰﾑ、時間を競います。　　絵=草花(75x56pxl)、19個　　　　　DHTML。　　　　　　画像、ｻｲｽﾞなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。 　　※：関連情報 ：　情報処理教育ｾﾝﾀｰ（素材集） > 春の草花、秋の草花

ﾃﾞﾓは、画像のｸﾘｯｸで。　やり直し、再開 などは、ﾀｲﾏｰのｸﾘｯｸや、 [F5]ｷｰ を押し最新ﾃﾞｰﾀ読み込みで！。〔”更新”ｱｲｺﾝ押さえも、同じ。〕

　

< ご使用方法 >

　・　保存は eawase3.htme を右ｸﾘｯｸ、【名前を付けてﾘﾝｸを保存】 - <保存する場所>： ……、などで。　　※:　変わってしまった、ﾌｧｲﾙ名や、*.htm 中のﾊﾟｽは要修正。

　・　ﾍﾟｰｽﾄは、eawase3.htme をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどの ”ﾃｷｽﾄﾓｰﾄﾞ で、新しいﾍﾟｰｼﾞや hogehoge.htm（=任意の挿入先ﾌｧｲﾙ名） の、 <head>　〜　</head> の任意の行間に (*1)を、さらに <body>　〜　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。　　　※: ﾃｷｽﾄﾓｰﾄﾞ :  ｺｰﾄﾞ/HTMLﾀｸﾞ挿入/HTMLﾒﾆｭｰ など。

　･　編集 : hogehoge.htm に ﾃｷｽﾄﾓｰﾄﾞでﾍﾟｰｽﾄ 後は、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのﾃﾞｻﾞｲﾝや通常ﾓｰﾄﾞ、ﾃｷｽﾄﾓｰﾄﾞ、ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。　　下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。 　 　　画像は 、同ｻｲｽﾞ（≒106x807ﾋﾟｸｾﾙ）画像を準備、画像ﾌｧｲﾙ名を、image-0.jpg〜image-18.jpg に変更したもの。　　　image-0.jpg が初期画に36個表示。　

※: 外部ﾄﾞﾒｲﾝ（ｻｲﾄ）にｱｯﾌﾟﾛｰﾄの画像などの使用は、非表示に注意。

　･　ｱｯﾌﾟﾛｰﾄﾞは、hogehoge.htm と同じﾎﾙﾀﾞｰに、使用してる画像をｱｯﾌﾟﾛｰﾄﾞします。 　　別ﾎﾙﾀﾞｰの場合は、hogehoge.htm の該当ﾊﾟｽ注意。

　・　作動ﾃｽﾄは Edge〜 などで開いて。　　更新の確認は、ﾌﾞﾗｳｻﾞｰなどのｷｬｯｼｭのｸﾘｱ後に実施。　　(1) [F5]ｷ- or Ctrl+Rｷｰ を押し、最新ﾃﾞｰﾀ読み込みで。　　完全には、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [ﾌﾟﾗｲﾊﾞｼｰ、検索、ｻｰﾋﾞｽ] - [閲覧ﾃﾞ-ﾀをｸﾘｱ] - ［ｸﾘｱ-するﾃﾞ-ﾀの選択］ - ［ｖ］閲覧の履歴 -［今すくｸﾘｱ］ をｸﾘｯｸ。

　･　関連情報 ： 色記号、色記号5、〃6、ﾌｫﾝﾄ、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門、HTMLをﾃｷｽﾄｴｷﾞﾀ-で編集。

　

(*1) ：　eawase3.htm （例）　　　　　　　　　挿入先の 　<head> 〜 </head>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

ｼﾌﾄJIS使用（削除不可）

Edgeなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

<style type= 〜  </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景
body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ

　

　

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent

お気に入りなどに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

　

　

画像ﾌｧｲﾙ名ｽﾀｲﾙ

　

　

　

　

　

初期画像ﾌｧｲﾙ名

　

　

　

　

　

　

　

　

　

　

　

 画像ﾌｧｲﾙ名ｽﾀｲﾙ

　

　

　

　


　

　

初期画像ﾌｧｲﾙ名ﾙ

　

初期画像ﾌｧｲﾙ名


初期画像ﾌｧｲﾙ名

　

　

　

PCからのﾒｯｾｰｼﾞ

　

 　

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconu.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Lucida Sans Regular; font-size: 12px}
-->
</style>

<base target="_blank">

<title>サンプルページ　　 絵合わせ　3</title>

<!--　◆　----------　↓ この間をコピー、編集、ペーストします。 ----------　-->
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->

====  この間､説明を省略｡  ====

for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image-' + i + '.jpg';
}
var map=new Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18);
var user = new Array();
var temparray = new Array();
var clickarray = new Array(0, 0);

}====  この間､説明を省略｡  ====

scramble();
runclk();
for (i = 0; i <= 35; i++) {
document.f[('img'+i)].src = "image-0.jpg";
}
}
function runclk() {
min = Math.floor(ticker/60);
sec = (ticker-(min*60))+'';
if(sec.length == 1) {sec = "0"+sec};
ticker++;
document.f.b.value = min+":"+sec;
id = setTimeout('runclk()', 1000);
}
function scramble() {
for (z = 0; z < 5; z++) {
for (x = 0; x <= 35; x++) {
temparray[0] = Math.floor(Math.random()*36);
temparray[1] = map[temparray[0]];
temparray[2] = map[x];
map[x] = temparray[1];
map[temparray[0]] = temparray[2];
}
}
}
function showimage(but) {
if (oktoclick) {
oktoclick = false;
document.f[('img'+but)].src = 'image-'+map[but]+'.jpg';
if (ctr == 0) {
ctr++;
clickarray[0] = but;
oktoclick = true;
} else {
clickarray[1] = but;
ctr = 0;
setTimeout('returntoold()', 600);
}
}
}
function returntoold() {
if ((clickarray[0] == clickarray[1]) && (!user[clickarray[0]])) {
document.f[('img'+clickarray[0])].src = "image-0.jpg";
oktoclick = true;
} else {
if (map[clickarray[0]] != map[clickarray[1]]) {
if (user[clickarray[0]] == 0) {
document.f[('img'+clickarray[0])].src = "image-0.jpg";
}
if (user[clickarray[1]] == 0) {
document.f[('img'+clickarray[1])].src = "image-0.jpg";
}
}
if (map[clickarray[0]] == map[clickarray[1]]) {
if (user[clickarray[0]] == 0&&user[clickarray[1]] == 0) { finished++; }
user[clickarray[0]] = 1;
user[clickarray[1]] = 1;
}
if (finished >= 18) {
alert('＼^o^／、おめでとう！。時間(分:秒)は、'+document.f.b.value+' !');
init();
} else {
oktoclick = true;
}
}
}
// End -->
</script>
<!--　◆　----------　↑ この間をコピー、編集、ペーストします。 ----------

(*2) ：　eawase3.htm （例）　　　　　　　　挿入先の 　<body> 〜 </body>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕
　

　

ﾀｲﾄﾙ色　　ﾀｲﾄﾙ

　

　

　

　

初期画像ﾌｧｲﾙ名

　

　

　

　

時計の吹き出し

 　

<body OnLoad="init()">
<!--　★　↑の　OnLoad="init()"　と、↓ この間をコピー、編集、ペーストします。 ----------　-->
<center>
<h2><font size="4" color="#A00139">絵合わせ2 　-ｹﾞｰﾑ</font></h2>
<form name="f">
<table cellpadding="0" cellspacing="0" border="0">
<script language="javascript">
<!-- Begin
for (r = 0; r <= 5; r++) {
document.write('<tr>');
for (c = 0; c <= 5; c++) {
document.write('<td align="center">');
document.write('<a href="javascript:showimage('+((6*r)+c)+')" onClick="document.f.b.focus()">');
document.write('<img src="image-0.jpg" name="img'+((6*r)+c)+'" border="0">');
document.write('</a></td>');
}
document.write('</tr>');
}
// End -->
</script>
</table>
<div style="position: absolute; top:11px; right:10px;">
<input type="button" value=" " name="b" onClick="init()" title="再開は → ｸﾘｯｸ、又は［F5］ｷｰで。" style="cursor:hand">
</form>
</div>
</center>
<!--　★　----------　↑ この間をコピー、編集、ペーストします。 ----------　-->
　

ハロー（^. ^）