top >Javascriptを使って、クリックでめくる画像アルバムの作成
写真画像をマウスでクリックすると、画像を入れ替えるJavascriptをご紹介します。ほんの数行のスクリプトなので、案外簡単に作成できます。少し動的なページにしたい場合に、画像めくりアルバムのようで、おもしろく使用できます。
| Javascriptを使って、クリックでめくる画像アルバムの作成方法 |
PHPを使って、クリックでめくる画像アルバムの作成 については、先に紹介しました。
PHPのアルバムとは異なりますが、今回はJavascriptを用いた画像めくりアルバムを紹介します。
ここでもはじめに、目指す完成物「上海にある観光トンネル」を下に示しておきます。
画像をクリックしてください
画像をマウスでクリックすると、次の画像に入れ替わります。
一周すると、元の画像に戻るようにしています。
ちなみに写真は、中国上海の外灘（ワイタン）にある観光トンネルです。
全長は646.7ｍ、黄浦江の河底トンネルで、
南京東路バンドの外灘地域と、浦東東方明珠塔がある浦東新区陸家嘴地域とを結びます。
自動無人運転制御システム（SKシステム)により、約５分間の光の演出の後、川の向こう岸に到着します。
話がそれましたが、Javascriptの作り方です。
１．連番名の画像を用意します。
今回の画像名は、0.jpg〜6.jpgとしました。
２．Javascriptのスクリプト内容を含むHTMLは、以下のとおりです。
<html>
<head><title>Javascript.html</title>
<script type="text/javascript"><!--
n=0;
function next(){
n++;
n%=7;
document.tunnelimg.src=n+".jpg";
}
// -->
</script>
</head>
<body>
<A href="JavaScript:next()">
<img src="0.jpg" name="tunnelimg" border="0">
</A>
</body>
</html>
画像名は、0.jpg〜6.jpgとしてあるので、クリックするごとに１を加算した画像名が出力される仕組みです。
なお、画像名を0.jpgから始めることで、n%=7 と、剰余を用いた繰返しが可能になっています。
img src="0.jpg" では、最初の画像を指定しています。
紹介した事項により生じた不都合などには責任は負えませんので、くれぐれも自己責任でお願いします。
|
