違う画像に替えるには？
先月、発売されたばかりのWindows2000に関しては、３年前のコラム｢どちらを選ぶべきか？｣以来、少しづつですが触れてきました。そこで今回は趣向を変えて、１年振りにＨＴＭＬ文書(ハイパー･テキスト)の書き方がテーマです。具体的には、皆さんがご自分のホームページで画像を使っておられる場合、その画像を別の画像へ切り替えることでインパクトを強くしたり、あるいは別のページから戻るたびに違う画像を表示する方法をご紹介します。
“聖林写真館”の画像
まず、ページを開いたままで画像が替わるとどうなるのかは、わが“聖林写真館”をご覧いただくのが早いでしょう。たとえばマリリン･モンローのページは、右のような画像が15秒間隔で次から次へと替わってゆきます。その結果インターネット上のスライド･ショーを構成する仕掛けです。ＨＴＭＬ文書にはダイナミックドキュメントと呼ばれる機能があり、その中のクライアントプルは<meta>タグを拡張した機能で、たとえば｢文書１｣の冒頭で｢<meta http-equiv="refresh" content=1>｣のように指定しておけば、｢文書１｣が毎秒再ロードし続けます。
この<meta>タグのhttp-equiv属性(オプション)で指定した"refresh"は再ロードをしなさいといういう意味で、content属性の"1"は再ロードの間隔が１秒間、また別の文書で再ロードをさせたい場合は、さらに｢content="n; url=http://server/file"｣とその文書のリンク先を続けて指定すればいいわけです。
“聖林写真館”の写真ページでは加えてフレーム機能も使っており、写真が入ったフレームだけを再ロードさせることで効果は倍増します。たとえばマリリン･モンローの１枚目の写真フレームなら、
<html>
<meta http-equiv="refresh" content="5; url=monr02.html">
<body background="../texture/stars.jpg" text=#dcdcdc><center><b><font color=#ffb6c1>マリリン･モンロー</font> Marilyn Monroe</b><p>
<img src="monr01.jpg"></center></body>
</html>
これがテキストの中身です。｢monr01.jpg｣という画像が入った｢monr01.html｣というページは、５秒間表示されると自動的に｢monr02.jpg｣という画像が入った｢monr02.html｣というページへ替わり、見ている読者は写真だけが入れ替わったような気になります。そして、｢monr02.html｣の<meta>タグでは５秒後｢monr03.jpg｣という画像が入った｢monr03.html｣というページへ替わるよう指定してあり、同じパターンで｢monr04.html｣､｢monr05.html｣と、どんどん続いてゆきます。
スライドショーの基本的な構造はこのとおりですが、使い方はこればかりと限りません。｢文書１｣が指定した｢文書２｣から再び｢文書１｣を指定すれば、２つの文書間を行き来します。スライドショーとは関係なく、普通の文書で２分(120秒)毎に画像を替えたい場合など、なかなか便利な手です。ただし、フレーム機能で画像だけ別のフレームへ分けておかないと、文章を読んでいる途中でページが再ロードされ、せっかくの読者の邪魔をしかねませんのでご注意ください。
“ホームページ”の画像次は同じページをアクセスするたび画像が替わるようにする方法で、Javaスクリプトを使います。先のダイナミックドキュメント機能同様、書面の関係上、スクリプトの詳細までは紹介できません。したがって、これ以上の内容を知りたければ、筆者のもう１つのホームページ｢ハイパーテキスト･マニュアル｣を参照して下さい。ということで、左の画像を使ったこのホームページを例として具体的な記述方法を延べます。
たとえば左の｢ycover00.jpg｣という画像１枚の代わり｢ycover00.jpg｣〜｢ycover11.jpg｣の12枚をランダムに表示する場合、１枚なら<img src='../images/ycover00.jpg'>と記述したところを、
<script language ="JavaScript">
function RandomNumber()
{
var today = new Date();
var num= Math.abs(Math.sin(today.getTime()/1000));
return num;
}
function RandomGraphics()
{
var x = RandomNumber(100);
if (x > .99) {document.write("<img src='../images/ycover00.jpg'>"); return; }
if (x > .90) {document.write("<img src='../images/ycover01.jpg'>"); return; }
if (x > .81) {document.write("<img src='../images/ycover02.jpg'>"); return; }
if (x > .72) {document.write("<img src='../images/ycover03.jpg'>"); return; }
if (x > .63) {document.write("<img src='../images/ycover04.jpg'>"); return; }
if (x > .54) {document.write("<img src='../images/ycover05.jpg'>"); return; }
if (x > .45) {document.write("<img src='../images/ycover06.jpg'>"); return; }
if (x > .36) {document.write("<img src='../images/ycover07.jpg'>"); return; }
if (x > .25) {document.write("<img src='../images/ycover08.jpg'>"); return; }
if (x > .16) {document.write("<img src='../images/ycover09.jpg'>"); return; }
if (x > .08) {document.write("<img src='../images/ycover10.jpg'>"); return; }
if (x > 0) {document.write("<img src='../images/ycover11.jpg'>"); return; }
}
RandomGraphics();
</script>
こう書き替えると、毎回のアクセスでこれら12枚の中から１枚がランダムに選択されます。関数を含むJavaスクリプトの場合、たいがいはＨＴＭＬ文書のヘッダ部と呼ばれる冒頭へ書き込みますが、このスクリプトはその必要がありません。文字通り、文中で画像を指定した部分を書き替えるだけです。もちろん、ランダム表示する画像の枚数は２枚以上なら何枚でもかまわず、もし４枚ならば先の記述例で画像を指定した12行が４行に減ります。
あとは、各行の左側で｢0.99｣から｢0｣まで指定している数値を、４行なら｢0.99｣､｢0.66｣､｢0.33｣､｢0｣の要領で書き込んで下さい。また、わかりやすいよう記述例からは省きましたが、画像からのリンクも指定できます。その場合、document.write()の()内へ｢"<a href='http://server/file'><img src='image file'></a>"｣と、画像の指定された部分をリンク先の<a>タグで挟んで書き込めばいいわけです。
じっさい、このホームページでは12枚の画像すべてが､“ウォールペーパーのダウンロード”ページへリンクされています。画像は12枚もありながらリンク先を統一したのは、それらがランダムに表示されるからです。しかし、逆の発想でランダムなリンク先を活かすページ作りが考えられると思います。ひとつ知恵を絞ってみて下さい。
以上２つのテクニックは“ハリウッド最前線”の随所で使っており、お馴染みのかたも多いでしょう。馴染みがなくもっと実例を見たいかたは、先の“聖林写真館”のほか“世界の軍用ジェット機”や“世界の軍用ヘリコプタ”のフォト･ギャラリーでスライドショーがご覧いただけます。
ランダム画像のほうは先の“Yokochinホームページ”のほか、やはり“世界の軍用ジェット機”や“世界の軍用ヘリコプタ”の各データページが参照いただけます。また､“ハリウッド最前線”全体のホームページでは今月10日に朝日新聞社より発売される拙著｢ハリウッドで成功する方法｣の予告をしておりますが、そこでも２枚のランダム画像を使いました。
最後に少しだけ本来のテーマであるWindowsへ触れておきます。2000からは95以来の｢オープニング･ロゴ｣が使えません。ちょっと淋しい気もしますね！
|
お断り