THE HAM MEDIA BLOG

ƒtƒHƒ“ƒgƒTƒCƒY‚ð•Ï‚¦‚éu‘åE’†E¬vƒ{ƒ^ƒ“‚ð‰æ‘œ‚àŽg‚Á‚ÄŽÀ‘•‚·‚é•û–@

æ‚ɃGƒ“ƒgƒŠ[‚µ‚½“à—e‚̕ʔŁB‘O‚̂̓{ƒ^ƒ“•”•ª‚ðimg‚̉摜‚Æ‚µ‚Ä“Ç‚Ý‚±‚ñ‚ŁA‚»‚Ìsrc‚ð•Ï‚¦‚邱‚Æ‚ÅŽÀŒ»‚ð‚µ‚Ä‚¢‚½‚Ì‚Å‚·‚ªA‚È‚ñ‚¾‚©—L—p«‚ª’á‚©‚Á‚½‚«‚ª‚µ‚Ä‚È‚ç‚È‚©‚Á‚½‚̂ŁA‚à‚¤­‚µƒVƒ“ƒvƒ‹‚ÉŠŽ‚‰摜‚Å‚àCSS‚̃{ƒ^ƒ“‚Å‚à‚Ç‚¿‚ç‚Å‚àOK‚Ȃ悤‚ȃXƒNƒŠƒvƒg‚É•Ï‚¦‚Ä‚Ý‚½B

¡‰ñ‚ÌŽd—l

æ‚ɏЉ‚Ä‚¢‚é‚à‚̂́A‰æ‘œƒŠƒ“ƒN‚ð•Ï‚¦‚ÄŽÀ‘•‚µ‚Ä‚¢‚½‚̂ɑ΂µA¡‰ñ‚̓{ƒ^ƒ“‚ð”wŒi‰æ‘œ‚ð—˜—p‚µ‚ÄŽÀ‘•B“¯Žž‚É:hoveŽž‚ƃNƒŠƒbƒN‚µ‚½•”•ª‚ɂ‚¯‚éactive‚ɑ΂µ‚āACSS‚ð—\‚ß—pˆÓ‚µ‚Ä‚¨‚­B

‚¿‚Ȃ݂ɁA¡‰ñ‚ÍCSS Sprite‚É‚ÄŽÀ‘•B

—˜—p‚µ‚½ƒ\[ƒXECSSE‰æ‘œ

JavaScript‚̃\[ƒX‚͍ŏ‰‚ɍì‚Á‚½‚à‚̂ɁAactive‚Ìclass‚ð‚‚¯‚½‚èíœ‚·‚é‹@”\‚ð‚‚¯‚½‚¾‚¯B

¡JavaScript

jQuery(function($){
  var history = $.cookie('fontSize');
  var elm = $('p','#test');
  if(!history){
    elm.addClass('fontM');
    $('#fontM').addClass('active');
  }else{
    elm.addClass(history);
    $('#'+history).addClass('active');
  }
  $('li','#fontChange').click(function(){
    if(!$(this).hasClass('active')){
      $('.active').removeClass('active');
      $(this).addClass('active');
      var setFontSize = this.id;
      $.cookie('fontSize', setFontSize);
      elm.removeClass().addClass(setFontSize);
    }
  });
});

¡‰æ‘œ

CSS Splite‚Å—˜—p‚·‚邽‚߁A‚P‚‚̉摜‚É

¡CSS

#fontChange li {
  float: left;
  display: block;
  width: 52px;
  height: 52px;
  padding: 0;
  margin-right: 5px;
  text-indent: -9999px;
  cursor: pointer;
  background:url(btn.png) no-repeat;
}

/* ”wŒiˆÊ’uŽw’è */

#fontChange li#fontS {
  background-position: 0 0;
}
#fontChange li#fontM {
  background-position: -58px 0;
}
#fontChange li#fontL {
  background-position: -116px 0;
}

/* :hoverE.activeŽž */

#fontChange li#fontS:hover,
#fontChange li#fontS.active {
  background-position: 0 -58px;
}
#fontChange li#fontM:hover,
#fontChange li#fontM.active {
  background-position: -58px -58px;
}
#fontChange li#fontL:hover,
#fontChange li#fontL.active {
  background-position: -116px -58px;
}

“®ìƒfƒ‚

fontsize change (background images button) - jsdo.it - share JavaScript, HTML5 and CSS

ƒ|ƒCƒ“ƒg‚ÍCSS

—\‚ßCSS‚Å:hover‚µ‚½Žž‚¾‚¯‚Å‚È‚­AƒNƒŠƒbƒN‚µ‚½•”•ª‚ðacrive‚É‚µ‚Ä‚¨‚­classŽž‚̃Xƒ^ƒCƒ‹‚ðŒˆ‚ß‚Ä‚¨‚­‚¾‚¯BJS‚Å–ˆ‰ñ‰æ‘œ‚̃pƒX‚ð•ÏX‚·‚é‚æ‚è‚Í“®ì‚̓Vƒ“ƒvƒ‹‚È‚à‚Ì‚É‚È‚éB

‚È‚É‚æ‚èAclass‚ð•t‰Á‚µ‚½‚èíœ‚µ‚½‚è‚·‚邾‚¯‚ÅŽÀ‘•‚ª‰Â”\BJavaScript‚Å‚ ‚ꂱ‚ê•¡ŽG‚ɍl‚¦‚é‚æ‚è‚̓Vƒ“ƒvƒ‹‚É‚Å‚«‚éB