PDA

Click to See Complete Forum and Search --> : Help!!

DGibbs
06-25-2003, 07:24 AM
I'm making an attempt to rotate 3 sets of pictures (aligned left, center and align right) with 3 pictures in each set (total of 9 pics). I have found a script that will rotate 1 set of pics, but cannot figure out how to do 3 sets side-by-side. Can anyone help me? .. or send me to a site where I can view the script to see how it's done?? I thank you in advance!!
SlankenOgen
06-25-2003, 07:47 AM
var A = new Array("a.jpg","b.jpg","c.jpg");

var B = new Array("m.jpg","n.jpg","o.jpg");

var C = new Array("x.jpg","y.jpg","z.jpg");

var lgnA = A.length;
var lgnB = B.length;
var lgnC = C.length;
cntrA = -1;
cntrB = -1;
cntrC = -1;

function rotPicsA()
{
document.myPic.src = A[++cntrA%lgnA];
}

function rotPicsB()
{
document.myPic.src = B[++cntrB%lgnB];
}

function rotPicsC()
{
document.myPic.src = C[++cntrC%lgnC];
}

~mgb
SlankenOgen
06-25-2003, 08:11 AM
Or a combination of both approaches-

<script type="text/javascript">

var A = new Array("a.jpg","b.jpg","c.jpg");

var B = new Array("m.jpg","n.jpg","o.jpg");

var C = new Array("x.jpg","y.jpg","z.jpg");

var lgnA = A.length;
var lgnB = B.length;
var lgnC = C.length;
cntrA = -1;
cntrB = -1;
cntrC = -1;

function rotPics(picStrip)
{
switch (picStrip)
{
case "B":
document.myPicB.src = B[++cntrB%lgnB];
break;
case "C":
document.myPicC.src = C[++cntrC%lgnC];
break;
default:
document.myPicA.src = A[++cntrA%lgnA];
}
}


</SCRIPT>
</head>

<body>

<a href ="#" onclick="rotPics('A')">Change A</a>
<a href ="#" onclick="rotPics('B')">Change B</a>
<a href ="#" onclick="rotPics('C')">Change C</a>

</body>
</html>
DGibbs
06-25-2003, 08:30 AM
<script language="JavaScript" type="text/javascript">
<!--//
function imgRotation(grp) {
var fn = grp["imgLeft"].src.substr(grp["imgLeft"].src.lastIndexOf("/")+1);
switch (fn) {
case "Pics/sailboat.jpg":
grp["imgLeft"].src = "Pics/burnboat.jpg";
break;
case "leftB.gif":
grp["imgLeft"].src = "Pics/crew1.jpg";
break;
default:
grp["imgLeft"].src = "Pics/sailboat.jpg";
}
fn = grp["imgCenter"].src.substr(grp["imgLeft"].src.lastIndexOf("/")+1);
switch (fn) {
case "Pics/crew2.jpg":
grp["imgCenter"].src = "Pics/eagle.jpg";
break;
case "centerC.gif":
grp["imgCenter"].src = "Pics/radioman.jpg";
break;
default:
grp["imgCenter"].src = "Pics/crew2.jpg";
}
fn = grp["imgRight"].src.substr(grp["imgLeft"].src.lastIndexOf("/")+1);
switch (fn) {
case "Pics/crew3.jpg":
grp["imgRight"].src = "../images/rightA.gif";
break;
case "rightA.gif":
grp["imgRight"].src = "../images/rightB.gif";
break;
default:
grp["imgRight"].src = "Pics/crew3.jpg";
}
window.setTimeout("imgRotation(document.images)", 2000);
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onload="imgRotation(document.images)">

<table width="100%">
<tr>
<td align="left">
<img name="imgLeft" src="Pics/sailboat.jpg"
border="0" width="150" height="200">
</td>
<td align="center">
<img name="imgCenter" src="Pics/crew2.jpg"
border="0" width="150" height="200">
</td>
<td align="right">
<img name="imgRight" src="Pics/crew3.jpg"
border="0" width="150" height="200">
</td>
</tr>
</table>

This is what I have ... the pics are showing up, but are not rotating. What did I do wrong??? You guys are just awesome giving me a hand with this!!!!
SlankenOgen
06-25-2003, 08:43 AM
case "Pics/sailboat.jpg":

should be

case "sailboat.jpg":

since fn only stores the image name:

var fn = grp["imgLeft"].src.substr(grp["imgLeft"].src.lastIndexOf("/")+1);

Likewise with the other names.

~mgb
DGibbs
06-25-2003, 09:02 AM
OK...I'm getting there. This is what I have now. The left image is rotating, the center is only displaying 2 pics and not the 3rd.

<script language="JavaScript" type="text/javascript">
<!--//
function imgRotation(grp) {
var fn = grp["imgLeft"].src.substr(grp["imgLeft"].src.lastIndexOf("/")+1);
switch (fn) {
case "sailboat.jpg":
grp["imgLeft"].src = "Pics/burnboat.jpg";
break;
case "burnboat.jpg":
grp["imgLeft"].src = "Pics/crew1.jpg";
break;
default:
grp["imgLeft"].src = "Pics/sailboat.jpg";
}
fn = grp["imgCenter"].src.substr(grp["imgLeft"].src.lastIndexOf("/")+1);
switch (fn) {
case "crew2.jpg":
grp["imgCenter"].src = "Pics/eagle.jpg";
break;
case "eagle.jpg":
grp["imgCenter"].src = "Pics/radioman.jpg";
break;
default:
grp["imgCenter"].src = "Pics/crew2.jpg";
}
fn = grp["imgRight"].src.substr(grp["imgLeft"].src.lastIndexOf("/")+1);
switch (fn) {
case "crew3.jpg":
grp["imgRight"].src = "../images/rightA.gif";
break;
case "rightA.gif":
grp["imgRight"].src = "../images/rightB.gif";
break;
default:
grp["imgRight"].src = "Pics/crew3.jpg";
}
window.setTimeout("imgRotation(document.images)", 4000);
}
//-->
</script>
DGibbs
06-26-2003, 05:53 AM
Many thanks!! I got it to work!! You guys are just plain AWESOME!!