2009年12月12日
jQueryで作るロールオーバー
ロールオーバーとはリンク画像などにカーソルを乗せた際、別の画像と置換することをいいます。
cssでも背景画像を換えることによって実現できますが、画像に文字が埋めてある場合はリンクテキストをindent:-9999pxなどで画面の外に出さなければなりません。
最近まではよくある方法だったのですが、どうもgoogleはこの方法を悪く評価するらしい、と噂で聞いたのでロールオーバーはｊQuery(Javascript)を利用する方法が多くなるかもしれません。
cssでも背景画像を換えることによって実現できますが、画像に文字が埋めてある場合はリンクテキストをindent:-9999pxなどで画面の外に出さなければなりません。
最近まではよくある方法だったのですが、どうもgoogleはこの方法を悪く評価するらしい、と噂で聞いたのでロールオーバーはｊQuery(Javascript)を利用する方法が多くなるかもしれません。
ASCII.jp：jQueryでロールオーバー！プリロード対応版｜Web制作の現場で使えるjQuery UIデザイン入門を参考にロールオーバーのリンクを作りました。
画像にカーソルを乗せると別の画像に置換され、カーソルが外れると元に戻ります。
プリロード非対応は画像が換わる際、ちらつきが発生する場合があります。これは置換画像を読み込む命令があって（画像にカーソルが乗って）はじめて画像を読みこむので、タイムラグが発生するためです。
プリロード対応では画像にカーソルを乗せる前からすでに読み込む命令がしてあります（キャッシュ？）
コードは以下の通り。
画像にカーソルを乗せると別の画像に置換され、カーソルが外れると元に戻ります。
プリロード非対応は画像が換わる際、ちらつきが発生する場合があります。これは置換画像を読み込む命令があって（画像にカーソルが乗って）はじめて画像を読みこむので、タイムラグが発生するためです。
プリロード対応では画像にカーソルを乗せる前からすでに読み込む命令がしてあります（キャッシュ？）
プリロード非対応
プリロード対応
コードは以下の通り。
<style type="text/css">
#rollover1 img,#rollover2 img {
margin:0px;
}
#rollover1 li,#rollover2 li {
float:left;
}
/* フロートの背景を確保かつ後続要素をクリア */
.clear {
overflow: hidden;
}
.clear:after {
display: block;
clear: both;
height: 0px;
content: "";
}
/*\*/
* html clear {
height: 0px;
overflow: visible;
}
/**/
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#rollover1 li,#rollover2 li").css("listStyleType","none");
$("#rollover1 img,#rollover2 img").css("border","none");
});
$(function(){
$("#rollover1 img.on").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));
});
});
$(function(){
$("#rollover2 img.on").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2"));
}).each(function(){
$("![]()
").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
});
})
</script>
<div id="rollover1" class="clear">
<h2>プリロード非対応</h2>
<ul>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover_home.png" alt="home" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover_about.png" alt="about" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover_blog.png" alt="blog" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover_contact.png" alt="contact" class="on" /></a></li>
</ul>
</div>
<div id="rollover2" class="clear">
<h2>プリロード対応</h2>
<ul>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover2_home.png" alt="home" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover2_about.png" alt="about" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover2_blog.png" alt="blog" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/rollover2_contact.png" alt="contact" class="on" /></a></li>
</ul>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
Posted by ヒダカ at 18:00│Comments(0)
│jQuery
