プラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できます。
http://www.webcreatorbox.com/tech/jquery-tips20/
少しのコードで実装可能な20のCSS小技集
まず、下記のファイルをdownloadしデスクトップに解凍してください。
http://www.mediafire.com/?50q4cw50c8y63pw
DWでのサイト管理は、「comp」フォルダの中の、「00_Start」です。
①naviボタンにロールオーバーイメージを適用する。
TOP、FOOD、DRINK、ACCESS、ABOUTの5つのボタンの色をマウスオーバー時に変化させます。
Photoshopで「btn01.jpg～btn05.jpg」を開き、色の違うボタンを作成しましょう。
いろいろな方法がありますが、レイヤーパネルから、塗りつぶしまたは新規レーヤーを作成をクリックして
色相・彩度をえらび、数値を変更します。（例：-70 +30 +5） 数値は覚えておいてください。
別名で保存かWEBデバイス用に保存をえらび、「btn01_on.jpg」などわかりやすい名前で「imgs」フォルダに保存します。
元の画像ファイルに上書き保存しないよう注意して、５つすべてのボタンを作成してください。
次にDWのデザインビューでTOPボタンを選択し、DELキーで削除。
挿入パネルの一般→イメージをロールオーバーイメージに変更→ダイアログボックスを変更します。
５つのボタン全てに適用しブラウザーで確認してください。
代替テキスト（例）フードメニュー、ドリンクメニュー、アクセス方法、会社概要
②フェード効果をつけたswapイメージを適用する。
まず変更したい画像に任意のID名を付けます。今回は#leftの画像を変更させます。
「tasting.jpg」をデザインビューでクリックし、プロパティパネルにID名を付けます。（例）「swap_img」
#rightにある２つの小さな画像「food1.jpg」「food2.jpg」にマウスオーバーすると画像を変更したいので
まず「food1.jpg」をデザインビューで選択し、ビヘイビアーパネルの「+」アイコンを押しスワップイメージを選びます。
ダイアログボックスを下図の通り変更します。
同じように「food2.jpg」にマウスオーバーすると、「pasta.jpg」が開くように設定してみてください。
できましたら一旦ブラウザーで確認しましょう。
次にフェード効果を追加します。同じく「food1.jpg」が選択されている状態でビヘイビアーパネルから「+」アイコンをクリックして
ダイアログボックスを設定します。今回は効果の切り替えのチェックは外しておきます。
マウスアウトした際にもフェードの効果を適用したいので同じ操作をもう一度繰り返します。
ビヘイビアーパネルを確認するとイベントハンドラが間違っていることがわかります。
正しく変更しておきましょう。
同じように「food2.jpg」にも同じようにフェード効果を追加します。効果の切り替えのチェックを入れてみると何故はずしたのかがわかりますね。
表示スピードは、効果の時間で調整してみてください。
できましたらブラウザーで確認しましょう。（依存ファイルは必ず保存してください。）
③APエレメン卜とSpry効果の設定。
まずどの場所に設置するかを決めます。今回は＜head＞タグの中に入れたいと思います。
＜ｈｅａｄ＞の下に、挿入メニュー→レイアウトオブジェクト→ApDIVを挿入します。
プロパティでtop(上から10px)とleft（700px-150pxで左から550px）を指定します。幅と高さを画像の大きさで指定。
テキストでは、背景イメージを挿入しましたが画像を挿入してみます。
＜div id="apDiv1"＞画像(img_chef.gif)＜/div＞
ブラウザで確認すると位置がブラウザの幅によって変わることがわかります。
style.cssの#headにposition:relativeを追加します。
position:relativeを指定することでAPエレメントを設置するための親ボックスを指定するという意味になります。
もう一度ブラウザで確認しましょう。
TOPボタンにSpry効果（表示／フェード）を設定します。
同じく、TOPボタンにSpry効果（拡張／縮小）を設定します。
ブラウザーで確認しましょう。
④ブラザーウインドウを開く。
③で設置したAP Divの中のイメージをクリックしたときにブラザーウインドウを開く設定をします。
デザインビューでシェフの画像を選択→ビヘイビアーパネル→「+」アイコン→ブラザーウインドウを設定。
Javascriptをオフにされている場合も考えて、プロパティのリンク欄にも「reserve.html」へのリンクを張る。
ターゲットの欄は、別ウインドウで開くようにターゲットを「_blank」を選択。
ビヘイビアーパネルで「ブラウザーウインドウを開く」の下の行のイベント欄で「onClick」を選択、アクション欄に「return false」を記入。
Javascriptが実行されないときだけ、画像に設定したリンクが無効になります。
「reserve.html」をファイルパネルからダブルクリックで開き、デザインビューで「CLOSEボタン」を選択して、
プロパティのリンク欄に「javascript:window.close()」と記入します。
シェフの画像をよく見ると画像のまわりに点線が入ってると思います。
cssでaセレクターに、「outline:none」を記述することで消すことができます。