Javascript to fix Safari image distortion bug

[anubia]

I have a photo page that swaps out images and captions when a thumbnail is
clicked. The javascript is in an external file and reads as follows:

function showPhoto (whichPhoto) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichPhoto.href;
if (whichPhoto.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichPhoto.title;
}
else {
document.getElementById('desc').childNodes[0].nodeValue =
whichPhoto.childNodes[0].nodeValue;
}
return false;
}
else {
return true;
}
}

There's a known bug in Safari that distorts the swapped image if either the
width or height are the same. Someone suggested I add some script to swap a
single-pixel image before swapping in the actual image. How do I incorporate
that into my code?

Also, it swaps in the captions ('desc') awkwardly in Safari. The captions are
supposed to be centered; instead, each starts at the place where the first
caption is positioned. Can I overcome this? If not, I can live with it.

[Murray *TMM*]

> There's a known bug in Safari that distorts the swapped image if either

> the
> width or height are the same.

What? Do you have a reference to this? Did you mean to say "...height are
NOT the same."?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"anubia" <webforumsuser@macromedia.com> wrote in message
news:do5skc$bhu$1@forums.macromedia.com...

>I have a photo page that swaps out images and captions when a thumbnail is
> clicked. The javascript is in an external file and reads as follows:
>
> function showPhoto (whichPhoto) {
> if (document.getElementById) {
> document.getElementById('placeholder').src = whichPhoto.href;
> if (whichPhoto.title) {
> document.getElementById('desc').childNodes[0].nodeValue =
> whichPhoto.title;
> }
> else {
> document.getElementById('desc').childNodes[0].nodeValue =
> whichPhoto.childNodes[0].nodeValue;
> }
> return false;
> }
> else {
> return true;
> }
> }
>
> There's a known bug in Safari that distorts the swapped image if either
> the
> width or height are the same. Someone suggested I add some script to swap
> a
> single-pixel image before swapping in the actual image. How do I
> incorporate
> that into my code?
>
> Also, it swaps in the captions ('desc') awkwardly in Safari. The captions
> are
> supposed to be centered; instead, each starts at the place where the first
> caption is positioned. Can I overcome this? If not, I can live with it.
>

[anubia]

The bug report may be found here:

[url]http://www.quirksmode.org/bugreports/archives/2005/03/Safari_Image_src_swap_resi[/url]
ze_bug.html

If one of the two dimensions is the same, the image distorts. Only if BOTH the
width and height are different do the images render properly in Safari. Their
solution was to have a single-pixel image load first before the actual image,
thus insuring that the widths and heights would be different. I don't know how
to shoehorn their solution into the code I have.

[Murray *TMM*]

I don't believe it. I do image swaps with images that have identically
sized dimensions and they do not distort.

Here is what that link says -
When swapping images with javascript Safari will stretch the new image to
the size of the previous image, unless the previous and new images have
different widths AND heights.

So - are you swapping an image with one width/height with another with a
different width/height? In that case the incoming image will *always* be
distorted in all browsers to match the dimensions of the original image.

If you want to swap two differently sized images, you can do this many ways
ways -



1. Don't use swap image - use Show/Hide layer instead. Have the alternate
image in a hidden layer that is shown when the trigger is 'tickled'. Using
this method you can have images that are any dimension.



2. Use swap image, but remove the dimensions from the original image's tag,
i.e., change this -



<img name="original" width="150" height="220" ...



to this -



<img name="original" ...



Now when you swap in your offsize image, there is no predefined size to
change it to. Be aware that this method may well result in an unpleasant
and undesirable 'rearrangement' of your page layout as it adjusts to your
new image's dimensions.



3. Pad the smaller image with canvas background color on all sides so that
all the images *are the same size*.



4. Use a SetTextofLayer behavior to change the image reference in a layer
positioned so that it will show the desired larger image in the proper
place.



5. Use the PVII ShowPic extension - [url]http://www.projectseven.com/[/url]



Take your pick....


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"anubia" <webforumsuser@macromedia.com> wrote in message
news:do8eo5$6la$1@forums.macromedia.com...

> The bug report may be found here:
>
> [url]http://www.quirksmode.org/bugreports/archives/2005/03/Safari_Image_src_swap_resi[/url]
> ze_bug.html
>
> If one of the two dimensions is the same, the image distorts. Only if BOTH
> the
> width and height are different do the images render properly in Safari.
> Their
> solution was to have a single-pixel image load first before the actual
> image,
> thus insuring that the widths and heights would be different. I don't know
> how
> to shoehorn their solution into the code I have.
>

[anubia]

Murray wrote:
"So - are you swapping an image with one width/height with another with a
different width/height? In that case the incoming image will *always* be
distorted in all browsers to match the dimensions of the original image."

Not so, Murray TMM. The code (which, by the way, I got from
[url]www.alistapart.com/articles/imagegallery[/url]) works fine. Apparently the trick is
to not set the width and height of the placeholder element. You can see it in
action at [url]http://www.slipperypeople.com/p_cdrelease.html[/url] and
[url]http://www.slipperypeople.com/p_berkeley04.html[/url]. It's made my life soooo much
easier.

It's only because of the known bug in Sarari that it doesn't behave properly.
Quirksmode
([url]http://www.quirksmode.org/bugreports/archives/2005/03/Safari_Image_src_swap_res[/url]
ize_bug.html) offers a workaround, but I don't know how to implement it into my
existing code. Safari also does the funky caption placement. HELP.

[Murray *TMM*]

Apologies. I didn't understand what you were saying. I can see what you
are describing here -

[url]http://www.murraytestsite.com/swapimagesizetest.html[/url]

Note that the "home" image has no dimensions specified (it's 95px tall).
This allows a swap with the red image to occur without distorting the red
image. But then the restore of the original image causes it to be
distorted.

The solution is to make the second image NOT be 95px tall (consider 94px as
a good compromise) - see the second link on that page for an example.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================


"anubia" <webforumsuser@macromedia.com> wrote in message
news:do9kdq$3p4$1@forums.macromedia.com...

> Murray wrote:
> "So - are you swapping an image with one width/height with another with a
> different width/height? In that case the incoming image will *always* be
> distorted in all browsers to match the dimensions of the original image."
>
> Not so, Murray TMM. The code (which, by the way, I got from
> [url]www.alistapart.com/articles/imagegallery[/url]) works fine. Apparently the trick
> is
> to not set the width and height of the placeholder element. You can see it
> in
> action at [url]http://www.slipperypeople.com/p_cdrelease.html[/url] and
> [url]http://www.slipperypeople.com/p_berkeley04.html[/url]. It's made my life soooo
> much
> easier.
>
> It's only because of the known bug in Sarari that it doesn't behave
> properly.
> Quirksmode
> ([url]http://www.quirksmode.org/bugreports/archives/2005/03/Safari_Image_src_swap_res[/url]
> ize_bug.html) offers a workaround, but I don't know how to implement it
> into my
> existing code. Safari also does the funky caption placement. HELP.
>