Browserunabhängige Logos...

Z

zephyr

Mitglied
Thread Starter
Dabei seit
22.03.2005
Beiträge
94
Reaktionspunkte
1
hallo,
ich bin dabei, mir mit der menalto gallery v2.1.2 eine Website zum veröffentlichen meiner bilder zu basteln. das hat auch soweit ganz gut funktioniert. erste ergebnisse kann man sich unter:

http://www.kra-net.de

ansehen. probleme habe ich moch mit dem logo oben links. bei dem logo handelt es sich um eine .png-file die ich mit photoshop elements 3 erstellt habe. es ist eigentlich nur ein schriftzug auf transparentem hintergrund. das funktioniert auch auf allen browsern ausser dem ms internet explorer. dort ist das logo in einem häßlichen hellgrau unterlegt.

kann mir jemand erklären, wie ich ein logo erstelle, das im ms internet explorer genauso dargestellt wird wie in firefox oder safari?

vielen dank für die hilfe.
 
Transparente .png, die direkt im HTML eingebunden sind (nicht über CSS
und background) können mit einem PNG-Fix auch für den IE transparent
dargestellt werden.

zB kannst du dieses Script verwenden:
Code:
/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      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);
kopier dir das in eine eigene Datei namens pngfix.js zum Beispiel und binde die in
die Dateien in den <head>-Bereich ein, die ein transparentes .png beinhalten.:
Code:
<script type="text/javascript" src="pngfix.js"></script>

Wenn ich keine Fehler reingebaut hab müsste es so gehn…


lea
 
zephyr schrieb:
kann mir jemand erklären, wie ich ein logo erstelle, das im ms internet explorer genauso dargestellt wird wie in firefox oder safari?
Kein png verwenden, das kann der IE nicht. Selbst wenn man dem den Alpha-Kanal reingeprügelt kriegt, stellt er immer noch die Farben falsch dar(zumindest der 6er unter Wind)..
 
erst mal danke für die schnellen tips.

an den script von lea traue ich mich nicht so recht ran, da hab ich zuwenig ahnung von.

im original ist das logo eine .gif-file. als gif sieht mein eigenes logo aber eher bescheiden aus. ist .jpg eine alternative oder habe ich damit die gleichen probleme? oder anders gefragt: welches grafik-format ist zu empfehlen?
 
gif und jpg bereiten beide keine Probleme.
jpg hat halt keine Transparenzen.
gif hat welche, dafür nur 256 Farben.

Im Web hast du eigentlich nur die zwei und dann noch .png als
Formate zur Verfügung. png mag der IE nicht, alles andere geht.


lea
 
jpg würde auch gehen, bei so filigranen Sachen wie Logos aber unbedingt eine Qualität >= 95 verwenden.
Da es eine private Homepage ist, kannst du es aber auch beim png lassen. Der IE7 kommt damit klar und wird inzwischen auf über die automatischen Updates verteilt.
 
ok, habe mich doch für die script-variante entschieden, und es funktioniert auf anhieb.

vielen dank lea!
 
Bitte – ist nicht so schwer, wie es anfangs aussieht, gelle ;)
 
Zurück
Oben Unten