お台場オンライン

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

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

 
画像処理ソフトで追加するナビボタンを作成します。DWと共に使用しているマクロメディアのFireWorks(以下FWと略します。)での作り方です。別のボタン画像のエイリアスをコピーして(Ctrl+Shift+D)移動した後に文字をfamilyに入れ替えます。
FWではその部分だけ切り出すスライス領域を作成します。やはりこの部分もお隣のボタンのスライス領域をコピーしてスライドさせます。ボタンのサイズが大きいのでスライス領域の長さを大きくして他のボタンと同じ間隔が空くように調節します。スライス領域上で右クリックして選択スライスの書き出しを行います。書き出すボタン名はbtn_familyとします。
同様にロールオーバーさせる画像もつくりますね。上の作業時に非表示にしていた薄ピンク色の画像をonにして表示させます。スライス領域上で右クリックして選択スライスの書き出しを行います。書き出すボタン名はbtn_family_overとします。
  書き出した画像は左の2点となりますのでlittlemomさん、このボタンを使用してください。この画像をコピーしてlittlemom.netローカルサイトのimagesフォルダにコピーします。
ここからはDWの作業に入ります。family.htmをDWで開いて下さい。F12キーでこのファイルをIEブラウザで表示させてみるとkittenのボタン上で画像がロールオーバーしていませんね?まずはこのボタンをロールオーバーさせてみます。
DWで開いたfamily.htmファイルでkitten画像をクリックします。プロパティパネルでImagekittenとボタンに名前を付けます。
Alt属性でボタン名を表示させるためプロパティパネルの代替表示にkittenと入れてください。
他のボタンのJavaScript命令をソースコードからコピーします。お隣のJava記述をソースコード上でドラッグしてコピーしましょう。画面のようにデザインとソースコードを同時に表示させて作業するとhtmlソースにも目が慣れて作業しやすくなると思います。同時表示させる方法はパネルの分離タブをクリックすることです。もしくはメニューから 表示-コードとデザイン をクリックします。コピーするソースは以下の部分です。
onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image
museum','','images/btn_museum_over.gif',1)"

 

コピーしたソースをkittenボタンのリンク先コード
<a href="kitten.html" の後に貼り付けます。

 

貼り付けて挿入したソースコードのImagemuseumの部分を、

 

imagekittenに変更します。

 

同様にその後の images/btn_museum_over.gif の部分を、

 

images/btn_kitten_over.gif と書き換えます。書き換えが出来たらCtrl+Sでファイルを上書き保存することを忘れずに!
ココまでの作業はすべてソースコードの画面で作業して下さい。

 

F12ボタンを押してブラウザでプレビュー表示させて動作を確認します。マウスをkittenボタンの上に持ってくるとボタンがロールオーバーしますか?
ロールオーバーしてクリックするとkittenページに移動すればOKです。動作しないときはもう一度ソースコードを見直して下さい。
familyボタンの作り方は次のページへどうぞ!!

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