ウェブ、ショウジン

jQueryとCSSによるリモートロールオーバー(IE6対応)

2011-10-28
Category
CSS jQuery

jQueryを使ったリモートロールオーバー(異なる場所の画像を変えるとか、出現させるとか)。

サムネール画像が並んでいて、それらにマウスオーバーすると異なる場所にその拡大画像が出現するとか、表示されていたものが変化するとか、そういうやつ。

デモ画面

jQuery本体を読み込んだ上で、以下のスクリプトも読み込む。

remote.rollover.js

$(function(){
	$(".box_rollover .enlarge li").hide();
	$(".thumbnail li a").bind("mouseover",function(){
		var divIndex = $(".box_rollover").index($(this).parent().parent().parent());
		var liIndex = $(".box_rollover:eq("+divIndex+") .thumbnail li").index($(this).parent());
		$(".box_rollover:eq("+divIndex+") .enlarge li:eq("+liIndex+")").fadeIn();
	});
	$(".thumbnail li a").bind("mouseout",function(){
		var divIndex = $(".box_rollover").index($(this).parent().parent().parent());
		var liIndex = $(".box_rollover:eq("+divIndex+") .thumbnail li").index($(this).parent());
		$(".box_rollover:eq("+divIndex+") ul.enlarge li:eq("+liIndex+")").fadeOut();
	});
});

必要なjsファイルを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" type="text/javascript"></script>
<script src="./js/remote.rollover.js" type="text/javascript"></script>

XHTML

	<div id="content">
		<h1>jQueryによるリモートロールオーバー(フェードイン・フェードアウト効果含む)</h1>

		<div class="box_rollover">

			<!-- サムネール画像 -->
			<ul class="thumbnail">
				<li><a href="#">A</a></li>
				<li><a href="#">B</a></li>
				<li><a href="#">C</a></li>
				<li><a href="#">D</a></li>
			</ul>
			<!-- END サムネール画像 -->

			<!-- 拡大表示する画像/通常時は隠れている -->
			<ul class="enlarge">
				<li>A</li>
				<li>B</li>
				<li>C</li>
				<li>D</li>
			</ul>
			<!-- END 拡大表示する画像/通常時は隠れている -->

		<!-- // .box_rollover --></div>
	<!-- // #content --></div>

CSS

.box_rollover{
	position:relative;
}

/* サムネール部分 */
.thumbnail{
	background:#e6e6e6;
	padding:1em;
}

.thumbnail li{
	margin-bottom:1em;
}

.thumbnail li a{
	display:block;
	padding:1em;
	width:100px;
	background:#fff;
	border:3px double #ccc;
	text-align:center;
}

/* 拡大画像を表示する部分 */
.enlarge{
	position:absolute;
	right:0;
	top:0;
}

.enlarge li{
	position:absolute;
	right:0;
	top:0;
	padding:3em;
	background:#000;
	color:#fff;
	font-size:4em;
	text-align:center;
}

リモートロールオーバーサンプルが参考になりました。ありがとうございます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿