この記事の所要時間： 約 0分57秒
マウスオーバー時にonとoffの画像を切り替える。
- ファイル名の_onと_offで自動判別する
- replaceはJavaScriptの組み込み関数。正規表現と後方参照を使った置換が可能
[javascript]
$(function() {
$(‘a img’).hover(
function() {
$(this).attr(‘src’, $(this).attr(‘src’).replace(/(.*)_off.([a-zA-Z0-9]+)$/, ‘$1_on.$2’));
},
function() {
$(this).attr(‘src’, $(this).attr(‘src’).replace(/(.*)_on.([a-zA-Z0-9]+)$/, ‘$1_off.$2’));
}
);
});
[/javascript]
少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックスを参考に作成。オフになったときの処理がいまいちよくわからなかった。
投稿者紹介
-
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。
最近のエントリ
VirtualBox2015.02.05VCCWでWordPressの環境を構築する- .NET2014.01.29C#からChatWork APIをたたいて投稿する
- さくらのクラウド2013.12.31curlでお手軽にさくらのクラウドAPIを使ってみた(curl + jq)
- Amazon Web Services2013.12.28EC2インスタンスをawscliから操作する
人気の記事
コメント