［jQuery］クリックイベント② 画像置換

ｊＱｕｅｒｙを使った画像置換

サムネイルをクリックすると、メイン画像がその画像に置換わります。

①　まずＨＴＭＬとＣＳＳで体裁を整えます。

＜ＨＴＭＬ＞
<ul>
<li><a href="img/flower.jpg"><img src="img/flower_s.jpg" alt="花"></a></li>
<li><a href="img/sea.jpg"><img src="img/sea_s.jpg" alt="海"></a></li>
<li><a href="img/jellyfish.jpg"><img src="img/jellyfish_s.jpg" alt="くらげ"></a></li>
<li><a href="img/building.jpg"><img src="img/building_s.jpg" alt="建物"></a></li>
</ul>
<p><img src="img/flower.jpg" alt="花" class="main"></p>

＜ＣＳＳ＞

html, body, ul, li, p {
  margin:0 ;
  padding: 0;
}
img{
  vertical-align: bottom;
  }
ul {
  list-style: none;
  overflow:hidden;
  margin-bottom: 10px;
  }
body{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  }
li {
  float: left;
  }
</style>

• サムネイルをクリックすると画像が表示されるので、ａ要素でリンクを設定する
• CSSのリセットをちゃんとかける
• サムネイルはｌｉ要素にfloat: leftで横並び

また、このままではサムネイルクリックすると他のページに飛んでしまうので、メイン画像のｉｍｇ要素にクラス名「ｍａｉｎ」をつけておきます。

②　ｊＱｕｅｒｙの記述

$ (function() {
  $('a').click( function() {
      $('img.main').attr('src', $(this).attr('href')).attr('alt', $(this).text());
        return false;
    });
});