Safari Bildverzerrung bei Bildwechsel

[Yann]

Hallo.
Hoffe bin hier im richtigen Forum....

Habe eine Frage zum Bildwechsel per javascript in Safari.

Folgender prinzipieller Aufbau: Ein Bild in groß, und mehrere Thumbnails über di per klick auf jene das große Bild ausgetauscht wird.

Der Bildertausch erfolgt über eine Funktion die das Bild über
document.GetElementById("change").src = "xxx" ändert.

Das HTML-Aufbau hat folgendes Konstrukt:

<div id="Bild">
<p align="center"><img src="xxx" id="change"></p>
</div>


Per CSS hat das div "Bild" eine feste Größe, padding und margin jeweils "0px"
Weder img, noch die id "change" haben eine (feste) Größenangabe.
body hat für den IE die text-align: center angabe.

DOCTYPE ist HTML 4.01 /almost standards mode


Nun tritt in Safari folgendes Phänomän auf: Beim Bildertausch übernimmt er wohl die Höhen-/Breitenangaben des (zuvor) größeren dargestellen Bildes und stellt das nächste kleinere folglich verzerrt da (wurde getestet durch ein eine alert-Ausgabe der jeweiligen width/height -Angaben - da blieb die Angabe des größten Bildes).
Habe schon versucht nach jeder Zuweisung mittels document.GetElement[....].style die Größenangaben auf "auto" zu setzen, jedoch ohne Erfolg.
DOM scheint er ja prinzipiell zu verstehen, sonst würde das ganze ja nicht laufen.

Konquerer (und auf den basiert Safari wohl) stellt die ganze Geschichte korrekt da, wie auch IE,Firefox,Opera.

Hat jemand eine Idee woran es liegt? Oder zumindest eine Ahnung?
Danke für eure Mithilfe.

 

[Yann]

Safari Bildverzerrung INFO

Für jene die das selbe Problem mit der Bildverzerrung beim Bilderwechsel (Image swap) haben: Bin fündig geworden:

www.quirksmode.org/bugreports/archives/safari/index.html
(weiter unten im Text unter "Image swap resize bug")

und zum Testen:
www.fiddlyio.com/safaribug/

 

[Sir Q]

Schau dir mal den Bildwechsel ein, den ich verwende: http://archimages.de/12.htm

Ist ganz simpel:

<script type="text/javascript" language="javascript">
<!--
function showPic (whichpic)
{
if (document.getElementById)
{
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title)
{
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
}
else
{
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}

return false;
}
else
{
return true;
}
}
-->
</script>

Dann gibt es da noch die HTML-Elemente

<img id="placeholder" src="files/erstes_bild.jpg" alt="" />
<div id="desc">Bildbeschreibung</div>

Der Witz (und was das ganze dann auch Barrierefrei macht) ist der Bild-Wechsel-Link:

<a onclick="return showPic(this)" href="files/bild_1.jpg" title="Beschreibung"><img src="files/thm_bild1.jpg" /></a>
<a onclick="return showPic(this)" href="files/bild_2.jpg" title="Beschreibung"><img src="files/thm_bild2.jpg" /></a>
<a onclick="return showPic(this)" href="files/bild_3.jpg" title="Beschreibung"><img src="files/thm_bild3.jpg" /></a>

Bei einem Click auf das Thumbnail wird das script aufgerufen, das schaut nach dem link und dem titel des hrefs und versucht das bild im bildcontainer (und den titel im entsprechenden DIV) anzuzeigen. Wenn das klappt, wird der link als href nicht ausgeführt, und das Bild wechselt grafisch im browser. Wenn nicht, wird das bild direkt aufgemacht - damit erfüllt es die Maßgaben dern BITV ...

Natürlich kann man das mit der Beschreibung auch weglassen - aber ich find es ganz nützlich - wertet so einen Bildwechsel irgendwie gleich noch auf …

 

[Yann]

Danke für das script.

Das Safari im Falle deiner Beispielseite die Bilder korrekt darstellt liegt wohl daran das die Bilder alle unterschiedliche Größen (sowohl Breite als AUCH Höhe) haben. Ist nur ein Angabe davon unterschiedlich werden sie wohl verzerrt....

 

[mathilda]

erledigt