[CSS/HTML/javascript] Table met halftranparante PNG als BG?

[Tweaqer]

Dat PNG niet lekker ondersteund wordt door IE, dat weten we inmiddels wel, maar ik heb wat gezocht op het internet en ik kom er niet uit.
In een ander topic wat ik gestart heb is 1 probleem opgelost, helaas heb ik nu geen transparante achtergrond voor mijn table meer. Ik kom vooral op de onderstaande oplossing via transparante png'tjes en IE

code:

<img src="spacer.gif" style="filter:progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='plaatje.png', sizingMethod='scale');">

Maar dit kan ik weer niet combineren met een table want die code is anders, toch?
Dit is de tabel die ik gebruik

code:

<table width="380" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr> 
<td width="321" height="200" align="left" valign="top" background="img/wit_alpha.png">&nbsp;</td>
</tr>
</table>

Ik zal het wel niet snappen ofzo, maar ik vind het zowieso maar raar dat IE PNG niet goed ondersteund

[ Voor 31% gewijzigd door Tweaqer op 30-04-2005 18:18 ]

[Rowanov]

Eh, dat kan wel. Je geeft je plaatje een style en die kan je ook gewoon meegeven aan je td. Of het werkt is een tweede zaak, maar je zou het zo kunnenproberen:

HTML:

<table width="380" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr> 
<td class="blend" width="321" height="200" align="left" valign="top" background="img/wit_alpha.png">&nbsp;</td>
</tr>
</table>

Cascading Stylesheet:

.blend {
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='plaatje.png', sizingMethod='scale');
}

Dit werkt overigens alleen in Internet Explorer.

edit:
Typen is moeilijk

[ Voor 60% gewijzigd door Rowanov op 30-04-2005 22:59 ]

[André]

@Rowanov: Ik denk dat je oplossing niet de juiste is voor het probleem aangezien dan de teksten in de TD ook transparant worden

[Tweaqer]

Het eik geen relaxte oplossing, en wel om de volgende redenen;

1) Als je browser anders is dan IE laat hij het hele vlak leeg
NB. Ik heb hiervoor als oplossing gewoon ff n snel een php scriptje erin gezet;

PHP:

if (strstr($_SERVER['HTTP_USER_AGENT'], "Mozilla/4.0")) { 
include ('ie_table_settings.php'); 
} 
else { 
include ('other_browser_table_settings.php');
};

2) de links doen het niet meer in IE http://bbrboeken.nl.nu (het vak linksboven)

[ Voor 12% gewijzigd door Tweaqer op 30-04-2005 23:55 ]

[faabman]

Angelgamer schreef op zaterdag 30 april 2005 @ 23:53:
Het eik geen relaxte oplossing, en wel om de volgende redenen;

1) Als je browser anders is dan IE laat hij het hele vlak leeg
NB. Ik heb hiervoor als oplossing gewoon ff n snel een php scriptje erin gezet;

Waarom gebruik je geen i.e. hack door bijv. een underscore voor je i.e. only styles te plaatsen? Dus voor non-i.e.

background-image:url(foo.png);

voor i.e.

_background-image:none;
en dan geen gebruik maken van alpha image loader, maar van de methode die je hier kunt vinden...

[Verwijderd]

ik heb voor dit probleem 2 divjes over elkaar heen gezet (eigenlijk 3). Ik heb nml een achtergrond foto, daaroverheen een half transparante witte laag en daarover de text. het moet zo omdat de bg-foto random is, dus zeg niet dat het anders moet maar met divjes is het zo geregeld lijkt me

[Bananenplant]

faabman schreef op zondag 01 mei 2005 @ 00:15:
[...]


Waarom gebruik je geen i.e. hack door bijv. een underscore voor je i.e. only styles te plaatsen? Dus voor non-i.e.

background-image:url(foo.png);

voor i.e.

_background-image:none;
en dan geen gebruik maken van alpha image loader, maar van de methode die je hier kunt vinden...

De underscore hack is geen valide css . Maar conditional comments kun je weer niet in een css zetten...

Maar is het geen idee om een transparante png neer te zetten en met css die table eroverheen te zetten zonder een achtergrond? Krijg je hetzelfde lijkt me...

[Rowanov]

faabman schreef op zondag 01 mei 2005 @ 00:15:
en dan geen gebruik maken van alpha image loader, maar van de methode die je hier kunt vinden...

Die methode werkt dus niet in Firefox. Dit gedoe is de reden dat zulk soort dingen vaak gefaked worden in websites, gewoon omdat het niet of niet crossbrowser werkt.

[Verwijderd]

Probeer deze maar eens:

code:

<table style="background-color: #FFFFFF;filter: alpha(opacity=80);-moz-opacity: 0.80;">

Het is niet volgens de standaard helaas, maar dat kan met IE nu eenmaal niet omdat png bestanden niet worden ondersteund.

Je kan ook gebruik maken van een png (is wel css standaard) en een hack voor IE. Hiervoor moet je alleen even een exta css style toevoegen die alleen door IE wordt herkend.

code:

div.tabel{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=85);
}

div.tabel[class]{
    background-image:url(../img/wit_85.png);
}

[faabman]

ucchan schreef op zondag 01 mei 2005 @ 01:15:
[...]


De underscore hack is geen valide css . Maar conditional comments kun je weer niet in een css zetten...

Goed, dan doe je het anders...

Cascading Stylesheet:

foo{
  background-image:url(bar.png) !important;
  background-image:none;
}

Rowanov schreef op zondag 01 mei 2005 @ 10:10:
Die methode werkt dus niet in Firefox. Dit gedoe is de reden dat zulk soort dingen vaak gefaked worden in websites, gewoon omdat het niet of niet crossbrowser werkt.

Wat werkt er niet in Firefox?? Je kunt voor Firefox toch gewoon gebruik maken van een half-transparante png???

[Pixeldude]

Misschien dat je hier wat aan hebt. Hij werkt bij mij wel goed

code:

<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle       
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);
</script>

[Rowanov]

Skyline GTR schreef op zondag 01 mei 2005 @ 15:17:
Misschien dat je hier wat aan hebt. Hij werkt bij mij wel goed

Of je leest het topic even; het gaat hier om een background image en dat gaat dus niet werken.

faabman schreef op zondag 01 mei 2005 @ 15:13:
Wat werkt er niet in Firefox?? Je kunt voor Firefox toch gewoon gebruik maken van een half-transparante png???

Ja, ok, dat gedeelte heb ik even over het hoofd gezien. Feit blijft dat er geen echte handige manier is.