commodorejim
07-03-2007, 01:19 PM
Hi folks, bit wet behind the ears with Javascript so if anyone can help me out here I'd be grateful.
Basically, on a page I'm developing thumbnail pictures appear on the right-hand side of the page and the main picture appears over on the left. When the user clicks a thumbnail, the picture on the left changes to that thumbnail's full size.
All of that is working fine, but the captions underneath are causing problems. In order to change the picture's caption as well, I've gotten the following code working when embedded in the page and the captions change perfectly.
However, when I place the code in an external file, the captions won't change. I'm guessing it's because the changeIt2() function is invisible to the page, but that's only a (bad) guess. Can anyone offer any suggestions? Thanks in advance for any help.
<script language="javaScript" type="text/javascript">
function changeIt2(objName2)
{
var obj2 = document.getElementById(objName2);
var objId2 = new Array();
objId2[0] = "quote1";
objId2[1] = "quote2";
objId2[2] = "quote3";
objId2[3] = "quote4";
objId2[4] = "quote5";
objId2[5] = "quote6";
objId2[6] = "quote7";
objId2[7] = "quote8";
objId2[8] = "quote9";
objId2[9] = "quote10";
objId2[10] = "quote11";
objId2[11] = "quote12";
objId2[12] = "quote13";
objId2[13] = "quote14";
objId2[14] = "quote15";
objId2[15] = "quote16";
objId2[16] = "quote17";
objId2[17] = "quote18";
objId2[18] = "quote19";
objId2[19] = "quote20";
objId2[20] = "quote21";
objId2[21] = "quote22";
objId2[22] = "quote23";
var j;
for(j=0;j<objId2.length;j++)
{
if(objName2 == objId2[j])
{
obj2.style.display = "block";
}
else
{
tempObj2 = document.getElementById(objId2[j]);
tempObj2.style.display = "none";
}
}
return;
}
</script>
Here's the code on the webpage where I call the changeIt2() function. As I was saying, it works prefectly when the above code is inserted directly into the page but I'd prefer to have an external file.
<div>
<img src="images/characters/brian/cac8.gif" alt="brian marsh 4" onclick="document.swap.src='images/characters/brian/bgp8.jpg'; changeIt2('quote8');" />
</div>
Basically, on a page I'm developing thumbnail pictures appear on the right-hand side of the page and the main picture appears over on the left. When the user clicks a thumbnail, the picture on the left changes to that thumbnail's full size.
All of that is working fine, but the captions underneath are causing problems. In order to change the picture's caption as well, I've gotten the following code working when embedded in the page and the captions change perfectly.
However, when I place the code in an external file, the captions won't change. I'm guessing it's because the changeIt2() function is invisible to the page, but that's only a (bad) guess. Can anyone offer any suggestions? Thanks in advance for any help.
<script language="javaScript" type="text/javascript">
function changeIt2(objName2)
{
var obj2 = document.getElementById(objName2);
var objId2 = new Array();
objId2[0] = "quote1";
objId2[1] = "quote2";
objId2[2] = "quote3";
objId2[3] = "quote4";
objId2[4] = "quote5";
objId2[5] = "quote6";
objId2[6] = "quote7";
objId2[7] = "quote8";
objId2[8] = "quote9";
objId2[9] = "quote10";
objId2[10] = "quote11";
objId2[11] = "quote12";
objId2[12] = "quote13";
objId2[13] = "quote14";
objId2[14] = "quote15";
objId2[15] = "quote16";
objId2[16] = "quote17";
objId2[17] = "quote18";
objId2[18] = "quote19";
objId2[19] = "quote20";
objId2[20] = "quote21";
objId2[21] = "quote22";
objId2[22] = "quote23";
var j;
for(j=0;j<objId2.length;j++)
{
if(objName2 == objId2[j])
{
obj2.style.display = "block";
}
else
{
tempObj2 = document.getElementById(objId2[j]);
tempObj2.style.display = "none";
}
}
return;
}
</script>
Here's the code on the webpage where I call the changeIt2() function. As I was saying, it works prefectly when the above code is inserted directly into the page but I'd prefer to have an external file.
<div>
<img src="images/characters/brian/cac8.gif" alt="brian marsh 4" onclick="document.swap.src='images/characters/brian/bgp8.jpg'; changeIt2('quote8');" />
</div>