ウェブZYCO'S >ウェブ・トリック:JavaScript

JavaScriptインデックス/ウェブトリックの演出

ウェブデザイン制作にとってクールなウェブトリックを演出するためには今やJavaScriptは必要不可欠。

ブラウザはIEがメインとなってきたことを反映してかJavaScriptもIEに対応させたスクリプトが目立って出回ってきた。

さあ、君の時間をJavaScriptのために少しだけ割いて、ウェブの構造が、演出が生まれ変わるのを体感するのだっ!

images commentary
Rollover Sound & Graphic Design
Guitar sound収録。OnMouseでイメージがチェンジしてSaoundが鳴る。デザイン重視のCoffee Break。AudioBox.classをdownloadして同一フォルダに設置するタイプ。ソースコード参照のこと。
favicon.ico---マルチアイコン
ブックマークをしたときに表示されるアイコン、それをデスクトップに貼り付けたときのショートカットアイコン。リファレンスを見てマルチアイコンをクールに決めろ!
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においては視覚的効果を導入します。TOPで使われています。/reference link
Zooming link
リンクされた次のページを開くときにマックをクリックする方法を模倣する視覚的効果を与えます。本ページ搭載。
/reference link
Multipul Window
テキストをクリックすると一度に4つのウインドウがディスプレイの四隅に開きます。/reference link
Photo Slide with description
ボタンをクリックするとコマ送りで写真とメッセージを表示するスクリプトです。/reference link
DHTML CSS/更なるウェブトリックの演出
ウェブデザイン制作のZyco's トップへ