imageのフォームボタンをロールオーバー

注意

このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。

Sample

Code

$(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)
  });
});

JavaScript1000本ノック トップページへ