JavascriptHP用素材

ここにあるJavascriptサンプルは、全てフリーですのでご自分のホームページに組み込んでお使い下さい。
対応ブラウザ(2001.12現在)

NN4.x、IE4.x、NN6.0はそれぞれNetscape Navigator4.0以上、Internet Explorer4.5以上、Netscape Navigator6.0で動作(WIN、MACとも)することを表しています。WINのIE4.0では動かないらしい(自分はIE5.0しか持ってないので、、)。なお、MACの方はIE4.5で動作可能です。ドリームキャストはNN3.0のバージョンレベルなので動きません。

Netscape6.0について
Netscape6.0(NN6.0)については、
NN4.7までのものとはスクリプト仕様が異なるためNN6.0専用の処理を組み込んであります。一応、WIN、MACとも確認テストはしていますが、NN6.0は仕様が変わったばかりなのでもしかしたら不具合が発生することがあるかもしれません。

利用者前提条件

ここのスクリプトを利用される方は、HP作成の基本中の基本「HTML」を理解している方を対象としています。そうでない方、つまりHP作成ソフトでしかHPを作ったことがない方、またはWEB上でのHP自動作成しか知らない方は、スクリプトの組み込みは困難です。最低、WINのメモ帳&ワードパッドやMACのSimpleTextなどのテキストエディタでも、HPが作れる知識がないと難しいでしょう。まず、HTMLの知識が必要です。入門書などで勉強しましょう。僕も普段はPageMillというソフトを使ってますが、ソフトでできない場合は直接HTMLタグをいじります。ただ、ここでは初心者でも組み込みできるように解説していますので、よーーーく読みましょう。

■初心者の方はまずこちらを読んでください

★スクリプト利用前に初心者は「必ず読んで下さい」==>「ここ」を絶対読むこと。

それでもわからん!という方は、当サイトではお手上げです。以下のサイトで「HTMLタグ」「じゃばすくりぷとってなに?」についてよ〜〜く勉強して下さい。

【5・6年生にもわかるやさしいJavaScript 】

初心者向けタグ講座ISMT HOME(メモ帳で作るHP作成講座がお勧め)<=タグを覚えたい方はまずこちらへ

豆知識:JavaとJavascriptの違い

最近、この2つを混同されてる方が多くなってきています。間違ったままでいると質問を頂いても話しが通じなくなる場合がありますので、ここで説明します。Javaとは、米サン・マイクロシステムズ社が開発した言語で、開発ソフトとコンパイル(実行可能形式に変換)が必要なものです。一方、Javascriptは米ネットスケープ社が開発したもので、メモ帳のようなテキストエディタだけで作ることができます。動作については、Javaは頁を開いたときプログラムそのものをローディングするため、非常に時間がかかります。Javascriptはテキストのみなのでとっても軽いものです。以上ですが、違いがちょっぴり解りましたか?勉強するときは、Javascriptのほうが易しいのでJavaのほうは忘れましょう。

●参考
下の頁は同じ
「マウスカーソル追いかけニャンコ」です。Java版とJavaScript版を比較して重さの違いを実感してみて下さい。
Java版カーソル追いかけニャンコ ←こちらは他のサイトです
JavaScript版カーソル追いかけニャンコ

目 次
No スクリプト

形式

動作可ブラウザ(WIN,MACとも)
1. 背景色変更 HTML (NN3.x,NN6.0,IE3.x)
2. マウスカーソル追いかけ文字 DHTML (NN4.x,NN6.0,IE4.x)
3. マウスカーソル追いかけニャンコ DHTML (NN4.x,NN6.0,IE4.x)
4. マウスカーソル追いかけワンコ DHTML (NN4.x,NN6.0,IE4.x)
5. マウスカーソル追いかけワンコ2 DHTML (NN4.x,NN6.0,IE4.x)
6. ゆでたまごくん(マウスカーソル追いかけマスコット) DHTML (NN4.x,NN6.0,IE4.x)
7. Flying Chip DHTML (NN4.x,NN6.0,IE4.x)
8. Flying Omikuji DHTML (NN4.x,NN6.0,IE4.x)
9. Flying UFO DHTML (NN4.x,NN6.0,IE4.x)
10. 虫退治 DHTML (NN4.x,NN6.0,IE4.x)
11. 今日の運勢 HTML (NN3.x,NN6.0,IE3.x)
12. Running Omikuji DHTML (NN4.x,NN6.0,IE4.x)

*補足*
・DHTML:構造がDynamic HTMLのもの
・HTML:普通のHTMLのもの
修正履歴:スクリプトの改良やバグなどの修正を載せてあります。===>ここをクリック

上記のマウスカーソル追いかけシリーズで他の動物がご希望の方へ
 当サイトでは、「ニャンコ、ワンコ、ゆでたまごくん」しか載せていませんが、以下のサイトへ行けば他の動物もございますので、一度ご覧下さい。

きつつき工房:ここのサイトの「追っかけ動物」のページに「アザラシ、ぶた、しろくま、ふくろう、はりねずみ」がいます。

千海望諒:ここのサイトのProfileのページに「馬っこ」がいます。

たかむくのぺーじ2:ここのサイトには、「コーギー、ビーグル」など、三種類のワンコがいます。

各種JavaScript素材

背景色変更(NN3.x,NN6.0,IE3.x)
背景色の変更は、たくさんの人がいろいろ作っていますので、あまり珍しくはないのですが、画像などを貼り付けた場合、バックの色で雰囲気が変わるときがあります。そんなとき気軽に変えられたら便利ぢゃないですか。

サンプルと保存方法


マウスカーソル追いかけ文字(NN4.x,NN6.0,IE4.x)
マウスカーソルを文字や画像がおいかけます。文字などの変更のしかたはソースの中にコメントが載っていますので、その説明に従ってください。

サンプルと保存方法


マウスカーソル追いかけニャンコ(NN4.x,NN6.0,IE4.x)
これは、xnekoというx-windows上で動作するフリーソフトをWeb上で動くようにしたものです。ただ、私が入手したものはNetscape Navigator専用で、Internet Explorerではエラーになってしまいました。そこで、IE版を捜しましたが、全く見つからず、結局IEでも動くように改良しました。また、ネコの画像もオリジナルはXBM形式の単なる線画だったので、gif形式にして色や柄を付けました。(xnekoの作者は古場正行氏xneko、線画は後藤寿庵氏です)===>著作権等については、こちらをごらん下さい。

●ニャンコの組み込みの詳細説明はこちら
ここではネコ画像を圧縮してあるので解凍ソフトがあると便利です。説明と入手先は以下を参照。または、パソコン雑誌のCDには必ず入ってるので確認してみて下さい。lzhタイプが解凍できれば何でもよい)。
窓の杜(Windows用) ・Vector(Win、Mac)

グレーニャンコ サンプルと保存方法
トラ柄ニャンコ サンプルと保存方法
ホワイトニャンコ サンプルと保存方法
イエローニャンコ サンプルと保存方法
ブラックニャンコ サンプルと保存方法

当サイトでは、超初心者用に上記のようにソースコードを5種類に分けていますが、ほんとは1種類のソースコードがあればよく、あとは画像自体を変えるだけで使えるようになっています。
 そこで、当サイトの利用者の方が以下のようなニャンコ画像を提供してくれましたので、ご希望の方は保存して上記ニャンコの画像と入れ替えてお使い下さい。
 
<=この画像をクリック
 ニャンコ画像は羊の夢さんからご提供頂きました。===>

・おまけ1==>アニメニャンコうちのネコ
・おまけ2==>デスクトップ用追いかけニャンコ(WINDOWS95以上)---ここのHPのFreeWareの「Neko」で入手可能


マウスカーソル追いかけワンコ(NN4.x,NN6.0,IE4.x)
マウスカーソルをワンコがちょこちょこと追いかけていきます。HPのマスコットにいかが?使用してるスクリプトは上の追いかけニャンコと同様です。

このワンコのスクリプトはニャンコのように色別にスクリプトは用意していません。同じスクリプトを使い、画像を入れ替えるだけで済むようにしてあります。
各種イメージは圧縮してあるものとしてないもの両方用意してあります。なお、解凍ソフトについては上の「追いかけニャンコ」を参照して下さい。
ワンコ(プードル)のイラストはドリーのママさんからご提供頂きました。===>

他の色もあり↓ (サンプルと保存方法参照)
 

サンプルと保存方法


マウスカーソル追いかけワンコ2(NN4.x,NN6.0,IE4.x)
マウスカーソルをワンコがちょこちょこと追いかけていきます。HPのマスコットにいかが?使用してるスクリプトは上の追いかけニャンコと同様です。

各種イメージは圧縮してあるものとしてないもの両方用意してあります。なお、解凍ソフトについては上の「追いかけニャンコ」を参照して下さい。
ワンコのイラストは[チョビ2帝国]の渚さんからご提供頂きました。===> [チョビ2帝国]

サンプルと保存方法


ゆでたまごくん(マウスカーソル追いかけマスコット)(NN4.x,NN6.0,IE4.x)
マウスカーソルをゆでたまごくんがちょこちょこと追いかけていきます。HPのマスコットにいかが?使用してるスクリプトは上の追いかけニャンコと同じものです。

各種イメージは圧縮してあるものとしてないもの両方用意してあります。なお、解凍ソフトについては上の「追いかけニャンコ」を参照して下さい。
ゆでたまごくんのイラストはニッシーさんからご提供頂きましたが、サイトは閉鎖されたようです。

サンプルと保存方法


Flying Chip(NN4.x,NN6.0,IE4.x)
Flying UFOからワープをはずしたような動きをします。頁の壁にぶつかるとピンポン玉のように跳ね返ります(2種類あります)。

サンプルと保存方法


Flying Omikuji(NN4.x,NN6.0,IE4.x)
Flying Chipと今日の運勢を組み合わせたもので、動き回るおみくじボタンを押すと今日の運勢がわかります。

サンプルと保存方法


Flying UFO(NN4.x,NN6.0,IE4.x)
UFOのような動きをまねてみました。頁内を文字やアイコンが自由に飛び回ります(3種類あります)。

サンプルと保存方法


虫退治(NN4.x,NN6.0,IE4.x)
逃げまわる虫たちを捕まえてクリックして退治します。最高7匹まで指定できます。

サンプルと保存方法


今日の運勢(NN3.x,NN6.0,IE3.x)
よくある「おみくじ」です。ちょっとした一言がほしい。なんていうときにいいかもしれません。

サンプルと保存方法


Running Omikuji(NN4.x,NN6.0,IE4.x)
逃げまわる虫を捕まえてクリックすると「今日のおつげ」が出ます。

サンプルと保存方法

■HOME■