複数の画像エリアのsrcを切り替える

2014/10/22

sample

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("[gallery-area]").click(function(){//gallery-areaというアトリビュートを持つ要素
  var h = $(this).attr("href");//画像srcの取得
  var t = "#" +$(this).attr("gallery-area");//画像表示エリア(id)の取得
    $(t).fadeOut(function(){
      $(t).attr("src",h).fadeIn();
    });
    return false;
  })
});
</script>

<p><img id=area1 src="images/negima.jpg" width=400 height=300 alt="" /></p> <!-- imgにidを付けておく -->
<ul>
  <li><a href="images/hatsu.jpg" gallery-area="area1">ハツ</a></li>
  <li><a href="images/hurisode.jpg" gallery-area="area1">フリソデ</a></li>
  <li><a href="images/kawa.jpg" gallery-area="area1">カワ</a></li>
  <li><a href="images/negima.jpg" gallery-area="area1">ネギマ</a></li>
</ul>

<p><img id=area2 src="images/tonkotu.jpg" width=400 height=300 alt="" /></p>
<ul>
  <li><a href="images/miso.jpg" gallery-area="area2">味噌ラーメン</a></li>
  <li><a href="images/shio.jpg" gallery-area="area2">塩ラーメン</a></li>
  <li><a href="images/shoyu.jpg" gallery-area="area2">醤油ラーメン</a></li>
  <li><a href="images/tonkotu.jpg" gallery-area="area2">豚骨ラーメン</a></li>
</ul>

指定する画像エリアをdivなどで括ってheightなどをキッチリ書いておいた方がよいような気がする。srcが入れ替わるとき勝手にスクロールすることがあるようだ。