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

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


そこでハマったことですが、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;

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