« CSS HappyLife ZERO がいい感じな件 | Back To Blog Top | JS習作：ページ内のリストの中から目的の物を探し出す »
JS習作：imageのフォームボタンをロールオーバー
2010-02-01：サンプルページのリンクが切れていたので直しました。
概要
1月1週目のJavaScriptです。 type="image"なフォームボタンをマウスオンでロールオーバーします。 jQuery使用。
ソースコード
$(function () {
var preload_btn_num = $('div.submit input[type="image"]');
for(var i=0; i<preload_btn_num.length; i++) {
var preload_btn_src = $(preload_btn_num[i]).attr('src').replace('.png', '');
var preload_btn = preload_btn_src + '_on.png';
$('<img>').attr('src', preload_btn);
}
$('div.submit input[type="image"]').hover(function(){
var btn_src_full = $(this).attr('src');
var btn_src = btn_src_full.replace('.png', '');
var on_src = btn_src + '_on.png';
$(this).attr('src', on_src)
}, function(){
var btn_src_png = $(this).attr('src');
var btn_src = btn_src_png.replace('_on', '');
$(this).attr('src', btn_src)
});
});処理を変数に代入→次の行でそれを使って処理をして変数に代入、みたいな部分は一行で書いた方がいいんだろうか。 個人的には別々にした方が読みやすいのだけど。