- 画像 -

imageプロパティ

imageオブジェクトは、ドキュメント内に＜img＞で埋め込まれている画像を表す。 imagesプロパティから利用できる。 imagesプロパティは連想配列です。

src ducument.images[0].src; 画像のURLを参照・設定する
name ducument.images[0].name; 画像の名前を参照・設定する
vspace ducument.images[0].vspace=20; テキストと画像の上下の間隔を参照する
hspace ducument.images[0].hspace=20; テキストと画像の左右の間隔を参照する
border 画像の枠線の幅を参照する
complete 画像の読み込みが完了したかを参照する 

<script type="text/javascript">
	a = document.images[0].src; //formのelements[0]と同じ。
	nameが指定されている時は、そっちを指定しても大丈夫！
	document.write(a); //0番目の画像がどの場所にあるか参照出来る
</script>

＜＜結果＞＞
file:///C:/Documents%20and%20Settings/内田千春/デスクトップ/JavaScript/img/img00.jpg



<script type="text/javascript">
if(document.images[1].complete){
//completeはすべての画像の読み込みが完了したら処理を開始したいときに使う
	alert("読み込み完了！");
}
</script>
▲このページのTOPに戻る▲

aタグと関数を使う


＜＜JavaScript＞＞
<script type="text/javascript">
num = 4; // 入れ替える画像の枚数(最初の画像も含める)
nme = "img/img0" // 画像のディレクトリとファイル名の数字と拡張子より前の部分
exp = "jpg" // 拡張子
cnt = 0;

function change() {
	cnt++;
	cnt %= num;
	document.img.src = nme + cnt + "." + exp;
}
</script>

---------------------------------------------------

＜＜HTML＞＞
<a href="JavaScript:change()"><img src="img/img00.jpg" name="img" border="0"></a>

↓サンプル

サンプル

■最新の画像の入れ替え


＜＜JavaScript＞＞
<script type="text/javascript">
	kazu = 4; //1枚少ない総数。0を含むので
	count = kazu;
	num = --count; //countに1引いた数をnumへ代入

	function ChangeIMG(){
		if(num==0){ //画像ナンバーが0になったら、
			document.myIMG.src="img/img00.jpg";
			count = kazu+1; //数をクリア（初めの画像から表示させる）
		}else{
			document.myIMG.src="img/img0"+num+".jpg";
		}
		num = --count; //数をどんどん減算していく
	}
</script>

---------------------------------------------------

＜＜HTML＞＞
<a href="javascript:ChangeIMG()"><img src="img/img04.jpg" 
width="172" height="172" name="myIMG" id="myIMG" alt="サンプル" /></a>

↓サンプル

サンプル