風山堂

(foussin's diary)

はてなブログで JavaScript のスライド表示

前回のスライド表示のソース(要点のみ)：

<p>
<!-- ここに画像を表示(0.JPG は初期値の画像) -->
<img name="hiyo_dori_slide"
    src="ｈｔｔｐ://domain.jp/usr-name/image/hiyo-slide-550px/0.JPG"
    alt="ヒヨドリ" width="550" height="387">
</p>

<p>…記事…</p>

<!-- 記事本文の最後に JavaScript コードを記述 -->
<script type="text/javascript">
my_num = 0;
function changeImage() {
  ++my_num;
  my_num %= 22;
  document.hiyo_dori_slide.src =
    "ｈｔｔｐ://domain.jp/usr-name/image/hiyo-slide-550px/" +
    my_num + ".JPG";
}
setInterval('changeImage()',1750);
</script>

　はてなブログでこんな風に記述するだけで OK。<head>～</head> 内ではなく、ブログの記事本文に記述しても一応表示できるようだ。これは HTML5 風の記述だが、読み込み時に自動的に xhtml 形式に変換される(はてなブログは xhtml 形式らしい)。

　普通のブログでは head ブロックには記述できないし、onload で読み込むのも無理なので、これはありがたい。はてなブログでは『設定 - 詳細設定』で head ブロック内に追記が可能らしいが、1つの記事のためだけに head に記述するのもどうかな、と思うし…。

　ただ、写真は『はてなフォトライフ』ではなく、自分のホームページ・スペースに置いた。はてなフォトライフの写真を使うとアップロード時にファイル名が変わってしまって面倒臭くなるので。写真は 0.JPG ～ 21.JPG の計22枚を用意している(剰余演算に反映)。

　あと、ご覧の通り html 直入力なので…。そんで、ちゃんと表示できるようになるまでに、けっこう色々とハマったので、それを紹介しておきます。

img 要素… id 属性ではなく、name 属性を使う(ブラウザ依存の問題?)
img 要素… 画像サイズはブログ本文スペースの width 以内とする
img 要素… 画像の拡張子は ".jpg" か ".JPG" かを正確に指定
JavaScript… 変数名には - (ハイフン)は使わない(代わりに _ を使う)
JavaScript… ブログ内で変数名が衝突しないように気を付ける
name属性、id属性… ブログ内で名前が衝突しないように気を付ける

　気を付けるべきは、こんなところかな。これでうちの環境では Firefox、Chrome、Edge で表示確認しました。ちなみに、コードは以下のサイトを参考にしました。↓

◆ スライドショー
我が家のスライドショー
http://www.scollabo.com/banban/java/jvsample_003.html