Thread: Swatch image swap problem in Firefox

I am having a glitch getting the swatch image to change the medium product image in Firefox. The larger image pops up, but the
i am using ML 8, I let the program automatically create the smaller images and swatch from the larger image. All images are identical sizes saved from the same photoshop file and proportioned 800x600, 400x300, 100x75 and so on.

It works in IE except that there is an extra line of space between the swatch and product that closes up when the you start swapping images.

As far as I know I am using default settings.
Here is the product image display code generated for the web page taken from the page source.

Code:

<div id="divProductPic24">
<img border="0" id="ProductPic24" name="ProductPic24" style="cursor:hand;cursor:pointer;" onClick="popuplarge_24()" alt="Click here to view larger image" src="images/Product/medium/24.jpg" /></div>
<map Name="SwatchMap"><area href="#" onClick="setcolorpic_24('')" shape="rect" coords="-1, -1, 40, 30"><area href="#" onClick="setcolorpic_24('Desert Tan')" shape="rect" coords="39, -1, 80, 30"><area href="#" onClick="setcolorpic_24('Olive Drab')" shape="rect" coords="79, -1, 120, 30"><area href="#" onClick="setcolorpic_24('Gray')" shape="rect" coords="119, -1, 160, 30"><area href="#" onClick="setcolorpic_24('Black')" shape="rect" coords="159, -1, 200, 30"><area href="#" onClick="setcolorpic_24('Earth')" shape="rect" coords="199, -1, 240, 30"></map><br/><img border="0" src="images/spacer.gif" width="1" height="4"><br/>
<img border="0" style="cursor:hand;cursor:pointer;" src="images/Product/swatch/24.jpg" usemap="#SwatchMap" border="0" /><br/>
<img border="0" src="images/spacer.gif" width="1" height="4" /><br/><div align="center"><a href="javascript:void(0);" onClick="popuplarge_24();">
<img border="0" src="images/showlarger.gif" align="absmiddle" border="0" alt="Click here to view larger image"></a></div><br/>

One oddity in the swatch and "showlarger.gif" images code is that border="0" is inserted twice in the image tag. That doesn't look like it would be related.

Is there some reason the image swap might not work in Firefox or that the space would change between the swatch and product picture?

It looks to me like the AspDotNetStorefront program puts a line break in after the non-displaying image map.

Code:

<map Name="SwatchMap"><area href="#" onClick="setcolorpic_24('')" shape="rect" coords="-1, -1, 40, 30"><area href="#" onClick="setcolorpic_24('Desert Tan')" shape="rect" coords="39, -1, 80, 30"><area href="#" onClick="setcolorpic_24('Olive Drab')" shape="rect" coords="79, -1, 120, 30"><area href="#" onClick="setcolorpic_24('Gray')" shape="rect" coords="119, -1, 160, 30"><area href="#" onClick="setcolorpic_24('Black')" shape="rect" coords="159, -1, 200, 30"><area href="#" onClick="setcolorpic_24('Earth')" shape="rect" coords="199, -1, 240, 30"></map><br/>

And then inserts a 4 pixel spacer, so when the product loads it has one line plus 4 pixels space between the product image and the swatch.
That line break is unnecessary.

Is it possible for AspDotNet to NOT put a line break after the image map so it will not push the layout down, then close the space when the swatch is clicked?

After the picture displays is the non-displaying image map followed by an unecssary line break that forces down the swatch image.

This is ML8, using kit product template.
thanks!

Did you ever get this fixed?

Seems like an issue with the users end, tested on our local copies and there is no line breaks appears below on the swatch images. Please submit ticket to support and one of our Support Engineers may assist you regarding this matter.

It is an issue with ML 8.0 when Zoomify is enabled. Turning off configs for zoomify eliminates problem. Supports says updates after 8.0 resolve the issue.