FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

生活応援団は激安人気通販サイト
あなたの暮らしを応援する激安人気通販ショップ 生活応援団

得々NET バーゲン会場 ←お買い得がいっぱい ぜひご覧下さい by望月店長

リンク画像のマウスオーバー時のハイライト CSS編

PCのカテゴリーには
ちょっと便利なソフトの紹介や
使っている・使ってみたいテクニックなどの
覚え書きに書いてみたいと思います

今回はリンク画像のハイライト

リンク画像のハイライト

上記は当『生活応援団』のTOPですが
カテゴリーの「AV機器」の所にマウスがあり
画像が少し明るくなっているこの事です

上の画像は当HPにリンクしてあります
よければ覗いて下さいね

なんてことないですが
なんか好きなんで実行しました

方法はいくつかあると思いますが
主にスクリプトを使う方法とCSSだと思います

私は後のCSSです

スクリプトは2枚の明るさの違う画像を用意して
マウスオーバー時に明るい画像に替えて効果を狙います

今回これを止めたのは
リンク画像をただ明るくするだけにスクリプトは面倒だし
もし明るいリンク画像の表示が遅かったり
最悪表示されず×になったらやだな~と思い止めました

では本題のCSS(スタイルシート)です

.highlight a:hover *{
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}

をリンクしてあるCSSファイルに加えています
もちろんHTMLにCSSを記載している方は
そちらに追加すればOKです

(なるべくCSSは外に出しましょう
ロボットは上からソースを読むので
なるべく余分なCSS情報よりHPの情報源HTMLを早く読ませましょう)

alphaの数字を替えて明るく(薄く?)なるのを変更できます
上記はクラス名をhighlightにしています

そしてハイライトさせたいリンク画像のソースの前に
上の.hilight(クラス)を設定するのです

<div class="highlight">

(<>が全角ですそのままコピーして使わないで
半角に直してからどうぞ)

をHTMLに入れれば完成!

手軽にやるならCSSの方がいいんじゃないかな?と思います

ではまた何か気になることがあったらカキコします
自分の記録のために
そして探している人に少しでも参考になれば・・・


生活応援団は激安人気通販サイト
あなたの暮らしを応援する激安人気通販ショップ 生活応援団

得々NET バーゲン会場 ←お買い得がいっぱい ぜひご覧下さい by望月店長

コメント

No title

はじめまして!
まさに捜し求めていたCSSです。

やはりデータもなるべくスリムに
したいので大変参考になりました。

お気に入りに早速登録します!

お役にたてて何よりです

3児のママさま
参考になれば幸いです
PCネタも自分の記録もかねて時々書いていきます
お暇な時にでも覗いて見て下さいね

コメントの投稿

管理者にだけ表示を許可する

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。