バリケンのJavaScript日記 RSSフィード

2006-11-10

[] DOMの要素の属性を変更する  DOMの要素の属性を変更する - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  DOMの要素の属性を変更する - バリケンのJavaScript日記  DOMの要素の属性を変更する - バリケンのJavaScript日記 のブックマークコメント

昨日までは「DOMの要素の書き換え」をやってみたけど、今日は「DOMの要素の属性の変更」をやってみるよ。

じゃあ、画像クリックすると次の画像を表示するスライドショーを作ってみるよ。まずはテキストエディタを立ち上げて、htmlタグを書くよ。

<html>
</html>

次にheadタグbodyタグだね。

<html>
  <head>
  </head>
  <body>
  </body>
</html>

画像を表示させるのはimgタグだよ。表示されるのはbodyタグの部分だから、bodyタグの中に追加すればいいよね。

<html>
  <head>
  </head>
  <body>
    <img>
    </img>
  </body>
</html>

画像ファイルsrc属性で指定すれば表示されるはずだよね。

<html>
  <head>
  </head>
  <body>
    <img src="img001.jpg">
    </img>
  </body>
</html>

さらにid属性もつけて、JavaScriptから簡単に参照できるようにするよ。ついでにalt属性もつけて、画像が表示されなかったときの代替テキストも指定するよ。

<html>
  <head>
  </head>
  <body>
    <img id="img" alt="Photos" src="img001.jpg">
    </img>
  </body>
</html>

次はJavaScriptコーディングだね。scriptタグをheadタグの中に追加するよ。ついでにprototype.jsのロード部分も追加しよう。

<html>
  <head>
    <script language="JavaScript" type="text/javascript" src="prototype.js">
    </script>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <img id="img" alt="Photos" src="img001.jpg">
    </img>
  </body>
</html>

今回は「スライドショー」を作るから、「今何ページか、という状態」を保持した関数を実装したいよね。「状態を保持した関数」と言ったらクロージャが使えそうだよね。

まずは、引数に「画像ファイル名を列挙した配列」を与えると「引数で与えた数だけインデックスをずらした画像ファイル名を返す関数」を生成する関数makeChangePhotoを作ってみるよ。「関数を生成する関数」であることに注意してね。次のような感じになるよ。

function makeChangePhoto(photos) {
  var i = 0;
  function f (x) {
    i = (i + x) % photos.length;
    if (i < 0) i += photos.length;
    return photos[i];
  }
  return f;
}

次に、今回スライドさせる画像ファイルを列挙した配列引数としてmakeChangePhoto関数を実行して、生成した関数にphotoFileという変数名を付けるよ。

function makeChangePhoto(photos) {
  var i = 0;
  function f (x) {
    i = (i + x) % photos.length;
    if (i < 0) i += photos.length;
    return photos[i];
  }
  return f;
}
var photoFile = makeChangePhoto(["img001.jpg", "img002.jpg", "img003.jpg", "img004.jpg"]);

こうすれば、photoFile関数を1を引数として実行すれば「"img002.jpg"」が、さらにもう一回1を引数として実行すれば「"img003.jpg"」が返ってくるよ。配列の最後の要素まで行ったら、その次は配列の最初の要素に戻るよ。

そしていよいよ今日メイン、「DOMの要素の属性の変更」をやってみるよ。とは言っても属性の変更はとっても簡単、属性の名前をプロパティとして参照したり書き換えたりできるみたいだよ。今回は"img"というid属性を付けたimgタグsrc属性を指定したいんだけど、そのときは「$("img").src」って書けばいいみたい。

ということで、実際にsrc属性を書き換える部分を書いてみるよ。書き換える内容は、先ほど生成したphotoFile関数を呼び出すことで得るようにするよ。

function makeChangePhoto(photos) {
  var i = 0;
  function f (x) {
    i = (i + x) % photos.length;
    if (i < 0) i += photos.length;
    return photos[i];
  }
  return f;
}
var photoFile = makeChangePhoto(["img001.jpg", "img002.jpg", "img003.jpg", "img004.jpg"]);
function changePhoto(x) {
  $("img").src = photoFile(x);
}

あとはこの内容をscriptタグの中に書いて、imgタグのonclick属性に呼び出し関数を追加すればいいよね。せっかくだから普通クリックすると進んで、Ctrlを押しながらクリックすると戻るようにしてみたよ。

<html>
  <head>
    <script language="JavaScript" type="text/javascript" src="prototype.js">
    </script>
    <script type="text/javascript">
      function makeChangePhoto(photos) {
        var i = 0;
        function f (x) {
          i = (i + x) % photos.length;
          if (i < 0) i += photos.length;
          return photos[i];
        }
        return f;
      }
      var photoFile = makeChangePhoto(["img001.jpg", "img002.jpg", "img003.jpg", "img004.jpg"]);
      function changePhoto(x) {
        $("img").src = photoFile(x);
      }
    </script>
  </head>
  <body>
    <p>Click image!</p>
    <p>
      <img id="img" alt="Photos" src="img001.jpg" onclick="changePhoto(event.ctrlKey ? -1 : 1)">
      </img>
    </p>
  </body>
</html>

せっかくだから無料レンタルWebスペースを借りて、このhtmlファイルを置いてみたよ。

http://muscovyduck.kusakage.com/javascript/slideshow/

画像クリックすると画像が変わっていくのを試してみてね。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061110