Twitter

jQueryを利用したシンプルな画像ロールオーバー

2012/02/06 | jquery | コメント (0)

class属性に「imgover」を指定したimg要素に対し、ロールオーバーで画像を置換する方法。
拡張子の前に「_o」を付けたロールオーバー用の画像さえ同階層にあれば、jQueryだけで簡単に実装できます。

ex)ロールオーバー前の画像名:hoge.jpg → ロールオーバー後の画像名:hoge_o.jpg

$(function() {
	// ロールオーバー
	$("img.imgover").mouseover(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	}).mouseout(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
	}).each(function(){
		$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	});
});

0 Comments»

コメントはまだありません。

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top