THE HAM MEDIA BLOG

「画像置換が簡単にできないかなー」
なんて言われたことが過去にあったのを思い出した。
CSSでの設定を覚えたら簡単にできるのですが、
それよりも簡単に使えないかなーと考えていたら、
「あ、プラグインでいいじゃん！」
なんていいのか良くわからないまま昨日から構想はじめて、さっきようやく完成した。
いろいろなテストとか実験しながら作ったら時間かかった（汗）
でも作りというかスクリプトはものすごく簡単だったりする。

このプラグインを使えば、画像置換を簡単に行えると思う。
出来云々はおいといて、とりあえず紹介！

ReplaceImg Plugin

ダウンロードして使用してください。
リンク先を保存で保存できます。

ダウンロード：jquery.replaceImg-1.0.js

動作を確認したブラウザは
Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。

使い方

jQueryが無いと動かないので、ダウンロードしてきてください。
そして今回のプラグインもダウンロードしておく。

二つのjsを利用するために、head内に記述。

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

テキストを画像と置換

単純にテキストをimgと入れ替える場合は、replaceImgを、
背景画像として指定したい場合はreplaceBgImgを使います。

■サンプルソース

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

適応させたい部分のセレクタを指定し、
且つ.replaceImg()で置換する画像を指定しておきます。
.replaceBgImgを指定する場合は、横幅と縦幅も指定します。

わかりやすくすると以下のようになります。

$(function(){
	//imgとして置換する場合
	$('セレクタ').replaceImg('画像URL');
	//cssのbackground-imageとして置換する場合
	$('セレクタ').replaceBgImg('画像URL' , 横幅 , 縦幅);
});

背景画像として置換する場合は必ず横・縦幅を指定してください。
入れ忘れると表示されません。

■サンプルHTML

<p class="replace">ダミー画像</p>
<p class="replacebg">ダミー画像</p>

■サンプルプレビュー

サンプルの上がimgで表示されていて、
下が背景画像として表示されています。

画像にリンクがある場合

リンクがある場合はアンカー(<a>)タグ部分を指定してください。
アンカータグを指定することで、画像表示部分がリンクになります。

■サンプルソース

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

■サンプルHTML

<p><a href="#" class="replace">ダミー画像</a></p>
<p><a href="#" class="replacebg">ダミー画像</a></p>

■サンプルプレビュー

ロールオーバーも簡単

デフォルトはclassにoverを加えることで
_onがついた画像をロールオーバー画像にできます。

■サンプルHTML

<p><a href="#" class="replace over">ダミー画像</a></p>
<p><a href="#" class="replacebg over">ダミー画像</a></p>

■サンプルプレビュー

ロールオーバー指定のカスタマイズ（上級）

デフォルトはロールオーバーの指定は、
class="over"で適応させ、imgの画像最後に_onのついた画像を
ロールオーバー画像に指定するようにしています。

それを変更する場合は下記のようにしてください。

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

rollover部分で、ロールオーバーしたいセレクタの指定、
postfixでロールオーバー画像の最後につく部分の変更ができます。

これは指定しなくても使用できるので、
面倒な人はこのカスタマイズをしないほうがいいです。
単純にロールオーバーしたい画像の最後に_onをつけておき、
ロールオーバーさせたい部分のclassにoverを指定してください。

リンクのタイトルを表示させたくない場合（上級）

デフォルト状態だと、テキストに入れていた文字がリンク部分のタイトルとなり、
マウスオーバーしたときに文字がポップアップされます。
それをしたくない場合は、imgTitle:falseを指定します。

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

使いどころ

いるのかわかりませんが、HTML上であまりimgを使いたいたくない
なんて人にはオススメのプラグインになるのかなーなんて思います。

使いどころというより、このプラグインのメリットは、
面倒なCSSの設定なしに、背景に画像を入れることができて、
なおかつロールオーバーも出来てしまう点で便利だと思います。

ダウンロード

Download：jquery.replaceImg-1.0.js

こんな人におすすめ

このプラグインは、以下のような人にオススメかと思います。

• ・CSSでの画像の設定が良くわからない。面倒。
• ・画像置換のロールオーバーの設定がわからないからできない。
• ・画像置換のロールオーバーでちらつく。
• ・CSSもJavaScriptも切った環境ではテキストを表示させたい。

CSS設定などができるような人はCSSの方が楽かもしれないですが、
CSSがわからないような人には使えるプラグインだと思います。

何かバグなどがあれば教えてください。