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

Category ：
Javascript

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

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

…ここからが続き

使い方

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部分で好きにして貰って問題ないです。

Comments

トシ

はじめまして。

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

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

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

ＴＭ

有難う御座います。

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

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

では、失礼します。

MIYA

ＴＭさんはじめまして。

ダウンロードの件なんですが、ファイルをそのままダウンロードする形式には「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ファイルに保存なり、上記ソースをそのまま使ったりして、使ったらよいと思いますよ。