jQueryŽ©ìFŠÈ’P‚ÈŽw’è‚¾‚¯‚ÅƒeƒLƒXƒg‚ð‰æ‘œ‚Æ“ü‚ê‘Ö‚¦i‰æ‘œ’uŠ·j‚ª‚Å‚«‚éhjQuery ReplaceImg Pluginh

2008/12/03

ƒJƒeƒSƒŠF: jQuery pluginŽ©ì

ƒ^ƒOF: jquery; javascript; plugin; ƒvƒ‰ƒOƒCƒ“; ‰æ‘œ’uŠ·

‰æ‘œ’uŠ·‚ªŠÈ’P‚É‚Å‚«‚éƒvƒ‰ƒOƒCƒ“

u‰æ‘œ’uŠ·‚ªŠÈ’P‚É‚Å‚«‚È‚¢‚©‚È[v
‚È‚ñ‚ÄŒ¾‚í‚ê‚½‚±‚Æ‚ª‰ß‹Ž‚É‚ ‚Á‚½‚Ì‚ðŽv‚¢o‚µ‚½B
CSS‚Å‚ÌÝ’è‚ðŠo‚¦‚½‚çŠÈ’P‚É‚Å‚«‚é‚Ì‚Å‚·‚ªA
‚»‚ê‚æ‚è‚àŠÈ’P‚ÉŽg‚¦‚È‚¢‚©‚È[‚Æl‚¦‚Ä‚¢‚½‚çA
u‚ Aƒvƒ‰ƒOƒCƒ“‚Å‚¢‚¢‚¶‚á‚ñIv
‚È‚ñ‚Ä‚¢‚¢‚Ì‚©—Ç‚‚í‚©‚ç‚È‚¢‚Ü‚Üð“ú‚©‚ç\‘z‚Í‚¶‚ß‚ÄA‚³‚Á‚«‚æ‚¤‚â‚Š®¬‚µ‚½B
‚¢‚ë‚¢‚ë‚ÈƒeƒXƒg‚Æ‚©ŽÀŒ±‚µ‚È‚ª‚çì‚Á‚½‚çŽžŠÔ‚©‚©‚Á‚½iŠ¾j
‚Å‚àì‚è‚Æ‚¢‚¤‚©ƒXƒNƒŠƒvƒg‚Í‚à‚Ì‚·‚²‚ŠÈ’P‚¾‚Á‚½‚è‚·‚éB

‚±‚Ìƒvƒ‰ƒOƒCƒ“‚ðŽg‚¦‚ÎA‰æ‘œ’uŠ·‚ðŠÈ’P‚És‚¦‚é‚ÆŽv‚¤B
o—ˆ‰]X‚Í‚¨‚¢‚Æ‚¢‚ÄA‚Æ‚è‚ ‚¦‚¸Ð‰îI

ReplaceImg Plugin

ƒ_ƒEƒ“ƒ[ƒh‚µ‚ÄŽg—p‚µ‚Ä‚‚¾‚³‚¢B
ƒŠƒ“ƒNæ‚ð•Û‘¶‚Å•Û‘¶‚Å‚«‚Ü‚·B

ƒ_ƒEƒ“ƒ[ƒhFjquery.replaceImg-1.0.js

“®ì‚ðŠm”F‚µ‚½ƒuƒ‰ƒEƒU‚Í
Firefox3AIE6AIE7ASafari3AOpera9.6AChromeB

Žg‚¢•û

jQuery‚ª–³‚¢‚Æ“®‚©‚È‚¢‚Ì‚ÅAƒ_ƒEƒ“ƒ[ƒh‚µ‚Ä‚«‚Ä‚‚¾‚³‚¢B
‚»‚µ‚Ä¡‰ñ‚Ìƒvƒ‰ƒOƒCƒ“‚àƒ_ƒEƒ“ƒ[ƒh‚µ‚Ä‚¨‚B

“ñ‚Â‚Ìjs‚ð—˜—p‚·‚é‚½‚ß‚ÉAhead“à‚É‹LqB

<script src="js/jquery.js" type="text/javascript"></script>  
<script src="js/jquery.replaceImg-1.0.js" type="text/javascript">
</script>

ƒeƒLƒXƒg‚ð‰æ‘œ‚Æ’uŠ·

’Pƒ‚ÉƒeƒLƒXƒg‚ðimg‚Æ“ü‚ê‘Ö‚¦‚éê‡‚ÍAreplaceImg‚ðA
”wŒi‰æ‘œ‚Æ‚µ‚ÄŽw’è‚µ‚½‚¢ê‡‚ÍreplaceBgImg‚ðŽg‚¢‚Ü‚·B

¡ƒTƒ“ƒvƒ‹ƒ\[ƒX

$(function(){
	$('.replace').replaceImg('##.png');
	$('.replacebg').replaceBgImg('##.png',190,70);
});

“K‰ž‚³‚¹‚½‚¢•”•ª‚ÌƒZƒŒƒNƒ^‚ðŽw’è‚µA
ŠŽ‚Â.replaceImg()‚Å’uŠ·‚·‚é‰æ‘œ‚ðŽw’è‚µ‚Ä‚¨‚«‚Ü‚·B
.replaceBgImg‚ðŽw’è‚·‚éê‡‚ÍA‰¡•‚Æc•‚àŽw’è‚µ‚Ü‚·B

‚í‚©‚è‚â‚·‚‚·‚é‚ÆˆÈ‰º‚Ì‚æ‚¤‚É‚È‚è‚Ü‚·B

$(function(){
	//img‚Æ‚µ‚Ä’uŠ·‚·‚éê‡
	$('ƒZƒŒƒNƒ^').replaceImg('‰æ‘œURL');
	//css‚Ìbackground-image‚Æ‚µ‚Ä’uŠ·‚·‚éê‡
	$('ƒZƒŒƒNƒ^').replaceBgImg('‰æ‘œURL' , ‰¡• , c•);
});

”wŒi‰æ‘œ‚Æ‚µ‚Ä’uŠ·‚·‚éê‡‚Í•K‚¸‰¡Ec•‚ðŽw’è‚µ‚Ä‚‚¾‚³‚¢B
“ü‚ê–Y‚ê‚é‚Æ•\Ž¦‚³‚ê‚Ü‚¹‚ñB

¡ƒTƒ“ƒvƒ‹HTML

<p class="replace">ƒ_ƒ~[‰æ‘œ</p>
<p class="replacebg">ƒ_ƒ~[‰æ‘œ</p>

¡ƒTƒ“ƒvƒ‹ƒvƒŒƒrƒ…[

ƒ_ƒ~[‰æ‘œ

ƒ_ƒ~[ƒeƒLƒXƒg

ƒTƒ“ƒvƒ‹‚Ìã‚ªimg‚Å•\Ž¦‚³‚ê‚Ä‚¢‚ÄA
‰º‚ª”wŒi‰æ‘œ‚Æ‚µ‚Ä•\Ž¦‚³‚ê‚Ä‚¢‚Ü‚·B

‰æ‘œ‚ÉƒŠƒ“ƒN‚ª‚ ‚éê‡

ƒŠƒ“ƒN‚ª‚ ‚éê‡‚ÍƒAƒ“ƒJ[(<a>)ƒ^ƒO•”•ª‚ðŽw’è‚µ‚Ä‚‚¾‚³‚¢B
ƒAƒ“ƒJ[ƒ^ƒO‚ðŽw’è‚·‚é‚±‚Æ‚ÅA‰æ‘œ•\Ž¦•”•ª‚ªƒŠƒ“ƒN‚É‚È‚è‚Ü‚·B

¡ƒTƒ“ƒvƒ‹ƒ\[ƒX

$(function(){
	$('.replace').replaceImg('##.png');
	$('.replacebg').replaceBgImg('##.png',190,70);
});

¡ƒTƒ“ƒvƒ‹HTML

<p><a href="#" class="replace">ƒ_ƒ~[‰æ‘œ</a></p>
<p><a href="#" class="replacebg">ƒ_ƒ~[‰æ‘œ</a></p>

¡ƒTƒ“ƒvƒ‹ƒvƒŒƒrƒ…[

ƒ_ƒ~[‰æ‘œ

ƒ_ƒ~[ƒeƒLƒXƒg

ƒ[ƒ‹ƒI[ƒo[‚àŠÈ’P

ƒfƒtƒHƒ‹ƒg‚Íclass‚Éover‚ð‰Á‚¦‚é‚±‚Æ‚Å
_on‚ª‚Â‚¢‚½‰æ‘œ‚ðƒ[ƒ‹ƒI[ƒo[‰æ‘œ‚É‚Å‚«‚Ü‚·B

¡ƒTƒ“ƒvƒ‹HTML

<p><a href="#" class="replace over">ƒ_ƒ~[‰æ‘œ</a></p>
<p><a href="#" class="replacebg over">ƒ_ƒ~[‰æ‘œ</a></p>

¡ƒTƒ“ƒvƒ‹ƒvƒŒƒrƒ…[

ƒ_ƒ~[‰æ‘œ

ƒ_ƒ~[ƒeƒLƒXƒg

ƒ[ƒ‹ƒI[ƒo[Žw’è‚ÌƒJƒXƒ^ƒ}ƒCƒYiã‹‰j

ƒfƒtƒHƒ‹ƒg‚Íƒ[ƒ‹ƒI[ƒo[‚ÌŽw’è‚ÍA
class="over"‚Å“K‰ž‚³‚¹Aimg‚Ì‰æ‘œÅŒã‚É_on‚Ì‚Â‚¢‚½‰æ‘œ‚ð
ƒ[ƒ‹ƒI[ƒo[‰æ‘œ‚ÉŽw’è‚·‚é‚æ‚¤‚É‚µ‚Ä‚¢‚Ü‚·B

‚»‚ê‚ð•ÏX‚·‚éê‡‚Í‰º‹L‚Ì‚æ‚¤‚É‚µ‚Ä‚‚¾‚³‚¢B

$(function(){
	$('.replace').replaceImg('##.png',{
		rollover: '.hoge',
		postfix:'_over'
	});
	$('.replacebg').replaceBgImg('##.png',190,70,{
		rollover: '.hoge',
		postfix:'_over'
	});
});

rollover•”•ª‚ÅAƒ[ƒ‹ƒI[ƒo[‚µ‚½‚¢ƒZƒŒƒNƒ^‚ÌŽw’èA
postfix‚Åƒ[ƒ‹ƒI[ƒo[‰æ‘œ‚ÌÅŒã‚É‚Â‚•”•ª‚Ì•ÏX‚ª‚Å‚«‚Ü‚·B

‚±‚ê‚ÍŽw’è‚µ‚È‚‚Ä‚àŽg—p‚Å‚«‚é‚Ì‚ÅA
–Ê“|‚Èl‚Í‚±‚ÌƒJƒXƒ^ƒ}ƒCƒY‚ð‚µ‚È‚¢‚Ù‚¤‚ª‚¢‚¢‚Å‚·B
’Pƒ‚Éƒ[ƒ‹ƒI[ƒo[‚µ‚½‚¢‰æ‘œ‚ÌÅŒã‚É_on‚ð‚Â‚¯‚Ä‚¨‚«A
ƒ[ƒ‹ƒI[ƒo[‚³‚¹‚½‚¢•”•ª‚Ìclass‚Éover‚ðŽw’è‚µ‚Ä‚‚¾‚³‚¢B

ƒŠƒ“ƒN‚Ìƒ^ƒCƒgƒ‹‚ð•\Ž¦‚³‚¹‚½‚‚È‚¢ê‡iã‹‰j

ƒfƒtƒHƒ‹ƒgó‘Ô‚¾‚ÆAƒeƒLƒXƒg‚É“ü‚ê‚Ä‚¢‚½•¶Žš‚ªƒŠƒ“ƒN•”•ª‚Ìƒ^ƒCƒgƒ‹‚Æ‚È‚èA
ƒ}ƒEƒXƒI[ƒo[‚µ‚½‚Æ‚«‚É•¶Žš‚ªƒ|ƒbƒvƒAƒbƒv‚³‚ê‚Ü‚·B
‚»‚ê‚ð‚µ‚½‚‚È‚¢ê‡‚ÍAimgTitle:false‚ðŽw’è‚µ‚Ü‚·B

$(function(){
	$('.replace').replaceImg('##.png',{
		imgTitle:false
	});
	$('.replacebg').replaceBgImg('##.png',190,70,{
		imgTitle:false
	});
});

Žg‚¢‚Ç‚±‚ë

Žg‚¢‚Ç‚±‚ë‚Æ‚¢‚¤‚æ‚èA‚±‚Ìƒvƒ‰ƒOƒCƒ“‚ÌƒƒŠƒbƒg‚ÍA
–Ê“|‚ÈCSS‚ÌÝ’è‚È‚µ‚ÉA”wŒi‚É‰æ‘œ‚ð“ü‚ê‚é‚±‚Æ‚ª‚Å‚«‚ÄA
‚È‚¨‚©‚Âƒ[ƒ‹ƒI[ƒo[‚ào—ˆ‚Ä‚µ‚Ü‚¤“_‚Å•Ö—˜‚¾‚ÆŽv‚¢‚Ü‚·B