お台場オンライン

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

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

 

 

試しにcat.htmlをDWで開いて操作してみましょう。今までと同様にしてナビテーブルのセルを増やしてテーブル幅の設定を解除しておきます。

 

family.htmに戻ってください。

 

挿入したfamilyボタンを選択したらコピーします。コピーコマンドはCtrl+Cですよ。

 

cats.htmlに戻って増やしたセル内をクリックし、セル内にfamily.htmからコピーしたボタンインスタンスを貼り付けます。ペーストコマンドはCtrl+Vですよ。
ソースを見るとJava scriptごとペーストされているのが分かると思います。DWではボタンのインスタンスごとコピーされるのでとっても便利な機能ですね。
保存したらF12でプレビューして動作確認します。OKであればサーバにアップロードしましよう。ファイルのアップロードコマンドはCtrl+Shift+Uですので覚えておいてください。依存ファイルを含めますか?と聞いてくるので「はい」をクリックしてimages/btn_familyとbtn_family_overの2つの画像も同時にサーバへアップロードしてしまいましょう。
アップ出来たらブラウザでネットに繋いでサーバのファイルを確認します。もちろんOKですよね。

 

同様にして全ページのナビ部分を変更して書き換え、保存してからサーバにアップしてください。最後にfamily.htmに戻ってください。ここで設置したfamilyのボタンですが、このページではロールオーバーさせずにbtn_family_overの表示をさせて、サイト内での現在位置を示すようにします。折角作ったJava scriptのロールオーバー画像を選択して削除します。

 

画像が無くなったセルにイメージを挿入します。btn_family_over.gif画像を指定して挿入してください。

 

画像が挿入されました。リンクも張りません。これで現在このページを閲覧中であることが示されるようになりました。ブラウザでローカルファイルをプレビューしてからサーバにアップします。

 

各ファイルですがdiaryページだけCGIで動作するプログラムなのでCGI動作時に読み込まれるtmpl.htmlをDWで開いてナビメニューを更新してください。Diaryのページはディレクトリが一つ下がるので コピペでは画像やハイパーリンクがリンクされません。

../images/を挿入した画像にソースモードで付け足します。Familyボタンのリンク先にもサーバ内でディレクトリを1階層上げる ../ を付け足すことを忘れずに!保存してサーバへアップしますが、そのままでは更新が適用されませんので、CGIを動作させて更新したテンプレートファイルを含んだ新しいindex.htmlのソースを吐き出させるために日記を更新しましょうね。こうすることで以降のdiaryページのナビにもfamily.htmへのリンクボタンが表示されます。

如何でしょうか?やるべき事はお分かり頂けたと思います。それぞれの操作は複雑なようですが慣れてしまえばとっても楽な作業です。それでも間違いは起こりますので、万が一レイアウトを壊してしまった場合に備えて作業前に全部のファイルをバックアップしておいてください。間違えたファイルはバックアップファイルから戻してもう一度作業してくださいね。
 
<< Previous   Index >>
 
ページトップ▲  
▲Back  
 
   
 
Powered by
taka(Odaiba Online)/Digital Blume
東京都港区台場1丁目3番地