ご注意！
Webの営業を2年間してきましたが、制作の事はよく解らず…
退職を切っ掛けにWebデザインの勉強する事になり、今さらながらWebの深さ・面白さを感じています。
ネット上で紹介されている諸先輩方のテクニックを真似て勉強させてもらってます。
試してみた事などをメモ替わりにブログに書いていく事にしました。
あくまでメモ替わりですので、初心者の方には全然優しくない内容かもしれませんが許して下さい。
画像1枚でバナーをロールオーバー設定
ロールオーバーは通常2枚の画像を使いますが1枚の画像だけで、よく有りがちなロールオーバー設定できる方法です。
オンマウス時に不透明度を下げた画像を見せます。
（※CSS３からのプロパティを使うので、ブラウザのバージョンによっては対応していません）
ロールオーバー設定したいimgタグ内にclassを設定します。
（この場合はclass="hoverimg"）
CSSファイル（アメブロならCSS編集画面）で
/*★ロールオーバー★*/
a:hover img.hoverimg{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
を追加します。
赤文字の数値が不透明度なので任意の数値に変更します。
この場合は不透明度70％にしています。
こんな感じ↓
※リンク先は外しています
オンマウス時に不透明度を下げた画像を見せます。
（※CSS３からのプロパティを使うので、ブラウザのバージョンによっては対応していません）
ロールオーバー設定したいimgタグ内にclassを設定します。
（この場合はclass="hoverimg"）
CSSファイル（アメブロならCSS編集画面）で
/*★ロールオーバー★*/
a:hover img.hoverimg{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
を追加します。
赤文字の数値が不透明度なので任意の数値に変更します。
この場合は不透明度70％にしています。
こんな感じ↓
※リンク先は外しています