Hey All,
I am new to javascript and currently coding a site with scripts that
are beyond my level of understanding. The problematic page has
thumbnail images that can be clicked on to zoom in. When clicked, the
preloaded larger image displays in a div layer that gets turned on. The
problem is that ie sometimes does not display the image - the
placeholder just stays blank. The script works fine in firefox and
netscape (haven't tried safari yet). Since I am new to this and this
only happens sporadically, I'm having a lot of trouble identifying the
error or a fix. Also, the src for the images is dynamically created
from the text name that displays below the bags. This is for content
management purposes. Any suggestions you can give would be much
appreciated.
Thanks,
Trent
Here is the link: www.woundedmouse.com/pearson/showroom.html
Here is the pertinent code:
<SCRIPT TYPE="text/javascript">
var nextzoom = 'next'
var prezoom = 'pre'
//Change the name of the bags below. Ex: Replace "Tina 1II" with "Tina
3". Don't forget the quotes.//
var text = new Array (12)
text[0] = "Tina 1II"
text[1] = "Wendy 4F"
text[2] = "Peggy 1T"
text[3] = "Sarah 1E"
text[4] = "Kimberly 4T"
text[5] = "Kimberly 1U"
text[6] = "Kate 1QQ"
text[7] = "Julie 4W"
text[8] = "Julie 1S"
text[9] = "Julie 1J"
text[10] = "Grace 1GG"
text[11] = "Audrey 1SS"
var smbags = new Array (12)
var zoombag = new Array (12)
//displays the text for each bag name
function bagtext(num)
{
return text[num]
}
//splits the name of the bag, appends info, and writes to array
function splitsm(num)
{
for (num=num; num < 12; num++)
{
var x = text[num];
var change = x.toLowerCase();
var temp = new Array();
temp = change.split(' ');
var y = 'images/' +temp[0] + temp[1] + '.jpg';
var z = 'images/' +temp[0] + temp[1] + '_zoom.jpg';
smbags[num] = new Image();
smbags[num].src = y;
window.top.smbags[num] = y;
var zoomtemp = new Array();
zoomtemp[num] = new Image();
zoomtemp[num].src = z;
window.top.zoombag[num] = z;
}
}
//zoom bag preloader
function preloadzoom(){
for (i=0; i<12;i++)
{
zoombag[i]=new Image();
}
//alert(zoombag);
}
//loads small bags in placeholders once their src is identified
function loadbag(num)
{
for (num=num; num <12; num++)
document['slot' +num].src = smbags[num]
//alert(zoombag);
}
//loads larger zoom image into placeholder
function loadzoom(num)
{
document.zoom.src = zoombag[num]
window.top.nextzoom = num+1;
window.top.prezoom = num-1;
}
//turns on div layer that contains zoom placeholder
function bagshow()
{
if(document.layers){
//thisbrowser="NN4";
document.bag.visibility="visible";
}
if(document.all){
//thisbrowser="ie"
document.all.bag.style.visibility="visible";
}
if(!document.all && document.getElementById){
//thisbrowser="NN6";
document.getElementById("bag").style.visibility="v isible";
}
}
//turns off div layer that contains zoom placeholder
function baghide()
{
if(document.layers){
//thisbrowser="NN4";
document.bag.visibility="hidden";
}
if(document.all){
//thisbrowser="ie"
document.all.bag.style.visibility="hidden";
}
if(!document.all && document.getElementById){
//thisbrowser="NN6";
document.getElementById("bag").style.visibility="h idden";
}
}
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src =
changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
about_over = newImage("images/about-over.gif");
styles_over = newImage("images/styles-over.gif");
fabrics_over = newImage("images/fabrics-over.gif");
contact_over = newImage("images/contact-over.gif");
preloadFlag = true;
}
}
// -->
</SCRIPT>
<!-- End Preload Script -->
<link rel="stylesheet" type="text/css" href="master.css">
</HEAD>
<BODY onload="preloadzoom(); splitsm(0); loadbag(0); preloadImages(); "
BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0
background="images/bck01.gif">
<div id="bag" style="width: 100%; height: 100%; visibility:hidden;
position:absolute; left:0px; top:0px" >
<table width="100%" height="100%" valign="middle">
<tr>
<td>
<div align="center">
<table class="bag" bgcolor="white" width="360" height="490">
<tr height="10" valign="middle">
<td style="text-align: center" width="165">
<a class="fbags" href="javascript:void(0)"
onclick="loadzoom(prezoom);">< Pre</a>
</td>
<td style="text-align: center" width="165">
<a class="fbags" href="javascript:void(0)"
onclick="loadzoom(nextzoom);"> Next ></a>
</td>
<td style="text-align: center" width="30">
<a class="fbags" href="javascript:void(0)"
onclick="baghide();">[x]</a></td>
</tr>
<tr height="480">
<td colspan="3" ><img name="zoom" border="0"
src="images/spacer.gif" width="360" height="480">
</td>
</tr>
</table>
</div>
</td>
</tr>
</table></div>
