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

K

koli.bri

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
 
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{
		
		}
	}
}
 
Zurück
Oben Unten