くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]クリックイベント② 画像置換

jQueryを使った画像置換

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

f:id:pleasure10501:20150416094408p:plain

① まずHTMLとCSSで体裁を整えます。

<HTML>
<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>

<CSS>

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>

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

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

 

② jQueryの記述

 

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

 

広告を非表示にする