絵合わせ 5 -ゲーム

 

 

 

 

ホーム へ       サンプルページ   絵合わせ 5  eawase5.htm

”神経衰弱”ゲーム、時間を競います。  絵=吉野川下流(150x120pxl)     DHTML。      画像、サイズなどのカスタマイズはテキストエディターなどで可。    all対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。   ※:関連情報 : 情報処理教育センター(素材集) >

デモは、画像のクリックで。  画面いっぱいに表示するには、Winを上にドラッグ、”F5”キーで!。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、eawase5.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。     画像保存は、画像を右クリック、”名前を付けて画像を保存”、で。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、eawase5.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、 (*2) を参考に太字部分の編集を任意に行います。   画像変更は 、同サイズ(≒150x120pxl)画像を準備、画像ファイル名を、imagel0.gif〜imagel18.jpgに変更、アップロード。   パラメーターの変更は該当部分で。    ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 6.x〜 などで開いて。    更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 >HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6

(*1) eawase5.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type 〜 </style>は(削除可)

マウスオーバー時のテキスト  背景色 下線非表示

 

非マウスオーバー時の下線表示(逆も可)

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ

同じフレーム target="_self"
ページ全体  target="_top"
親フレーム  target="_parent"

お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

 

 

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

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

<style type="text/css"><!-- A:hover {

COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none

}

A {

TEXT-DECORATION: underline

}

-->

</style>

 

<base target="_blank">

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

<!-- ◆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->

<SCRIPT LANGUAGE="JavaScript">

====  この間、説明を省略。  ====

}

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);

 

====  この間、説明を省略。  ====

}

// End -->

</script>

<!-- ◆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

(*2) eawase5.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

 

 

 

 

 

初期画像ファイル名〔(例)眉山〕

 

<body OnLoad="init()" bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!-- ★ ↑の OnLoad="init()" と、↓ この間をコピー、編集、ペーストします。 ---------- -->

<center>

<h2><font size="4" color="#A00139">絵合わせ 5 -ゲーム</font></h2>

<form name="f">

====  この間、説明を省略。  ====

document.write('<a href="javascript:showimage('+((6*r)+c)+')" onClick="document.f.b.focus()">');

document.write('<img src="imagel0.jpg" name="img'+((6*r)+c)+'" border="0">');

====  この間、説明を省略。  ====

</form>

</center>

<!-- ★ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。