Tabellen Hintergrund mit Png Bildern

[wertzui]

Hallo
Ich benutze dieses Script, um die Png Bilder auf meiner Seite für den IE anzupassen:
http://wilcoding.xs4all.nl/Wilco/Pastecode.aspx?pasteID=1667
Nun ist meine Frage, wie ich das modifizieren muss, dass es auch auf Hintergründe von Tabellen angewand wird.

 

[Sven Mintel]

Garnicht.... der Alpha-Filter kann nur auf HTML-Elemente einer Seite angewandt werden.... ein Hintergrundbild ist kein Seitenelement

 

[wertzui]

Gibt es denn en andere Möglichkeit, z.B. das Bild normal reintun und n div drüber legen?

 

[Sven Mintel]

Wie gesagt.... wenn du das Bild normal hineintust, ist es ein HTML-Element und du kannst den Filter darauf anwenden.

 

[maexle1894]

Stimmt doch absolut nicht... Voll der Schwachsinn.

Tu die Tabelle in ne class rein, hier z.B. showpng. Dann erstellste ein StyleSheet mit folgendem Inhalt:

<style type="text/css">
    .showpng {
    background-image:url(tollepngdatei.png);
    }
    </style>
    
    <!--[if IE]>
    <style>
    .showpng
    {
     background-image: none;
     filter:
    progid:-)XImageTransform.Microsoft.AlphaImageLoader(src=tollepngdatei.png,sizingMethod='scale', enable=true);
    }
    </style>
    <![endif]-->

Die musste dann logischerweise noch einbinden oder du schreibst es direkt rein oder wie auch immer.

Hier noch ne Lösung, wie es automatisch für alle TD's geht :

<script> 
   
   function init()
   	{
   	for (i=0; i< document.getElementsByTagName("td").length; i++)
   		{
 		if (document.getElementsByTagName("td")[i].background.search("png") != -1 || document.getElementsByTagName("td")[i].style.backgroundImage.search("png") != -1)
   			{
 			bgurl = document.getElementsByTagName("td")[i].background;
 			document.getElementsByTagName("td")[i].background = 'none';
 		 document.getElementsByTagName("td")[i].style.filter = "progid:-)XImageTransform.Microsoft.AlphaImageLoader(src='" + bgurl + "',sizingMethod='scale',enable=true)";
 
   			}
   		}
   	}
   
   </script>

Ganz unten in der HTML Datei muss dann die init z.B. mit window.init(); aufgerufen werden. Da das sowieso nur der IE macht, und es alle anderen Browser nicht interessiert, ist das die beste Möglichkeit.

Allerdings gibts da ein Problem : Desöfteren kommt es vor, dass z.B. checkboxen, selects oder input felder im IE nicht mehr anwählbar sind, hat dafür jemand ne Lösung?

 

[Sven Mintel]

Stimmt doch absolut nicht... Voll der Schwachsinn.

Das kannte ich nicht.. tut mir leid, wenn ich hier eine Fehlinformation verbreitet habe.

Allerdings gibts da ein Problem : Desöfteren kommt es vor, dass z.B. checkboxen, selects oder input felder im IE nicht mehr anwählbar sind, hat dafür jemand ne Lösung?

Du hast vergessen zu erwähnen, dass Links dann auch nicht funktionieren..JS-Events feuern auch nicht.
Hast du mal ein Beispiel parat, wo ein HTML-Element innerhalb eines so formatierten Containers überhaupt seine Funktionalität behält?
Vielleicht kannte ich es ja deshalb nicht, weil es deswegen niemand benutzt...... offensichtlich ist es für die Hintergrundgestaltung nicht verwendbar, wenn man seiner Seite nicht gänzlich die Funktionalität nehmen möchte

 

[maexle1894]

Das bezieht sich alles logischerweise auf den Internet Explorer.

Ich habe keine Erklärung dafür, es aber dennoch mit Hilfe von http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217%22 hinbekommen. Man muss sozusagen die einzelnen Objekte "überladen", wenn man das so nennen kann. Hier der zusätzliche Code :

 <style type="text/css">
 .showpng {
 background-image:url(transbg.png);
 }
 </style>
 
 <!--[if IE]>
 <style>
 .showpng
 {
 
 background:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=transbg.png,sizingMethod='scale');
 }
 
 .showpng a
 {
 position:relative;
 
 cursor:pointer;
 background:transparent;
 }
 
 .showpng input
 {
 position:relative;
 
 }
 </style>
 <![endif]-->

Komisch, aber es geht , selects gehen auch ohne...