お台場オンライン

   
トップページ
PCクリニック
PCチュートリアル
お台場アルバム
ウェブデザイン
   

 
ホームチュートリアルIndexDW
−JAVA Script使用による画像のroll over− その1
その2その3
tutrial!!  
   
DW −JAVA Script使用による画像のroll over− その2  
DreamWeaver(以下DWと省略します。)を使用してjava scriptによる画像ボタンのロールオーバーを簡単に作ることが出来ます。ナビボタンでオンマウスの時に画像を入れ替えて表示させるオーソドックスなテクニックです。解説のサイトは以前お台場ご近所だったlittlemomさんの依頼でtakaが作成したサイトですが、現在は神戸にお引っ越しされてからご自身でサイトの運営をされています。takaお勧めのソフトDWを買わせてしまったので!?分からないことはサポート中です。出来の悪い某IBMのソフトはお勧めできませんからね…
解説に登場するサンプルサイトはhttp://www.littlemom.net/です。実際のサイトもご覧下さい!
<< Previous index Next >>

 

 

family.htmをDWで開いて作業します。ここからはデザインビューでビジュアル操作を行いますが、同時にソースコードも見ながら作業して貰えると、ソースがどのように変化していくかが理解できると思います。デザイン、ソースの両方のモードで自在に操作できるように訓練しましょう!
まずは左の部分のナビゲーションテーブルをクリックします。

 

プロパティパネルで選択したテーブル--ナビゲーションテーブルの列幅をクリアしておきます。自動伸縮テーブルになりました。

 

ナビテーブルにロールオーバーボタンを増やすので1行7列の現在のテーブルを1行8列にしてファミリーボタンを挿入するセルを増やします。ナビテーブルを選択した状態でプロパティパネルの列を7から8に変更します。Enterで確定してください。

 

この様にセルが1列増えればOKです。増やしたセルの中にfamilyボタンを配置します。

 

増やしたセル内をクリックしてカーソルを入力状態にします。カーソルがセル内で点滅表示していればOKです。

 

ツールバーの一般からロールオーバーイメージをクリックします。もしくは、メニューから
挿入-イメージオブジェクト-ロールオーバーイメージ
をクリックすることでjavascript rollover操作パネルが開きます。

 

ロールオーバーイメージの挿入パネルです。ここでロールオーバーする画像を指定することで適切なJava scriptが書き出されます。DWのとっても便利な機能ですね。

 

左が挿入パネルの設定値です。イメージ名はImagefamilyとしておきます。元のイメージとはロールオーバーする前の画像のことです。imagesフォルダにコピーしたbtn_family.gifを指定します。参照ボタンでブラウズしていくと楽ですね。次にロールオーバーイメージを指定します。同じくimagesフォルダにコピーしたbtn_family_over.gifを指定します。代替テキストにファミリーと入れてクリックで移動するファイルfamily.htmを指定します。OKボタンをクリックして挿入されたか確認しましょう。

 

ちゃんとfamilyのナビボタンが挿入されました。

 

再びナビゲーションのテーブルを選択して自動伸縮テーブルから列幅を固定しておきます。

 

テーブルが選択できたらプロパティパネルのテーブル幅をピクセルに変換するボタンをクリックしてください。

 

テーブルと各セルの列幅が絶対値で指定されました。ctrl+Sでファイルを保存してF12でプレビューして見ましょう。ボタンのロールオーバーが完成しました。
でもこのページだけ適用しても意味がありませんので全部のページを変更します。
次のページへ続く…Next

   
 
<< Previous index Next >>
 
ページトップ▲  
▲Back  
 
   
 
Powered by
taka(Odaiba Online)/Digital Blume
東京都港区台場1丁目3番地