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>