IE.6 shows blank images sporadically

T

Trent

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=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="visible";

}
}

//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="hidden";

}
}

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].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>
 
J

Jeroen Brattinga

I've tried your page in Firefox and IE6 ... Firefox works fine, but in
IE6 some bags don't show up at all in the zoom (particulary the first
6 bags at the top), some bags sometimes show up partly in the zoom
(after some more clicking these bags show up completely) and some bags
always show up completely (particularly the bags at the bottom).

I did find one thing that doesn't look right in your code:

In the splitsm function you preload the smbags images array (works
OK), and you preload the zoomtemp images array (why zoomTEMP and not
zoomBAG?). The preloadzoom function doesn't do any preloading at all
(it just creates an array with empty images)

So, to make it work properly you could:

- change these lines ...
var zoomtemp = new Array();
zoomtemp[num] = new Image();
zoomtemp[num].src = z;
....to
zoombag = new Array();
zoombag[num] = new Image();
zoombag[num].src = z;

- kill the preloadzoom function (it doesn't do anything; don't forget
to remove it from the body onload event too!)

I'm also wondering what these lines should do:
-> window.top.smbags[num] = y;
-> window.top.zoombag[num] = z;

As far as I can tell these lines can be safely removed too.

Oh, and there's a small bug in your loadzoom function:

What if somebody zoomed in on the first image and pressed the Prev
link (or zoomed in on the last image and pressed the Next link)?

To avoid these situations change the code as follows:

function loadzoom(num)
{
// check if there is a next image, if not use the first image
var next = (num < (zoombag.length - 1) ? (num + 1) : 0);
// check if there is a prev image, if not use the last image
var prev = (num > 0 ? (num - 1) : (zoombag.length - 1));

document.zoom.src = zoombag[num]
window.top.nextzoom = next;
window.top.prezoom = prev;
}

This will link the first Prev to the last image and the last Next to
the first image (this could also be done by using if { .. }
statements, the (A ? B : C) is just shorthand for if A (is true) then
B else C.

The first line could also be written as
if (num < zoombag.length - 1)
var next = num + 1;
else
var next = 0;

Last (but not least) the loop you use in the splitsm function should
be written as

for (num = 0; num < 12; num++)

(start with num at 0 and loop until num is 12 or more)


Nice website by the way!


Kind regards,

Jeroen Brattinga
 
T

Trent

Thanks for the reply Jeroen - I really appreciate your help. I'll let
you know the outcome.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Only one table shows up with the information 2
Flip-Cards with Local Images 1
Image not changing between "mute" & "un-mute" images. 5
JQuery - Preloading Images 0
Having difficulty with the layout of these images / video for this web page 2
Help with code 0
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 67 (members: 1, guests: 66)
Robots: 557

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,738
Latest member
JinaMacvit

Latest Threads

Top