第11回ホームページ勉強会
　　
第47日目2022年08月25日





今回の勉強は画面上のマウス･ポインターを追いかける犬です
マウスを動かすとわんちゃんが追いかけてきますが休むと寝ます。
　今回は、どこかで見かけた方も居られるかも知れませんが、画面上のマウスのポインターを追いかける犬です。
追いかけるわんこ、ねこ１

　Googleで『マウスを追いかける犬』で検索したら

　『マウスカーソル追いかけニャンコ・ワンコ（猫犬かんたん ...』という見出しで、
下記アドレスにリンクしていました

　http://customtemplate.blog112.fc2.com/blog-entry-135.html

　このページに移動すると、色々と説明が記載されていますが、
　は実施する必要は有りません。

　の下記をコピーして、対応させ合いhtml文の</head>の前に貼り付ければ一応動作しますが、
　犬、猫の種類やスピードは選べません。尚、1～4行目は必ずしも必要ではありません。
<!--
マウスカーソル追いかけニャンコ・ワンコ（猫犬かんたん切り替えver）
http://customtemplate.blog112.fc2.com/blog-entry-135.html
-->
<script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130509oikake-min.js"></script>

　結論から言えばの下記をコピーします。　 
<!--
マウスカーソル追いかけニャンコ・ワンコ（猫犬かんたん切り替えver）
http://customtemplate.blog112.fc2.com/blog-entry-135.html
-->
<script type="text/javascript">
<!--
var oikake={
animal:'', //猫か犬：左のコーテーションのペア内に、neko か inu を入れる。
color:'',  //色など：brown gray white yellow (nekoのみ black か tora もOK)
speed:250, //追いかけの速さ：小さいほど速いが、50 以上が望ましい。
img:'http://blog-imgs-60.fc2.com/c/u/s/customtemplate/',// 画像サーバ
}
// -->
</script>
<script type="text/javascript" src="http://blog-imgs-60.fc2.com/c/u/s/customtemplate/130509oikake-min.js"></script>

このコピーしたhｔｍｌ文を、所望するhｔｍｌ文の</head>の直前に貼り付けます。
今回も、1～4行目は必ずしも必要ではありません。

コピーした本文に記載されているようにnekoかinuを指定します。
色も brown gray などと指定します。
速度も変更できます。

応用例はここをクリックして下さい。新しいページで開きます。

jsファイルはダウンロードできますが、猫、犬の画像データはダウンロードできません。
追いかけるわんこ２
　元々は、｢わんこ｣の動きはhtml本体に含まれていたのですが、約230行もあるので、扱いやすいように
　jsファイルとして分離しました。

　関連するファイルをzip形式で圧縮しました。ここからダウンロードして下さい。

　展開すると｢wanko｣というフォルダーを作り、その中に｢INU2_IMG｣というフォルダーと｢script.txt｣と
　｢wanko.js｣というファイルができます。

　｢INU2_IMG｣というフォルダーの中は、色んな向きや表情の犬のgifファイルが入っています。
HTMLの操作

①追いかけるわんこを採用したいデータのフォルダーに、フォルダー｢wanko｣の全てのファイルを入れます。

今回はこのページでも採用しましたが、2020年10月29日の第5日目にご紹介した、支部便りのフォーマットここをクリックに応用して見ます。

②フォルダー内の｢index.html｣や｢main.html｣(そのページ内のトップhtml)をホームページビルダーで開く。

③｢script.txt｣もメモ帳などで開き、<script････></script>をコピーする。

④ホームページビルダーに戻り、下記</head>の直前に張り付けます
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<script src="wanko.js"></script>
<title>アプレットの作品集</title>
</head>
<body>
<div align="center">
<table>
<tbody>
<tr>
<td bgcolor="#000099" align="center" height="27" width="281"><b><font color="#ffffff"><font color="#ffffff">紅葉写真あれこれ</font>　10月、11月某日</font></b></td>
<td height="27" width="630">&nbsp;</td>
</tr>
</tbody>
</table>
⑤<body>に背景が定義されていない場合も、背景色や背景画像だけが定義されている場合にも、
　メモ帳から｢ onload="inustart();"｣をコピーして<body>のオプションとして貼り付けます。
　<body> → <body onload="inustart();">
　<body background="blue_p7b.gif"> → <body onload="inustart();" background="blue_p7b.gif">
　<body background="blue_p7b.gif"> → <body background="blue_p7b.gif" onload="inustart();">

　<body>内でのオプションの記載順は関係ありません

　1行目に<!DOCTYPE html>が宣言されていた場合は、正常動作しないことが有ります。
　その場合は、<!DOCTYPE html>を削除します。

設定はこれだけです。
応用例は①トップページ、②支部便り(様式)、③桜吹雪からご覧下さい。

①のトップページはフレームページを採用しており、左側の｢iframe.html｣と右側の｢main.html｣とで構成されており、追いかけるワンコは｢main.html｣に設定したために、左側のメニュー迄には追いかけて来れません。