このサイトについて

ホーム

WEB制作支援

WEBデザイン

WEB運営

特集・トピックス

リンク集

Home >> JavaScript >> 画像がクリックされたら画像を入れ替える

画像がクリックされたら画像を入れ替える

IE 4.0↑

NN 3.0↑ (Sample 2は未対応)

オススメ度：

設置難易度：

サンプルと機能

→ Sample 1：クリックされたら画像を入れ替える
→ Sample 2：様々なフィルタを用いて画像を入れ替える

画像がクリックされたら画像を入れ替えます。
フォトアルバムなどを作る場合に有効です。
Sample 2のように入れ替える際にいろんな効果を加えることができます。

サンプルスクリプト

緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

→ Sample 1：クリックされたら画像を入れ替える

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
画像をクリックすると、画像が入れ替わります。<BR><BR>
<A href="JavaScript:changeImage()">
<IMG src="img/img0.jpg" name="img" border="0"></A><BR>
</BODY>
</HTML>

→ Sample 2：様々なフィルタを用いて画像を入れ替える

ソースが長いので、ここでの解説は省略します。
サンプルページより「右クリック」→「ソースの表示」でプログラムを確認できます。

解説・注意点など

入れ替える画像は、必ず1から順にファイル名をつける必要があります。
例の場合は、
img1.jpg,img2.jpg,img3.jpg,img4.jpg
となります。また、その場合に最初に置いておく画像は
img0.jpg
となります。

← JavaScriptに戻る

eWeb