第4章　Javascript　画像処理

こんにちは、今回は　第4章　Javascriptをやっていきます。

画像でのせるととても小さくなってしまうので今回は記述するプログラムを載せておきます_(._.)_

<a href="photo.html">
<img src="image/1番.png"alt="サンプル" name="photo1" onmouseover="document.photo1.src='image/A1番.png'"onmouseout="document.photo1.src='image/A3番.png'"></a>
（本来なら改行しないで書きます。）

プログラムの説明
<img src="image/1番.png"alt="サンプル" name="photo1"・・・・・・ >

HTMLのimg要素で画像を挿入

name要素で画像の名前を設定

onmouseover="document.photo1.src='image/A1番.png'"

onmouseoverで指定した画像にマウスが重なったときに、この場合　A1番.pngの画像が表示されるというわけです。

onmouseout="document.photo1.src='image/A2番.png

onmouseoutは離れたときのタイミングでimage/A2番.pngに画像が変わるわけです

画像のURLを変更する
document.画像名.src=画像のURL

++++++++++++++++++++++++++++++++++++++++++++++++

画像のURL変更します。

画像をユーザー操作に応じて入れ替えたり自動的に入れ替えたりするときに使います。画像名はimg要素のname属性で指定します。

起動してみます。

実に美しくありませんねｗｗｗ（個人的にｗｗｗ）

今度はthisを使ってプログラムを短くしてみます。

onmouseover="this.src='image/A1番.png'"

onmouseout="this.src='image/A2番.png

thisは直訳するとこれですがここではimageを指します。

なので、数ページ飛ばして先に一定時間後に表示する方法からやっていきます。

（飛ばした部分はあとで戻るのでご心配なく…・）

では画像を順番に表示していくプログラムをやっていきます。

プログラムはこんな感じになります。

先にプログラムの説明

function A(){

setTimeout("document.three.src='image/A1.png'",1000);

setTimeout("document.three.src='image/A2.png'",3000);

setTimeout("document.three.src='image/A3.png'",6000);

}

関数A　を宣言し　1000ミリ秒後にA1表示という意味です。

表示というよりは今回は色が濃くなるだけですが‥‥

同じく2,3行目も同じです。

onload="A()"

Webページの読み込みが完了したときのタイミングで関数Aが実行されます。

ブラウザがHTMLファイルを読み込んだ時に表示される画像です

一定時間後の処理を実行する
setTimeout(処理、時間);

指定した時間後に処理を実行。時間はミリ秒で指定

ミリ秒
1ミリ秒は　1/1000秒です

onloadを記述できる要素

　onloadは必ずbody要素またはframeset要素に記述

123と順番に色が付くはずです。

ほんとは動画にしようと思ったのですが重くて・・・

では、少し戻って一定時間ごとに画像を入れ替えるプログラムをやっていきます。

プログラムの記述はこんな感じ

Javascript部分

number=1;
function fom(){
　　　 if(number==1){
　　　　　　　　document.katachi.src="image/fom2.png";
　　　　　　　 number==2;
}
else{
document.katachi.src="image/fom1.png";
number==1;
}
}

画像の方

<h1><img src="image/fom1.png"alt=""name="katachi" ><img src="image/logo.gif"alt="" ></h1>
setInterval('fom()',2000)
で、Internet　Explorerでひらいてみると(TeraPadでやりますが・・・）

許可する前にここに注目星のマークが出ています。

許可すると2秒後にこの画像に切り替わるんです。

ここでプログラムの説明

一定時間ごとに処理をする

setInterval(処理、間隔)

指定した時間ごとに処理を繰り返し実行。

間隔はミリ秒で指定

2つじゃ面白みがないのでもう少し増やしてみます。

number=1;
function fom(){
if(number==1){

document.katachi.src="image/fom2.png";
number=2;
}
else if(number==2){
document.katachi.src="image/fom3.png";
number=3;
}
else if(number==3){
document.katachi.src="image/fom4.png";
number=4;
}
else if(number==4){
document.katachi.src="image/fom5.png";
number=5;
}
else if(number==5){
document.katachi.src="image/fom6.png";
number=6;
}
else{
document.katachi.src="image/fom1.png";
number=1;
}
}
ハイ。出来ました。