ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ ウェブ・トリック:JavaScript ]

ウェブに機能を付加するにはJavaScriptが有効だ

ウェブ・ポジショニング(SEO)ばかりがビジネスサイトでは注目されているが、ビジターに対して様々な機能を付加することも忘れちゃいけない。最も有効な方法はJavaScriptを使った仕掛けだ。

1 December,2005

ウェブ・トリック : JavaScript

Rollover Sound & Graphic Design
ギターサウンド「The Rain Song」収録。OnMouseでイメージがチェンジしてサウンドが鳴る。遊び心で作った「Coffee Break」。AudioBox.classをdownloadして同一フォルダに設置するタイプ。ソースコード参照のこと。
Rollover image change---iPod menu
iPodをbodyにしてトラックパッドタイプのメニューおよび液晶メニューにマウスを重ねるとイメージがチェンジする
(アニメーションも挿入した参考作品)
Double pull down menu
最初のカテゴリーを選択(click)すると、自動的にそのカテゴリーのメニューが表示されるダブル・プルダウン・メニュー。プルダウンメニューの幅が変更されるので、バックのイメージも同様に収縮する。
/reference link
rollover サンプルNO.1
マウスを乗せる、マウスをクリックなどの動作で画像がチェンジする詳しいMaking rollover講座
rollover サンプルNO.2
Zooming link、Popup information boxも採用した賃貸案内の完全サンプル。4つのweb tips をreference linkで紹介
サウンドを鳴らす サンプルNO.1
1.効果音を出すJava Applet
2.クリックしたときに処理を行わせるJavaScript
3.効果音(AU,8000Hz,モノラル)/reference link
アニメーションをチェンジ
マウスを乗せるとアニメーションがチェンジします。見栄えが確実にアップします。/reference(イメージとJavaScriptの解説付き)
小ウインドウを開く
リンクをクリックすると小ウインドウが開きます。イメージファイルが多くなりがちなページはこの小ウインドウで対処するのが賢明。/reference link
rollover サンプルNO.3
スモールイメージはここから。マウスを乗せると画像がチェンジします。Random Music-アクセスするたびにSOUNDが変わります-reference link
サウンドを鳴らすサンプルNO.2
マウスを乗せるとサウンドが鳴ります。Aqua button の作り方など/reference link
サウンドを鳴らす サンプルNO.3
一番大変なことは効果音作りでしょうか。やはりオリジナルに懲りたい!/reference link
Status Bar effects
ステータスバーにメッセージを視覚的に流します
/reference link
イメージ・スライドショー
ハイパーリンクされたスライドショーを繰り返し実行します。特にIE5.5以上においては視覚的効果を導入します。/reference link
Zooming link
リンクされた次のページを開くときにマックをクリックする方法を模倣する視覚的効果を与えます。(zoom1.js、zoom2.js)このリンク先のページでクリックしてみてください。
Multipul Window
テキストをクリックすると一度に4つのウインドウがディスプレイの四隅に開きます。/reference link
Photo Slide with description
ボタンをクリックするとコマ送りで写真とメッセージを表示するスクリプトです。/reference link


※2001年からのアーカイブで、新しいものから順番に並べてあります。古いものは表記のリファレンスリンクが切れているものがあります。その場合はソースを参照してください。

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。