イメージ 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>
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>
パラメーター
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>
click
省略形
上の例を長く書くと、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">
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