イメージ IMG

イメージを入れ替える方法を紹介します。

イメージを替える

<IMG>で表示しておいたイメージを替えるには、
document.images.画像名.src="ファイル名" または、
document.画像名.src="ファイル名"
です。画像名は、IMGの属性NAMEでの名前です。

一度だけチェンジします。

<div>
<img src="anime/cat_1.png" width="32" height="32" alt="Neko" name="cat">
<button onclick="document.images.cat.src='anime/cat_2.png'">change</button>
</div>
Neko

2枚の画像を切り替えてます。
あらかじめcats=trueとしてあるので、if (cats) で、実行します。cats=!catsで、trueとfalseを入れ替えてます。onMousemoveで、マウスを動かすと変化するようにしてます。

<SCRIPT type="text/javascript">
<!--
cats=true;
function change(){
if (cats) document.images.catn.src="anime/cat_1.png";
else document.images.catn.src="anime/cat_2.png";
cats=!cats;}
// -->
</script>
<div>
<img src="anime/cat_1.png" width="32" height="32" alt="Neko" name="catn">
<button onMousemove="change()">Let's dance</button>
</div>
Neko

パラメーター

imageの情報です。
document.imageの名前.src等
です。src="ファイル名"で、入れかえられます。nameは名前。width,heightは、幅、高さ、hspace,vspaceで、縦、横の余白、borderで、線です。

<SCRIPT type="text/javascript">
<!--
catsize=32;
function big(){
catsize+=2;
document.bigcat.height=catsize;
document.bigcat.width=catsize;
if (catsize==240) catsize=32;
}
// -->
</script>
<div>
<img src="anime/cat_1.png" width="32" height="32" alt="Neko" name="bigcat" onClick="big()">click
</div>
Nekoclick

省略形

上の例を長く書くと、window.document.bigcat.heightになります。短くbigcat.heightだと、IEでは動くけどNetscape6だと動きませんでした。

読みこみ new Image

あらかじめ画像データを読み込んでおくことにより、パッと表示できます。
変数=new Image(幅,高さ)
変数.src="ファイル名"
この2つはセットで使います。(幅,高さ)は省略してもいいです。

チェック document.images

document.imagesで、イメージオブジェクトが使えるかどうかをチェックできます。

<SCRIPT type="text/javascript">
<!--
if (document.images) {cx=new Image; cx.src="anime/cat_1.png";} else cx="";
-->
</SCRIPT>
<img src="anime/cat_2.png" name="cat4" alt="neko" onclick="document.images.cat4.src=cx.src" width="32" height="32">
neko

images[ ]

イメージは、表示した順番に、images[0],images[1]......というふうに設定されます。

<script type="text/javascript">
<!--
for (j=0; j<100; j++){
document.write("<img src='anime/cat_1.png' alt='ねこ'>")
}
-->
</script>
<button onClick="nl=images.length-1; for (i=nl; i>nl-100; i-=2){document.images[i].src='anime/cat_2.png'}">猫チェンジ</button>

この例が冒頭なら、for(i=0; i<100; i+=2)でも、いいのだけど、最後に持ってきてるので、配列の数を知る.lengthを使ってます。

イメージがimages[ ]になるように、フォームも、form[ ]になってます。

Next : 次のステップへ
Pre  : 前のステップへ
 Up  : JavaScriptに戻る
Home : ホームに戻る

Presented by Rei

PC用眼鏡【管理人も使ってますがマジで疲れません】 解約手数料0円【あしたでんき】 Yahoo 楽天 NTT-X Store

無料ホームページ 無料のクレジットカード 海外格安航空券 ふるさと納税 海外旅行保険が無料! 海外ホテル