PhoEniBiR～DevDiary

• 画像にフォーカスをあてた際、画像ファイルのファイル名＋_onの画像を切り替える。
• DEMO PAGE

• imgタグのsrcのURLを、マウスが乗ったときに変更する。（画像ファイルのファイル名末尾に_onを追加）
• imgタグのsrcのURLを、マウスが降りたときに元に戻す。
• 全ての画像ではなく、指定した画像のみ変更する。

/* ◯今回はpng画像で実験を行なっている */
/* ◯png画像に_onをつけたり外したりで、画像変更を実現してる */
 $(document).ready(function(){  
  /* change image (off→on) */
  $('img.onChange').mouseover(function(){
   var onImgUrl = $(this).attr('src').replace(/\.png/ig, '_on.png');
   $(this).attr('src', onImgUrl);
  });
 
  /* change image (on→off) */
  $('img.onChange').mouseout(function(){
   var onImgUrl = $(this).attr('src').replace(/_on\.png/ig, '.png');
   $(this).attr('src', onImgUrl);
  });
 });

<!-- ◯on off変更したい画像には、class='onChange'を指定する -->
<!-- ◯画像は、デフォルトの名前＋_onを準備する -->
<img class="onChange" src="img/online.png" />
(この場合、マウスが乗っかるとsrc="img/online_on.pngとなる)

• フォーカス時に動作を加え、フォーカスが当たっていることをわかりやすくする。
• DEMO PAGE

• マウスフォーカス時に、メニューが動く。
• マウスフォーカス時に画像を変更する。

<div id="subNaviWrapper">
<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">HowToBuy</a></li>
 <li><a href="#">RSS</a></li>
 <li><a href="#">Sitemap</a></li>
</ul>
</div>

/* ●naviデザインサンプル */
#subNaviWrapper{
 width: 150px;
 font-size: 20px;
}
#subNaviWrapper li{
 background: url('../img/16dotBlue.png') no-repeat 0 3px;
 padding: 0 0 0 20px;
 margin: 0 0 10px 0;
}
a{
 text-decoration: none;
 color: #444444;
}

$(document).ready(function(){
  /* ◯各々のメニューにフォーカス時 */
  $('#subNaviWrapper li').mouseover(function(){
   $(this).css("background", "url('img/16dotRed.png') no-repeat 0 3px");
   $(this).animate({paddingLeft:'+=10'},300);
  });

  /* ◯各々のメニューにフォーカスアウト時 */
  $('#subNaviWrapper li').mouseout(function(){
   $(this).css("background", "url('img/16dotBlue.png') no-repeat 0 3px");
   $(this).animate({paddingLeft:'-=10'},300);
   
  });
 });

• クリックすることで開閉するメニューを作成する。
• DEMO PAGE

• ある要素の次の要素を、クリックをキーに出現・隠蔽する。
• 開閉とともに画像も変更する。
• class='boxTitle'の次の要素がデフォルトで隠れる。

<div class="accordionBox1">
 <h3 class="boxTitle">アコーディオンサンプル１</h3>
 <p class="boxContents">出現・隠居を繰り返します( ﾟдﾟ)ﾊｯ!<br>(/ω・＼)ﾁﾗｯ<br><br><br>( ﾟдﾟ)ﾊｯ!</p>
</div>

.accordionBox1{
 width: 600px;
 margin: 0 0 50px 0;
}
.accordionBox1 .boxTitle{
 border: 1px solid #cccccc;
 border-bottom: 2px solid #e3297d;
 padding:10px 0 10px 50px;
 cursor: pointer;
 /*画像はjQueryで入れ替える*/
 background: url('../img/48plusBlue.png') no-repeat;
}
.accordionBox1 .boxContents{
 border-left: 1px solid #cccccc;
 border-right: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 padding:10px  25px ;
}

$(document).ready(function(){
 /* ◯class = 'boxTitle' をクリックしたら実行 */
 $('.boxTitle').click(function(){
  /* ◯次の要素を出現させる */
  $(this).next().animate(
   { height: "toggle", opacity: "toggle" }
   ,"slow"
  );
  /* $this.next().toggle('slow'); でも同じ */
     
  /* ◯＋と-の画像切替 */
  if($(this).css('background-image') == "url(http://phoenibir.com/jqueryWorkshop/accordion1/img/48minusBlue.png)"){
   $(this).css("background", "url('img/48plusBlue.png') no-repeat");
  }else{
   $(this).css("background", "url('img/48minusBlue.png') no-repeat");
  }
 }).next().hide(); /* ◯ページ読み込み時はかくしておく */
});

本記事はこちらへ移行しました。お気に入り登録して頂いた皆様は、お手数ですが再登録よろしくお願いいたします