1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

Safari Bildverzerrung bei Bildwechsel

Dieses Thema im Forum "Browser" wurde erstellt von Yann, 06.09.06.

  1. Yann

    Yann Gast

    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.
     
  2. Yann

    Yann Gast

  3. Sir Q

    Sir Q Rheinischer Winterrambour

    Dabei seit:
    12.04.05
    Beiträge:
    921
    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 …
     
  4. Yann

    Yann Gast

    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....
     
  5. mathilda

    mathilda Leipziger Reinette

    Dabei seit:
    17.02.05
    Beiträge:
    1.787
    erledigt
     

Diese Seite empfehlen