マウスをのせたら画像が入れ替わる、いわゆるスワップイメージ・ロールオーバーイメージをdreamweaver(ドリームウィーバー)でやると、確かに簡単ですが、ソースがちょっときれいじゃないから、何か別の良い方法はないかと思っていませんか?
ロールオーバーさせたい画像にclass="imgover"とつけるだけで、実現する便利なものがあります。
例えば会社概要のページへリンクする画像のボタンがある場合は、以下のようにclass="imgover"とつけるだけです。
<img src="kaisya.gif" alt="会社概要" class="imgover">
では設置方法です。※Daniel Nolan氏のスクリプト(プログラム)です。
1、まずrollover.jsファイルをダウンロードします。(圧縮ファイルです)
2、htmlファイルの<head></head>間に
<script src="rollover.js" type="text/javascript"></script>
をいれます。
3、リンクさせたい画像の通常画像(例:xxx.gif)とオーバー画像(通常画像を合わせて、xxx_o.gifという名前にします。)とを用意し同じフォルダ(例えばimagesフォルダとか)に入れます。
コーディング デザイン ホームページ 勉強 講座 セミナー 実践 毎日 転職 デザイナー ホームページデザイナー 求人 募集
デザイナー転職 ホームページデザイナー転職 毎日転職 デザイナー 仕事 フリーランス
ホームページのコーディング ホームページのデザイン スタイルシート
サンプル:右の画像にマウスを合わせてみて下さい。 ![]()