Image Swap Issues

[frontpagecustoms.com]

i'm programming a site that will have a behavior function on an image
(image swap). The tricky part is that the swapped image is a
different size than the original. When I use the preview feature in
FP2003 it looks great, however on the published site it keeps the
images the same dimension.

Here's the swap code sample:

<img border="0" src="images/IconNavigation/IconMasters/
IconNavigation_01.gif" id="img11" onmouseout="FP_swapImgRestore()"
onmouseover="FP_swapImg(1,1,/*id*/'img11',/*url*/'images/
IconNavigation/IconRollover/IconRoll_01.gif')">



You can see the "width" and "height" tags have been removed. When I
removed these it started working in the preview, however it's still
not working in the live version

I've tested in FireFox, IE7, and Safari.

Any Ideas????

 

[Murray]

Any Ideas????

Yes - you have several choices -

1. Make both images the same size by adding canvas to the smaller image
rather than by decreasing the size of the larger one.
2. Remove the dimensions altogether from the trigger image, as you have
done. It *will* work in the live version, although it can make your page
'wiggle' as the browser adjusts the layout to accommodate the larger image.
3. Abandon the image swap method altogether, and use a show/hide behavior
to reveal a previously hidden container which contains the larger image. In
this case, mousing over the trigger image will show the hidden container,
and mousing off the newly revealed image will hide the newly revealed
container.

 

[frontpagecustoms.com]

Yes - you have several choices -

1. Make both images the same size by adding canvas to the smaller image
rather than by decreasing the size of the larger one.
2. Remove the dimensions altogether from the trigger image, as you have
done. It *will* work in the live version, although it can make your page
'wiggle' as the browser adjusts the layout to accommodate the larger image.
3. Abandon the image swap method altogether, and use a show/hide behavior
to reveal a previously hidden container which contains the larger image. In
this case, mousing over the trigger image will show the hidden container,
and mousing off the newly revealed image will hide the newly revealed
container.

HMMM, the show/hide behavior seems like it has potential, however
this is something new to me. Is that part of the Format>Behaviors
feature?

 

[Murray]

I forget - you may have to use the change properties behavior instead. In
that case you would just change the visibility property from hidden to
visible, and back.

 

[frontpagecustoms.com]

I forget - you may have to use the change properties behavior instead. In
that case you would just change the visibility property from hidden to
visible, and back.

And how do I accomplish that?

 

[Murray]

And how do I accomplish that?

Try it. You'll see.

Select the trigger and apply the behavior. Follow the dialog to select the
hidden div, and change its visibility to visible. Use onmouseover as the
event. Apply the onmouseout to hide the div to the image in the div.