torazuka/img-attr.html

## img-attr.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>imgタグに属性を追加する</title>
        <script type="text/javascript" src="../scripts/jquery.js"></script>
        <script>
            $(document).ready(function() {
                $("li a#mikaeri").click(function() {
                    $("img").attr({
                        src: "http://img.f.hatena.ne.jp/images/fotolife/t/torazuka/20101009/20101009004028.jpg",
                        alt: "見返り"
                    }).show();
                });
                $("li a#yukata").click(function() {
                    $("img").attr({
                        src: "http://img.f.hatena.ne.jp/images/fotolife/t/torazuka/20100822/20100822182401.jpg",
                        alt: "浴衣"
                    }).show();
                });
                $("li a#helios").click(function() {
                    $("img").attr({
                        src: "http://img.f.hatena.ne.jp/images/fotolife/t/torazuka/20100626/20100626161620.jpg",
                        alt: "Helios"
                    }).show();
                });
            });
        </script>
    </head>
    <body>
        <h1>imgタグに属性を追加する</h1>
        <h2>スプラッシュのサムネール</h2>
        <img width="91" height="59"/>
        <ul>
            <li><a href="#" id="mikaeri">見返り</a></li>
            <li><a href="#" id="yukata">浴衣</a></li>
            <li><a href="#" id="helios">Helios</a></li>
        </ul>
        <h2>メモ</h2>
        <p>リンクをクリックすると、画像タグimgに属性srcが追加される。それによって画像が切り替わる。</p>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>imgタグに属性を追加する</title>
	<script type="text/javascript" src="../scripts/jquery.js"></script>
	<script>
	$(document).ready(function() {
	$("li a#mikaeri").click(function() {
	$("img").attr({
	src: "http://img.f.hatena.ne.jp/images/fotolife/t/torazuka/20101009/20101009004028.jpg",
	alt: "見返り"
	}).show();
	});
	$("li a#yukata").click(function() {
	$("img").attr({
	src: "http://img.f.hatena.ne.jp/images/fotolife/t/torazuka/20100822/20100822182401.jpg",
	alt: "浴衣"
	}).show();
	});
	$("li a#helios").click(function() {
	$("img").attr({
	src: "http://img.f.hatena.ne.jp/images/fotolife/t/torazuka/20100626/20100626161620.jpg",
	alt: "Helios"
	}).show();
	});
	});
	</script>
	</head>
	<body>
	<h1>imgタグに属性を追加する</h1>
	<h2>スプラッシュのサムネール</h2>
	<img width="91" height="59"/>
	<ul>
	<li><a href="#" id="mikaeri">見返り</a></li>
	<li><a href="#" id="yukata">浴衣</a></li>
	<li><a href="#" id="helios">Helios</a></li>
	</ul>
	<h2>メモ</h2>
	<p>リンクをクリックすると、画像タグimgに属性srcが追加される。それによって画像が切り替わる。</p>
	</body>
	</html>