サイドバーのスライドショーを作ってみる

サイドバーに小さなスライドショーのスペースを作ってみました。クリックすると大画面のスライドショーのページに飛びます。

そこでハマったことですが、JavaScript で画像の大きさを設定したい場合、僕の持っている『JavaScriptリファレンス 第6版』では、

var image = new Image();
image.width = 400; image.height = 300;

で出来るように読めますが（p.266）、少なくとも自分のブラウザ（Chrome）では出来ませんでした（※注記）。ぐぐると出てくるように、HTML が

<img id="pic" name="picname">

ならば、

document.picname.width = 400; document.picname.height = 300;

とすれば可能です。これはもちろん

var a1 = document.getElementById("pic");
a1.width = 400; a1.height = 300;

と同じことです（name 属性を使いたくなかったら、こちらになります。）

※注記
ここはよくわかっていなかったです。ちゃんと image.width = 400 で指定できます。<div id="pic"></div> などに対し、document.getElementById("pic").appendChild(image) などが必要です。（9/23）

それから、JavaScript を使って画像を表示させるのも、自分にはなかなかむずかしかったです。HTML が上と同じで、画像の URL が http://fuga.com/pic1.jpg の場合、

var image = new Image();
var url = "http://fuga.com/pic1.jpg";
image.src = url;
document.getElementById("pic").setAttribute("src", url);

で出来ました。面倒だね。image.src のところで画像が読み込まれ、setAttribute のところで画面に表示されます。

画像を読み込んだあとに関数 func() を呼び出したければ、

image.onload = func;

でいいですが、ここでは () は付けてはいけないようです。