backgroundImage mit JS ersetzen klappt NUR im Safari und Shiira nicht !?? (Mit Kuchen

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von koli.bri, 27.03.2007.

  1. koli.bri

    koli.bri Thread Starter Gast

    hallo.

    Safari stellt mir ein Rätsel...
    Folgende Code-Blöcke, die Relevant sind:

    einmal eine HTML-Tabelle, in der jede Zelle ein Hintergrund-bild via CSS hat, sowie als Inhalt ein Bild.
    Jede Zelle und Jedes bild sind via ID eindeutig ansprechbar:
    PHP:
    <table border="1" style="border-collapse:collapse;">
        <
    tr>
            <
    td id="maptd_001262d788f5b3e22f2f083a2bc0b6c4bd" style="background-image:url(img/maps/testbg/15.png);width:30px;height:30px;margin:0px;padding:0px;border:1px dotted darkblue;">
                <
    img id="mapimg_001262d788f5b3e22f2f083a2bc0b6c4bd" src="img/leer0.png" style="width:30px;height:30px;">
            </
    td>
            <
    td id="maptd_011262d788f5b3e22f2f083a2bc0b6c4bd" style="background-image:url(img/maps/testevent/0.png);width:30px;height:30px;margin:0px;padding:0px;border:1px dotted darkblue;">
                <
    img id="mapimg_011262d788f5b3e22f2f083a2bc0b6c4bd" src="img/leer0.png" style="width:30px;height:30px;">
            </
    td>
        </
    tr>
        <
    tr>
            <
    td id="maptd_101262d788f5b3e22f2f083a2bc0b6c4bd" style="background-image:url(img/maps/testevent/15.png);width:30px;height:30px;margin:0px;padding:0px;border:1px dotted darkblue;">
                <
    img id="mapimg_101262d788f5b3e22f2f083a2bc0b6c4bd" src="img/maps/testevent/30.png" style="width:30px;height:30px;">
            </
    td>
            <
    td id="maptd_111262d788f5b3e22f2f083a2bc0b6c4bd" style="background-image:url(img/leer0.png);width:30px;height:30px;margin:0px;padding:0px;border:1px dotted darkblue;">
                <
    img id="mapimg_111262d788f5b3e22f2f083a2bc0b6c4bd" src="img/maps/testheld/30.png" style="width:30px;height:30px;">
            </
    td>
        </
    tr>
        <
    tr>
            <
    td id="maptd_201262d788f5b3e22f2f083a2bc0b6c4bd" style="background-image:url(img/leer0.png);width:30px;height:30px;margin:0px;padding:0px;border:1px dotted darkblue;">
                <
    img id="mapimg_201262d788f5b3e22f2f083a2bc0b6c4bd" src="img/leer0.png" style="width:30px;height:30px;">
            </
    td>
            <
    td id="maptd_211262d788f5b3e22f2f083a2bc0b6c4bd" style="background-image:url(img/leer0.png);width:30px;height:30px;margin:0px;padding:0px;border:1px dotted darkblue;">
                <
    img id="mapimg_211262d788f5b3e22f2f083a2bc0b6c4bd" src="img/leer0.png" style="width:30px;height:30px;">
            </
    td>
        </
    tr>
    </
    table>
    Dann eine JavaScript-Funktion, welche JSON-Daten erhält (Ist ein Requesthandler, die Funktion), und verarbeitet.
    Im Grunde geht sie das JSON-Array durch, prüft, ob der Satz ein "img" oder "bg" ist, und tauscht dann anhand der mitgelieferten ID des HTML-Elements die URL zum Bild aus (Also entweder das Hintergrundbild via CSS, oder das "normale" Bild via src-Attributt)

    PHP:
    function handle_go(vari){
        
    // JSON in JS uebernehmen
        
    var tmp = eval("(" vari ")");
        for(var 
    key in tmp){
            if(
    "img" == tmp[key]['art']){
        
    // IMG-Tag austauschen
                
    document.getElementById(tmp[key]['id']).src tmp[key]['src'];
            }else if(
    "bg" == tmp[key]['art']){
        
    // background-Style Austauschen
                
    dw(tmp[key]['id'] + tmp[key]['src']);
                
    document.getElementById(tmp[key]['id']).style.backgroundImage tmp[key]['src'];
            }else{
            
            }
        }

    }
    Zum schluss noch das JSON, damit klar ist, was übermittelt wird:
    PHP:
    [
        {
            
    "art":"bg",
            
    "id":"maptd_111262d788f5b3e22f2f083a2bc0b6c4bd",
            
    "src":"img\/leer0.png"
        
    },
        {
            
    "art":"img",
            
    "id":"mapimg_111262d788f5b3e22f2f083a2bc0b6c4bd",
            
    "src":"img\/leer0.png"},
        {
            
    "art":"bg",
            
    "id":"maptd_011262d788f5b3e22f2f083a2bc0b6c4bd",
            
    "src":"img\/maps\/testevent\/0.png"
        
    },
        {
            
    "art":"img",
            
    "id":"mapimg_011262d788f5b3e22f2f083a2bc0b6c4bd",
            
    "src":"img\/maps\/testheld\/0.png"
        
    }
    ]

    Die JS-Funktion soll also entweder das SRC vom Bild, oder das Hintergrundbild der Zelle ändern.
    In allen getesteten Browsern (FireFox, Camino, Opera) klappt es, bis auf Shiira und Safari.
    Ich denke mal, dass die beiden die selbe Render und JS-engine benutzen, daher konzentrieren wir uns mal nur auf Safari...
    Hat der ein grundsätzliches Problem damit, Hintergründe, die per Stylesheet gesetzt sind, zu ändern? weil bisher hatte ich keine Probleme damit.
    Hab ich mich irgendwo vertippt, und waren die anderen Browser einfach nur gnädig mit mir?
    Helft mir, ich weiß nicht mehr, wo ich suchen soll :heul:
    (Tränen sollen ja helfen :hehehe: )

    Dem glücklichen Problemlöser stell ich schonmal einen Kuchen in den Schrank: :cake:

    gruß
    Lukas
     
  2. koli.bri

    koli.bri Thread Starter Gast

    Ok, eine Pizza weiter hab ich die Lösung allein gefunden. Der Kuchen geht daher wieder an mich, und wird bis zu meinem nächsten Problem aufgehoben.

    Was war Ursache das es nicht funktionierte?
    ganz Simpel: die Zuweisung des Hintergrundbildes: Sie darf nicht einfach nach dem Schema "backgroundImage = url_zum_bild" sondern muss, wie auch in CSS selbst, "backgroundImage = url(url_zum_bild)" sein.

    Hier die fertige Funktion:
    PHP:
    function handle_go(vari){
        var 
    tmp = eval("(" vari ")");
        for(var 
    key in tmp){
            if(
    "img" == tmp[key]['art']){
                
    document.getElementById(tmp[key]['id']).src tmp[key]['src'];
            }else if(
    "bg" == tmp[key]['art']){
                
    document.getElementById(tmp[key]['id']).style.backgroundImage "url(" tmp[key]['src'] + ")";
            }else{
            
            }
        }
    }

     
Die Seite wird geladen...
Ähnliche Themen - backgroundImage ersetzen klappt
  1. StephanSch
    Antworten:
    4
    Aufrufe:
    1.659
    StephanSch
    14.04.2008
  2. Bambino_Uno
    Antworten:
    9
    Aufrufe:
    2.299
    Bambino_Uno
    26.01.2008
  3. Coati
    Antworten:
    1
    Aufrufe:
    476
    UDH5
    25.08.2007
  4. kata
    Antworten:
    0
    Aufrufe:
    413
    kata
    12.03.2007
  5. Der_Jan
    Antworten:
    3
    Aufrufe:
    513
    Der_Jan
    22.07.2005