javascript画像切り替えにサイズ指定

質問

何時間探ってもわかりません。。。。
どなたか回答していただけたら幸いです。

下記を参考とても簡単で正常に動きました！
しかし。。。
問題は、画像のサイズを指定したいのですが。。。
どこに挿入したらいいのでしょうか。。？
(現在サイズ指定できていないから画像サイズがばらばら。。)
あらゆる場所に width= height= みたいなタグを
入れてみたのですが。。。入れると、起動しない。。

*********************
表示したい場所に

<IMG SRC="画像ＵＲＬ１(*1)"NAME="SP">
<SCRIPT language="javaScript">
<!--
var NO=1;
img=new Array(5(*2));
img[1]="画像ＵＲＬ１(*3)";
img[2]="画像ＵＲＬ２(*3)";
img[3]="画像ＵＲＬ３(*3)";
img[4]="画像ＵＲＬ４(*3)";
img[5]="画像ＵＲＬ５(*3)";
UP();
function UP(){
setTimeout("UP()",5000(*4));
document.SP.src=img[NO];
NO=NO+1
if(NO>5(*5)){NO=1;}
}
//-->
</SCRIPT>

(*1)－最初から表示されている画像のＵＲＬ
(*2)－切り替わる画像の全体数
(*3)－順番切り替わる画像のＵＲＬ
(*4)－画像の切り替えスピード(単位はミリ秒)
(*5)－一番最後の画像のナンバーを入力します。
******************************
参考:
http://www.devicereign.net/TOP/support/Jscript/S18.html

おまけに、今までは下記のように、
写真に白枠を入れていました。

下記は、三枚の写真が(背景白枠入り)横に並んでいる状況です。
同じ構成で、
この三枚を同時にいくつかの画像と切り替えというのが目的です。
＊これはページの真ん中に配置しているので、
</table>とかは下の方で行っています。

<tr>
<td><div align="center">
<table width="590" border="0" cellspacing="0" cellpadding="0">
<td width="173"><img src="画像1" alt="画像1" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a>
<img src="画像2" alt="画像2" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a>
<img src="画像3" alt="画像3" style="border:1px solid #cccccc; padding:10px" width="173" height="250" border="0"></a>
</tr>

よろしくお願い致します。

回答No.2

rexenaxeonn

同時に画像切り替えはこんな感じでどうでしょう？
画像の数とパスは適宜変更してください。
img1 = ["a.png","b.png","c.png"];
img2 = ["d.png","e.png","f.png"];
img3 = ["g.png","h.png","i.png"];
imgary = null;
selectObj = document.getElementsByTagName('img');
var parents = 'img_';
matchObj= new RegExp(parents);
for(i=1; i <= selectObj.length; i++){
if(selectObj[i] != undefined && selectObj[i].id.match(matchObj)){
while(cnt < selectObj.length){
if(cnt == 1){
imgary = img1;
}else if(cnt == 2){
imgary = img2;
}else if(cnt == 3){
imgary = img3;
}
document.getElementById(parents+cnt).src=imgary[i-1];
document.getElementById(parents+cnt).style="border:1px solid #cccccc; padding:10px";
cnt++;
}
if(cnt >= selectObj.length)cnt=1;
}
}

回答No.1

kosukejlampnet

<SCRIPT language="javaScript">
<!--
var NO=1;
img=new Array(5);
width= new Array(5);
height= new Array(5);
img[1]="画像ＵＲＬ１";
width[1]=100;
height[1]=100;
img[2]="画像ＵＲＬ２";
width[2]=100;
height[2]=100;
img[3]="画像ＵＲＬ３";
width[3]=100;
height[3]=100;
img[4]="画像ＵＲＬ４";
width[4]=100;
height[4]=100;
img[5]="画像ＵＲＬ５";
width[5]=100;
height[5]=100;
UP();
function UP(){
setTimeout("UP()",5000);
document.SP.src=img[NO];
document.SP.width=width[NO];
document.SP.height=height[NO];
NO=NO+1
if(NO>5){NO=1;}
}
//-->
</SCRIPT>

補足

ありがとうございます！！！！
出来ました！

しかし、
あとは。。。

1. このスライドを横に合計三つスライドを並べたいのですが、どうすれば良いでしょうか？
2. alt="" style="border:1px solid #cccccc; padding:10px"とう
縁で囲みたいのですがこれを使用する事は可能ですか？？