jQuery マウスオーバーしていない画像部分が薄くなるスクリプト

jQuery マウスオーバーしていない画像部分が薄くなるスクリプト

マウスオーバーしていない部分の画像がオーバーレイがかかった感じに薄くなり、マウスオーバーしている部分の画像だけが目立つようになるスクリプトです。

Using Opacity to Show Focus with jQueryで紹介、配布されいるのですが使い方を紹介しておきます。

demo page

…ここからが続き

使い方

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.imgArea').children().hover(function() {
			$(this).siblings().stop().fadeTo(500,0.5);
		}, function() {
			$(this).siblings().stop().fadeTo(500,1);
		});
	});
</script>

XHTML

<ul class="imgArea">
<li><a href="image/001.jpg" title="サンプル1"><img src="image/001.jpg" alt="サンプル1" width="150" height="100" /></a></li>
<li><a href="image/002.jpg" title="サンプル2"><img src="image/002.jpg" alt="サンプル2" width="150" height="100" /></a></li>
<li><a href="image/003.jpg" title="サンプル3"><img src="image/003.jpg" alt="サンプル3" width="150" height="100" /></a></li>
<li><a href="image/004.jpg" title="サンプル4"><img src="image/004.jpg" alt="サンプル4" width="150" height="100" /></a></li>
<li><a href="image/005.jpg" title="サンプル5"><img src="image/005.jpg" alt="サンプル5" width="150" height="100" /></a></li>
</ul>

CSS

.imgArea	{ width: 100%; margin-bottom: 30px; }
.imgArea:after	{ height:0;	visibility: hidden;	content: ".";	display: block;	clear: both; }
.imgArea li	{ list-style-type: none; float: left; margin-right: 10px; }
.imgArea a	{
	display: block;
	width: 150px;
	border: 2px solid #CCC;
}
.imgArea a:hover	{ border: 2px solid #2D88B3; }

imgArea で指定してる border やレイアウトなどはこのCSS部分で好きにして貰って問題ないです。

demo page

Comments

トシ

トシ

はじめまして。

自分なりに色々調べて試行錯誤したが、答えが出ずご質問させて頂く事になりましたトシと申します。

これらの画像をセンタリングする場合どうすれば良いのか
教えて頂ければ幸いでございます。

大変お手数をお掛け致しますが、何卒宜しくお願い致します。

2010年06月24日 22:01

TM

TM

有難う御座います。

出来ました!
本当につまらない質問で失礼しました。
仕事で必要なのですが、HP作成が初めてなもので、
四苦八苦しながら頑張っています。

分かりやすく教えて頂き感謝します。

では、失礼します。

2009年12月11日 18:45

MIYA

MIYA

TMさんはじめまして。

ダウンロードの件なんですが、ファイルをそのままダウンロードする形式には「David Walsh Blog」さんの方ではしてなく、書いてあるソース
<script type="text/javascript">
$(document).ready(function() {
$('.imgArea').children().hover(function() {
$(this).siblings().stop().fadeTo(500,0.5);
}, function() {
$(this).siblings().stop().fadeTo(500,1);
});
});
</script>
をコピペして自分のJSファイルに保存なり、上記ソースをそのまま使ったりして、使ったらよいと思いますよ。

2009年12月11日 18:11

TM

TM

初めまして。

完全な初心者なのですが・・・
こちらのHPで勉強させてもらっています。
Using Opacity to Show Focus with jQueryの
どこからダウンロード出来るのでしょうか?

つまらない質問で申し訳ありませんが、
宜しくお願いします。

2009年12月11日 17:44

MIYA

MIYA

えどさん!はじめまして!

恥ずかしながら今まで気がついていなかったです…
検索をかけてみたら「スクリプト」「スプリクト」と書いてる記事が混在してましたよ…

教えて頂きありがとうございました!
今後も何か変な事を言っているようなら教えて頂きたいと思います><

2009年08月31日 15:51

えど

えど

はじめまして!
本題とは全然関係なくて申し訳ないんですが、
ちょっと気になったのでコメント・・。

「スプリクト」ではなくて
「ス"ク"リプト」です・・。

2009年08月31日 14:35

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article