CSSでの切り替え(CSSスプライト)や、JavaScriptでの設定で画像の切り替えが可能です。
◆画像の入れ替えではなく画像を透過する
マウスオーバー時に透過度を変更することで、画像が光ってみえる方法です。
記述例)
<a href=[HOME]><img class="alpha" src="[画像のURL]"></a>
img要素に、「alpha」というclassをつけておき、
『マウスオーバーしたら、「alpha」のimg(画像)を透過する』と指定する
CSSを記述してください。
【共通CSS管理】に記述:
a:hover img.alpha {
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
70%に透過する指定となります。
◆CSSで画像を切り替える
マウスオーバー時の画像を1枚にまとめた画像を表示し、表示位置を切り替えるCSSを記述します。
「ロールオーバー 画像の切り替え」「CSSスプライト」などで検索していただき、
作成方法を紹介するページをご参照ください。→Google検索
◆JavaScriptで指定する
画像を切り替えるスクリプトを宣言後、aまたはimgタグに「swapImage()・・」のような指定を記述する方法があります。
(サポート対象外となるため、詳細は割愛します。)
◆ソースに直接記述する
<img src="●●.jpg onMouseOver="this.src='○○.jpg'" onMouseOut="this.src='●●.jpg'">
上記のようにimgタグに記述する方法がございます。旧来の方法で、タグ内の記述は長くなります。
いずれの方法も、ON・OFF時の画像を ショップデザイン / テンプレート選択・編集 / ファイル管理 / ギガプラス10・100MBサーバー にアップロードしてご用意ください。


