絵合わせ 9c -ｹﾞｰﾑ

　

　

　

　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　 絵合わせ 9c（編集の詳細記述）　　eawase9c.htm　　　　 ※ : 関連情報 ：絵合わせ 1 2 3 4 5 6 7 8 9 9a 9b 9c1 9c2 9c3 9c4 9c5 9c6　　□ｽﾗｲﾄﾞｼｮｰ14b　□ﾗﾝﾀﾞﾑ画像2a

画像合わせｹﾞｰﾑ、時間を競います。　　6x6ｾﾙ、画像数=18+1個（初期画像）、画像ｻｲｽﾞ=100x100 ﾋﾟｸｾﾙ、ﾓﾃﾞﾙ。　　DHTML。　　画像、 ﾒｯｾｰｼﾞ、Winｻｲｽﾞなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　all対応。　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、画像のｸﾘｯｸで。　　ﾌﾙｽｸﾘｰﾝの "ｵﾝ/ｵﾌ"は、［F11］ｷ-で。　　 画像 などの表示ｻｲｽﾞ変更は、［Ctrl］＋ﾏｳｽｽｸﾛｰﾙ で。　　（IEの、右上の [ﾂｰﾙ] - [拡大] -で、また　Edgeの右上の　[設定] - []ｽﾞｰﾑ］-でも可。 ）

　

< ご使用方法 >

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

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

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

※: 外部ﾄﾞﾒｲﾝ（ｻｲﾄ）にｱｯﾌﾟﾛｰﾄの画像などの使用は、非表示に注意。　　画像の alt ﾀｸﾞは不可、ｻｲｽﾞ指定の pt などの省略は注意。　　ｽｸﾘﾌﾟﾄ構文中への 改行混入注意。

　･　ｱｯﾌﾟﾛｰﾄﾞは、hogehoge.htm と同じﾎﾙﾀﾞｰに、使用してる 上記画像、*.js、*.css などがあればｱｯﾌﾟﾛｰﾄﾞします。 　　別ﾎﾙﾀﾞｰの場合は、hogehoge.htm の該当ﾊﾟｽ注意。　　転送ﾓｰﾄﾞ注意。

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

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

　

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

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

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

　

URL前・ﾂｰﾙﾊﾞｰに表示のｱｲｺﾝﾌｧｲﾙ名（削除可）favicon_**.ico など

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

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

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

Win幅　高さ　※:削除可。

　

　

　

　

画像数


像ﾌｧｲﾙ名
7箇所に記述

画像数18の（例）

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

列・行数

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　


　

Webﾍﾟｰｼﾞからのﾒｯｾｰｼﾞ

 　

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link REL="SHORTCUT ICON" href="../favicon.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:メイリオ.Lucida Sans Regular,MS PGothic,; font-size: 12px}
 --></style>

<base target="_blank">

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

<script language="JavaScript">window.self.resizeTo(700,850)</script><!-- Win幅　高さ -->
<!--　◆　----------　↓ この間をコピー、編集、ペーストします。 ----------　-->
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site: http://www.bgaudiodr.iwarp.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var pics = new Array();
　　　　　　<!-- 画像数 -->
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
<!-- 画像ﾌｧｲﾙ名　x0.jpg〜　の（例）　 -->
pics[i].src = 'x' + i + '.jpg ';
}
<!-- 画像数18の（例） -->
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);
var ticker, sec, min, ctr, id, oktoclick, finished;
function init() {
clearTimeout(id);
<!-- 画像数18X2−1　 -->
for (i = 0; i <= 35 ;i++) {
user[i] = 0;
}
ticker = 0;
min = 0;
sec = 0;
ctr = 0;
oktoclick = true;
finished = 0;
document.f.b.value = "";
scramble();
runclk();
<!-- 画像数18X２ー1　 -->
for (i = 0; i <= 35; i++) {
<!-- 画像ﾌｧｲﾙ名　x0.jpg〜　の（例）　 -->
document.f[('img'+i)].src = "x0.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);
}fa
function scramble() {
<!-- 列・行数ー1　 -->
for (z = 0; z < 5; z++) {
<!-- 画像数18X２ー1　 -->
for (x = 0; x <= 35; x++) {
<!-- 画像数18X２　 -->
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;
<!-- 画像数ﾌｧｲﾙ名　x0.jpg〜　の（例）　 -->
document.f[('img'+but)].src = 'x'+map[but]+'.jpg ';
if (ctr == 0) {
ctr++;
clickarray[0] = but;
oktoclick = true;
} else {
clickarray[1] = but;
ctr = 0;
setTimeout('returntoold()', 600);　　//　猶予時間(ms)
}
}
}
function returntoold() {
if ((clickarray[0] == clickarray[1]) && (!user[clickarray[0]])) {
<!-- 画像ﾌｧｲﾙ名　x0.jpg〜　の（例）　 -->
document.f[('img'+clickarray[0])].src = "x.jpg";
oktoclick = true;
} else {
if (map[clickarray[0]] != map[clickarray[1]]) {
if (user[clickarray[0]] == 0) {
<!-- 画像ﾌｧｲﾙ名　x0.jpg〜　の（例）　 -->
document.f[('img'+clickarray[0])].src = "x0.jpg";
}
if (user[clickarray[1]] == 0) {
<!-- 画像ﾌｧｲﾙ名　x0.jpg〜　の（例）　 -->
document.f[('img'+clickarray[1])].src = "x0.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;
}
<!-- 画像数18の（例） -->
if (finished >= 18) {
alert('　＼（＾。＾）／、やりました！。　記録(分:秒)は、'+document.f.b.value+' です。');
init();
} else {
oktoclick = true;
}
}
}
// End -->
</script>
<!--　◆　----------　↑ この間をコピー、編集、ペーストします。 ----------　-->
　

　

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

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

<body>部の編集

横中央配置
　

ﾀｲﾄﾙ


　

列・行数

　

　

　

　

　

　

　

　


　

ﾀｲﾏｰ位置
ﾀｲﾏｰ　ﾒｯｾｰｼﾞ（吹き出し）

　

　

　

説明部分の削除

 　

<body OnLoad="init()">
<!--　★　↑の　OnLoad="init()"　と、↓ この間をコピー、編集、ペーストします。 ----------　-->
<!-- 　横中央配置 -->
<center>
<h2><font size="4" color="#A00139">絵合わせ 9c ｹﾞｰﾑ</font></h2>
<form name="f">
<table cellpadding="0" cellspacing="0" border="0">
<script language="javascript">
<!-- Begin
<!-- 列・行数ー1　 -->
for (r = 0; r <= 5; r++) {
document.write('<tr>');
<!-- 列・行数ー1　 -->
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()">');
<!-- 画像ﾌｧｲﾙ名　x0.jpg〜　の（例）　列・行数　 罫線無し　-->
document.write('<img src="x0.jpg" name="img'+((6*r)+c)+'" border="0">');
document.write('</a></td>');
}
document.write('</tr>');
}
// End -->
</script>
</table>
<!-- 　ﾀｲﾏｰ位置 　-->
<div style="position: absolute; top:8px; right:100px;">
<input type="button" value=" " name="b" onClick="init()" title="ｸﾘｯｸ → 再開するさ。♪└|･.･|┐♪" style="cursor:hand">
</form>
</div>
<!-- 　横中央配置 -->
</center>
<!--　★　----------　↑ この間をコピー、編集、ペーストします。 ----------　-->

<!-- 　以下は、説明部分、応用では削除して使用。　 -->