TOP /すぐに使えるJavaScript 画像の入れ替えY(IE5〜、NN6〜)
















<script type="text/javascript"><!--
chimg=new Array("01.jpg","02.jpg","03.jpg");    //入れ替える画像を増やすことも出来ます
//増やす場合は("ファイル名","ファイル名","ファイル名","ファイル名")のように増やします
imgl="50%";                  //表示位置(横)%指定も可(%指定時は""で囲む)
imgt=70;                     //表示位置(縦)
imgw=300;                    //画像幅
imgh=225;                    //画像高さ
nostop=1;                    //クリックで入れ替えるときは0
stsec=3000;                  //入れ替えるときの時間(ミリ秒)
//-----------------------------------------------------------
if((imgl+" ").indexOf("%")!=-1){
imgl=(imgl).replace("%","")-0;
im=(document.body.clientWidth-imgw)/100*imgl;
imgl=(im<0)?10:im;
}
prImg= new Array();
for(i=0;i<chimg.length;i++){
prImg[i]=new Image();
prImg[i].src=chimg[i];}
imgto=1;
oc=(nostop)?"":"onclick='imgchange()'";
alttext=(nostop)?"":"クリックしてください";
document.write("<img src='"+chimg[0]+"'id='IMG1'style='position:absolute;");
document.write("left:"+imgl+";top:"+imgt+";clip:rect(0 "+imgw/2+"px "+imgh+"px 0);'>");
document.write("<img src='"+chimg[1]+"'id='IMG3'"+oc+"alt='"+alttext+"'style='position:absolute;");
document.write("left:"+imgl+";top:"+imgt+";clip:rect(0 "+imgw+"px "+imgh+"px "+imgw/2+"px);'>");
document.write("<img src='"+chimg[0]+"'id='IMG2'"+oc+"alt='"+alttext+"'style='position:absolute;");
document.write("left:"+imgl+";top:"+imgt+";clip:rect(0 "+imgw+"px "+imgh+"px "+imgw/2+"px);'>");

w=0;IMGw=imgw;flag=0;
function imgchange(){
if(IMGw==5 && !flag){
document.images.IMG2.src=prImg[imgto].src;
flag=1;
}
if(IMGw==imgw && flag){
imgto++;imgto%=chimg.length;
document.images.IMG3.src=prImg[imgto].src;
flag=0;
}
if(!flag){
IMGw=imgw-w;
Rclip=imgw-w;
Lclip=imgw/2-w/2;
Lposition=imgl+w/2;
w+=5;
}else{
IMGw=imgw-w;
Rclip=imgw/2-w/2+1;
Lclip=0;
Lposition=imgl+w/2;
w-=5;
if(!w)document.images.IMG1.src=prImg[imgto].src;
}
document.images.IMG2.style.width= IMGw;
document.images.IMG2.style.height= imgh;
document.images.IMG2.style.clip = "rect(0 "+Rclip+"px "+imgh+"px "+Lclip+"px)";
document.images.IMG2.style.left= Lposition;
if(IMGw==imgw && flag){
if(nostop)setTimeout("imgchange()",stsec);
}else{
setTimeout("imgchange()",50);
}}
if(nostop)setTimeout("imgchange()",stsec);/*himajin.moo.jp*/
// --></script>