Supportnet / Forum / Webseiten/HTML
PNG und Internet-Explorer: Die Lösung!!
Frage
Hallo Leute,
diese Seite
Zeigt 2 PNG-Bilder mit transparenter Fläche. Das eine ist ein einfaches Bild, das mit einem AlphaImageLoader von Microsoft geladen wird, das andere wird normal geladen, und blinkt wenn man mit der Maus rüberfährt (mit JavaScript).
Mein Problem ist folgendes: ich würde gerne die Lösung des Transparenzproblems auf dieses blinkende Bild anwenden.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--[if gte IE 5.5000]>
<script language="JavaScript"> var ie55up = true </script>
<![endif]-->
<title>Untitled Document</title>
<link rel=stylesheet href="accueil.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgID = (myImage.id) ? "id='" + img.id + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
capteurBasis=new Image();
capteurBasis.src="icons/capteur.png";
capteurActiv=new Image();
capteurActiv.src="icons/capteurOver.png";
capteurDruck=new Image();
capteurDruck.src="icons/capteurOnClick.png";
function bild(b)
{
document.b1.src=b;
}
//-->
</script>
</head>
<body>
<table width="200">
<tr>
<td><a href="javascript:bild('icons/capteur.png')"
onMouseOver="capteur.src=capteurActiv.src"
onMouseDown="capteur.src=capteurDruck.src"
onMouseUp="capteur.src=capteurActiv.src"
onMouseOut="capteur.src=capteurBasis.src">
<img src="icons/capteur.png" border="0" name="capteur" ></a></td>
<td><img src="icons/capteur.png" onload="fixPNG(this)"></td>
</tr>
</table>
</body>
</html>
[/code]
Damit das Problem deutlicher wird stelle ich diese Seite ins internet. Natürlich sollte man es mit den Internet Explorer betrachten:
[url]www.pesage.com/XDEV/problem.htm[/url]
mfg
Dramirak
Antwort 1 von f*euervogel
das hilft dir zwar nicht, aber im firefox siehts prima aus *gg*
Antwort 2 von Dramirak
In Opera und Netscape ebenso, es muss mal wieder nur der IE verkacken. *fluch*
Dramirak
Dramirak
Antwort 3 von TroubleMaker
Antwort 4 von Kuestenluemmel
Öhhm; nur zur Vollständigkeit...Slimbrowser sieht wie der IE aus
Antwort 5 von Dramirak
Ich bin mitlerweile etwas weitergekommen es sieht jetzt so aus:
Hier noch mal die verbesserte online version.
www.pesage.com/XDEV/problem.htm
Das Problem ist nun das per JavaScript <span>-Tags mit deren Inhalt ausgetauscht werden müssen, und das an dieser Stelle im code:
Schaut euch das Beispiel an und ließt die Fehlermeldung im Browser an, dann versteht ihr besser was ich meine,
In der Hoffnung, das sich doch noch jemand durch meinen Code durchwurschtelt,
viele Grüße
Dramirak
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--[if gte IE 5.5000]>
<script language="JavaScript"> var ie55up = true </script>
<![endif]-->
<title>Untitled Document</title>
<link rel=stylesheet href="accueil.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgName = (myImage.name) ? "name='" + myImage.name + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgClass + imgName
strNewHTML += " style=\"" + " width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + myImage.src + "\' , sizingMethod='scale');\"></span>"
alert(strNewHTML)
myImage.outerHTML = strNewHTML
}
}
capteurBasis=new Image();
capteurBasis.src="icons/capteur.png";
capteurActiv=new Image();
capteurActiv.src="icons/capteurOver.png";
capteurDruck=new Image();
capteurDruck.src="icons/capteurOnClick.png";
function bild(b)
{
document.b1.src=b;
}
//-->
</script>
</head>
<body>
<table width="200" border="0">
<tr>
<td><a href="javascript:bild('icons/capteur.png')"
onMouseOver="capteur.src=capteurActiv"
onMouseDown="capteur.src=capteurDruck.src"
onMouseUp="capteur.src=capteurActiv.src"
onMouseOut="capteur.src=capteurBasis.src">
<img src="icons/capteur.png" border="0" name="capteur" onload="fixPNG(this)"></a></td>
<td><img class="test" src="icons/capteur.png" onload="fixPNG(this)"></td>
</tr>
</table>
</body>
</html>
Hier noch mal die verbesserte online version.
www.pesage.com/XDEV/problem.htm
Das Problem ist nun das per JavaScript <span>-Tags mit deren Inhalt ausgetauscht werden müssen, und das an dieser Stelle im code:
onMouseOver="capteur.src=capteurActiv"
onMouseDown="capteur.src=capteurDruck.src"
onMouseUp="capteur.src=capteurActiv.src"
onMouseOut="capteur.src=capteurBasis.src">
Schaut euch das Beispiel an und ließt die Fehlermeldung im Browser an, dann versteht ihr besser was ich meine,
In der Hoffnung, das sich doch noch jemand durch meinen Code durchwurschtelt,
viele Grüße
Dramirak
Antwort 6 von Mister-X
Im Konqueror sieht es gut aus, auch Firefox, Netscape, Opera haben keine Probleme damit. Du musst wohl auf die Tansparenz verzichten oder GIF benutzen (GIF kann auch schlechter und größer sein).
Antwort 7 von Dramirak
Man o man, das ist doch nicht das Problem, du solltest meine Frage Lesen, und meine Bemerkung in Antwort 5 und dann schreiben. Irgendwie habe ich den eindruck das jeder mir hier Sagen will was ich schon Weiß.
Ich will nur Hilfe bei einem Script mit dem das auch mit dem IE funktionniert. Aber anscheinend, kann da niemand weiterhelfen.
Ich will nur Hilfe bei einem Script mit dem das auch mit dem IE funktionniert. Aber anscheinend, kann da niemand weiterhelfen.
Antwort 8 von TheHappyJoker
Hallo Dramirak,
sag mal ist es eigentlich beabsichtigt, dass zwei Warnfenster aufgehen, die einen Teil es Quellcodes anzeigen und erst dann bei beiden Bildern die Transparenz korrekt angezeigt wird (IE6)?
Nichts für ungut, aber scheint nicht wirklich eine *saubere* Lösung zu sein, wenn ich mich erst durch Warnfenster klicken muss.
M$ kompiliert nunmal seit über Jahren den IE mit einer fehlerhaften libpng-Bibliothek. Es gibt seit Ewigkeiten neuere Versionen der (freien) libpng, aber die sind wohl irgendwie an der einen zufällig fehlerhaften Version von damals hängengeblieben (die wenige Tage später durch eine gefixte Version aktualisiert wurde).
Schreib 'ne Beschwerde an M$. Hab ich auch schon gemacht ;)
Alternative: Verwende GIF, oder benutze PHP um festzustellen ob der IE verwendet wird und um nur dort GIF anzuzeigen (alle andere Browser nehmen dann die PNG).
Sorry, kenne mich mit JS nicht so tolle aus, daher kann ich leider nicht produktiv weiterhelfen... :(
<gruß thj>
sag mal ist es eigentlich beabsichtigt, dass zwei Warnfenster aufgehen, die einen Teil es Quellcodes anzeigen und erst dann bei beiden Bildern die Transparenz korrekt angezeigt wird (IE6)?
Nichts für ungut, aber scheint nicht wirklich eine *saubere* Lösung zu sein, wenn ich mich erst durch Warnfenster klicken muss.
M$ kompiliert nunmal seit über Jahren den IE mit einer fehlerhaften libpng-Bibliothek. Es gibt seit Ewigkeiten neuere Versionen der (freien) libpng, aber die sind wohl irgendwie an der einen zufällig fehlerhaften Version von damals hängengeblieben (die wenige Tage später durch eine gefixte Version aktualisiert wurde).
Schreib 'ne Beschwerde an M$. Hab ich auch schon gemacht ;)
Alternative: Verwende GIF, oder benutze PHP um festzustellen ob der IE verwendet wird und um nur dort GIF anzuzeigen (alle andere Browser nehmen dann die PNG).
Sorry, kenne mich mit JS nicht so tolle aus, daher kann ich leider nicht produktiv weiterhelfen... :(
<gruß thj>
Antwort 9 von Dramirak
Hall thj,
nein die Warnhinweise mit dem Quelcode, dienen nur der Fehlersuche. Sie zeigen den Quelcode an mit dem die Bilder richtig angezeigt werden.
Diese Fenster werden durch diese Zeile ausgeführt:
Sie kann natürlich auch einfach gelöscht werden.
Eine Beschwerde denke ich wird mich nicht weiterbringen, da Microsoft, in seinem Fastmonopol, sich so wie so einen Teufel um meine Beschwerde schert.
Zu den Vorschlag mit den GIFS, ja daran habe ich auch schon gedacht. Aber ich will es mit den PNG schaffen, das sieht besser aus. Ich denke ein JavaScript-Experte würde da weiterhelfen können. Sollte sich keiner auffinden, werde ich es halt werden ;) Die Lösung stelle ich dann online (sollte es eine geben).
mfg
Dramirak
nein die Warnhinweise mit dem Quelcode, dienen nur der Fehlersuche. Sie zeigen den Quelcode an mit dem die Bilder richtig angezeigt werden.
Diese Fenster werden durch diese Zeile ausgeführt:
alert(strNewHTML)
Sie kann natürlich auch einfach gelöscht werden.
Eine Beschwerde denke ich wird mich nicht weiterbringen, da Microsoft, in seinem Fastmonopol, sich so wie so einen Teufel um meine Beschwerde schert.
Zu den Vorschlag mit den GIFS, ja daran habe ich auch schon gedacht. Aber ich will es mit den PNG schaffen, das sieht besser aus. Ich denke ein JavaScript-Experte würde da weiterhelfen können. Sollte sich keiner auffinden, werde ich es halt werden ;) Die Lösung stelle ich dann online (sollte es eine geben).
mfg
Dramirak
Antwort 10 von Dr.Ma-Busen
Moin!
Bin zwar kein JS experte. Aber ich versuch mal etwas zu helfen :)
Wenn du jetzt z.B. das event
Da aber das Script mit
Um das zu lösen müsste man einiges ändern.
Da ich gerade mit Linux unterwegs bin und kein IE zur Verfügung habe kann ich das jetzt nicht ändern bzw. die Änderung Testen. Wenn ich mal wieder Windoof an habe und ich es nicht vergesse dann schau ich noch mal ;)
Aber wenn du jetzt selber noch etwas Probieren willst, dann kannst das mal so versuchen:
Du erstellst ein neue Funktion die die Bilder wechselt. Die Mausevents dann in etwas so aufbauen onMouseOver="function(capteurActiv.src)"
In der Funktion musst dann überprüfen welchen Browser du da hast und dann dem entsprechend entweder den Code "document.capteur.src=argumentVariableMitDemNeuenBild" das bild austauschen.
Und wenn du den IE da hast (zum prüfen kannst du die vorhandene Variable ie55up nehmen), dann musst du wie in der Funktion fixPNG ein span- Tag erstellen und das dann mit dem alten austauschen. Das geht in etwa so wie in der Funktion fixPNG, nur anstelle von
Ob sich diese Idee genau so verwirklichen lässt kann ich dir nicht sagen, ich müsste das jetzt selber am besten mal probieren, aber ohne IE ist es im Moment schlecht.
MfG
Dr. Ma-Busen
Bin zwar kein JS experte. Aber ich versuch mal etwas zu helfen :)
<img src="icons/capteur.png" border="0" name="capteur" onload="fixPNG(this)">
Beim Laden der Grafik wird die Funktion fixPNG aufgerufen. Die bastelt ein span zusammen mit der Grafik die das img- Tag anzeigt. Dann wird das ganze img- Tag mitmyImage.outerHTML = strNewHTML
überschrieben.Wenn du jetzt z.B. das event
onMouseUp="capteur.src=capteurActiv.src"
auslöst dann wird die Grafik aus dem img-Tag mit den Namen capteur durch eine andere ersetzt.Da aber das Script mit
myImage.outerHTML = strNewHTML
das Img überschrieben hat, gibt es das nicht mehr und wenn du mit der Maus über die grafik Fährst dann müsste ein Fehler kommen, mit ungefähr folgender Meldung "capteur ist null oder kein Objekt", ist ja auch logisch da es das nicht mehr gibt.Um das zu lösen müsste man einiges ändern.
Da ich gerade mit Linux unterwegs bin und kein IE zur Verfügung habe kann ich das jetzt nicht ändern bzw. die Änderung Testen. Wenn ich mal wieder Windoof an habe und ich es nicht vergesse dann schau ich noch mal ;)
Aber wenn du jetzt selber noch etwas Probieren willst, dann kannst das mal so versuchen:
Du erstellst ein neue Funktion die die Bilder wechselt. Die Mausevents dann in etwas so aufbauen onMouseOver="function(capteurActiv.src)"
In der Funktion musst dann überprüfen welchen Browser du da hast und dann dem entsprechend entweder den Code "document.capteur.src=argumentVariableMitDemNeuenBild" das bild austauschen.
Und wenn du den IE da hast (zum prüfen kannst du die vorhandene Variable ie55up nehmen), dann musst du wie in der Funktion fixPNG ein span- Tag erstellen und das dann mit dem alten austauschen. Das geht in etwa so wie in der Funktion fixPNG, nur anstelle von
myImage.outerHTML = strNewHTML
müsstest du dann etwa sowas hier schreibendocument.getElementsByName('capteur').outerHTML = strNewPage
Ob sich diese Idee genau so verwirklichen lässt kann ich dir nicht sagen, ich müsste das jetzt selber am besten mal probieren, aber ohne IE ist es im Moment schlecht.
MfG
Dr. Ma-Busen
Antwort 11 von Dramirak
Danke für deinen Tipp Dr. Ma-Buse,
du scheinst bis jetzt der erste zu sein, der sich meinen Code angeschaut hast. So wie du das beschrieben hast habe ich mir das auch gedacht. Doch fehlte mir der entscheidende tipp. Ich werde es mal so versuchen wie du es meintest. Vor allem das wird mir weiterhelfen:
wenn ich das recht sehe sucht er damit das html-tag mit dem namen capteur aus und tauscht es dann wieder aus. Richtig so?
Ich mach mich mal an die Arbeit und melde mich so bald ich weiter bin.
mfg
Dramirak
du scheinst bis jetzt der erste zu sein, der sich meinen Code angeschaut hast. So wie du das beschrieben hast habe ich mir das auch gedacht. Doch fehlte mir der entscheidende tipp. Ich werde es mal so versuchen wie du es meintest. Vor allem das wird mir weiterhelfen:
document.getElementsByName('capteur').outerHTML = strNewPage
wenn ich das recht sehe sucht er damit das html-tag mit dem namen capteur aus und tauscht es dann wieder aus. Richtig so?
Ich mach mich mal an die Arbeit und melde mich so bald ich weiter bin.
mfg
Dramirak
Antwort 12 von Dramirak
Also ich habe den Quelltext wie folgt abgeändert:
mit Opera Funktionniert es auch nur scheint das mit der Funktion changePNG für den IE noch nicht so richtig hinzuhauen.
Das Problem ist das er für die Bilder keine Werte für die Variabeln: myImage.style.cssText, myImage.name und myImage.class hat.
Die Variabeln Name und Class kann man glaube ich weglassen. Nur myImage.style.cssText scheint wichtig zu sein. Wie kann ich das lösen?
mfg
Dramirak
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--[if gte IE 5.5000]>
<script language="JavaScript"> var ie55up = true </script>
<![endif]-->
<title>Untitled Document</title>
<link rel=stylesheet href="accueil.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgName = (myImage.name) ? "name='" + myImage.name + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgClass + imgName
strNewHTML += " style=\"" + " width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + myImage.src + "\' , sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
}
}
capteurBasis=new Image();
capteurBasis.src="icons/capteur.png";
capteurActiv=new Image();
capteurActiv.src="icons/capteurOver.png";
capteurDruck=new Image();
capteurDruck.src="icons/capteurOnClick.png";
function bild(b)
{
document.b1.src=b;
}
function changePNG(myImage)
{
if (window.ie55up)
{
alert
var imgName = (myImage.name) ? "name='" + myImage.name + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgClass + imgName
strNewHTML += " style=\"" + " width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + myImage.src + "\' , sizingMethod='scale');\"></span>"
document.getElementsByName('capteur').outerHTML = strNewHTML
}
else {
document.capteur.src=myImage.src
}
}
//-->
</script>
</head>
<body>
<table width="200" border="0">
<tr>
<td><a href="javascript:bild('icons/capteur.png')"
onMouseOver="changePNG(capteurActiv)"
onMouseDown="changePNG(capteurDruck)"
onMouseUp="changePNG(capteurActiv)"
onMouseOut="changePNG(capteurBasis)">
<img src="icons/capteur.png" border="0" name="capteur" onload="fixPNG(this)"></a></td>
<td><img class="test" src="icons/capteur.png" onload="fixPNG(this)"></td>
</tr>
</table>
</body>
</html>
mit Opera Funktionniert es auch nur scheint das mit der Funktion changePNG für den IE noch nicht so richtig hinzuhauen.
Das Problem ist das er für die Bilder keine Werte für die Variabeln: myImage.style.cssText, myImage.name und myImage.class hat.
Die Variabeln Name und Class kann man glaube ich weglassen. Nur myImage.style.cssText scheint wichtig zu sein. Wie kann ich das lösen?
mfg
Dramirak
Antwort 13 von Dr.Ma-Busen
Moin!
So, schaumal ob es so geht:
Du solltest allen Bildern die du mit der Funktion fixPNG bearbeitest einen eindeutigen Namen geben, sonst kann es vorkommen das evt. die Bilder falsch angezeigt werden.
MfG
Dr. Ma-Busen
So, schaumal ob es so geht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--[if gte IE 5.5000]>
<script language="JavaScript"> var ie55up = true </script>
<![endif]-->
<title>Untitled Document</title>
<link rel="stylesheet" href="accueil.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var imgAttribSave = new Array();
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgName = myImage.name;
imgAttribSave[imgName] = new Array();
imgAttribSave[imgName]['imgName'] = (myImage.name) ? "id='" + myImage.name + "' " : ""
imgAttribSave[imgName]['imgClass'] = (myImage.className) ? "class='" + myImage.className + "' " : ""
imgAttribSave[imgName]['imgStyle'] = "display:inline-block;" + myImage.style.cssText;
imgAttribSave[imgName]['imgHeight'] = myImage.height;
imgAttribSave[imgName]['imgWidth'] = myImage.width;
myImage.outerHTML = makeSpan(myImage.src,imgName);
}
}
function makeSpan(imgSrc,imgName){
return "<span " + imgAttribSave[imgName]['imgClass'] + imgAttribSave[imgName]['imgName']
+" style=\"" + " width:" + imgAttribSave[imgName]['imgWidth']
+ "px; height:" + imgAttribSave[imgName]['imgHeight'] + "px;"
+ imgAttribSave[imgName]['imgStyle']
+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+"(src=\'" + imgSrc + "\' , sizingMethod='scale');\"></span>";
}
capteurBasis=new Image();
capteurBasis.src="icons/capteur.png";
capteurActiv=new Image();
capteurActiv.src="icons/capteurOver.png";
capteurDruck=new Image();
capteurDruck.src="icons/capteurOnClick.png";
function bild(b)
{
document.b1.src=b;
}
var statSave = null;
function changePNG(myImage,name){
if (window.ie55up){
if(statSave == myImage.src){return}
statSave = myImage.src;
document.getElementsByName(name)[0].outerHTML = makeSpan(myImage.src,name)
}else {
document.images[name].src = myImage.src
}
}
//-->
</script>
</head>
<body>
<table width="200" border="0">
<tr>
<td><a href="javascript:bild('icons/capteur.png')"
onmouseover="changePNG(capteurActiv,'capteur')"
onmouseout="changePNG(capteurBasis,'capteur')"
onmousedown="changePNG(capteurDruck,'capteur')"
onmouseup="changePNG(capteurActiv,'capteur')">
<img src="icons/capteur.png" border="0" name="capteur" onload="fixPNG(this)"></a></td>
<td><img class="test" src="icons/capteur.png" onload="fixPNG(this)"></td>
</tr>
</table>
</body></html>
Du solltest allen Bildern die du mit der Funktion fixPNG bearbeitest einen eindeutigen Namen geben, sonst kann es vorkommen das evt. die Bilder falsch angezeigt werden.
MfG
Dr. Ma-Busen
Antwort 14 von Dramirak
Hallo DR. Ma-Busen, oder wie ich sagen würde, Dr JavaScript.
Danke es funktionniert. Auf diese Lösung wäre ich wohl nicht so schnell gekommen. Aber zwei kleine Sachen bleiben noch.
Erstens:
Wenn ich die Seite mit dem IE öffne wechselt der Mauscurser nicht in eine Hand, wie bei Links üblich sonder bleibt ein Pfeil.
Zweitens:
wenn ich jetzt die Buttons verlinken will, wo muss ich das einfügen? Ich meine ich will wenn ich auf den Button Drücke das mir die Seite www.supportnet.de angezeigt wird.
Danke noch mal für deine Mühe.
Dramirak
Danke es funktionniert. Auf diese Lösung wäre ich wohl nicht so schnell gekommen. Aber zwei kleine Sachen bleiben noch.
Erstens:
Wenn ich die Seite mit dem IE öffne wechselt der Mauscurser nicht in eine Hand, wie bei Links üblich sonder bleibt ein Pfeil.
Zweitens:
wenn ich jetzt die Buttons verlinken will, wo muss ich das einfügen? Ich meine ich will wenn ich auf den Button Drücke das mir die Seite www.supportnet.de angezeigt wird.
Danke noch mal für deine Mühe.
Dramirak
Antwort 15 von Dramirak
mir ist gerade aufgefallen, dass wenn ich mit der Maus sehr schnell in die Bilder rein und wieder raus gehe, die Bilder im IE Gelb bleiben und das onMouseOut event nicht mehr ausgeführt wird. wodrann kann das liegen?
Dramirak
PS:ich stelle die letzte Version hier noch mal online http://www.pesage.com/XDEV/problem.htm
Dramirak
PS:ich stelle die letzte Version hier noch mal online http://www.pesage.com/XDEV/problem.htm
Antwort 16 von Dr.Ma-Busen
Ui, da habe ich nicht drauf geachtet ob sich der Cursor ändert, aber das kann man mit CSS anpassen, dass zauberwort lautet cursor
Versuch das erst mal auf den Link anzuwenden, wenn das nicht geht muss man das mit in die Span- Tags einbauen. Aber da muss man dann wieder unterscheiden ob das span was erzeugt wird zu einen Link gehört oder nur eine einfache Grafik ist, weil sonst wird die Hand auch angezeigt wenn man mit den Cursor über normale Grafiken geht, was etwas irreführend dann ist.
Zum verlinken der Button musst du im A Tag das attribut href ändern/anpassen, dass
Ja, und die geschichte mit den MouseOut Event, da hatte ich auch Probleme mit und deshalb diese zeilen eingebaut:
if(statSave == myImage.src){return}
statSave = myImage.src;
Weil ohne diese zeilen würde das Mousover nicht gehen. Da in dem Moment wo das Script das Span austauscht das onMouseOut Event eintritt und dann die default Grafik wieder anzeigt. Ich vermute mal das der Browser etwas zu langsam ist beim austauschen und wenn er es ausgetauscht hat, du dann schon wieder mit dem Cursor wo anders bist. Wen du noch einmal über die Grafik gehst (mit normaler geschwindigkeit) dann sollte es wieder normal sein.
Aber ich schätze mit den kleinen Fehler können die Besucher leben, oder?
Versuch das erst mal auf den Link anzuwenden, wenn das nicht geht muss man das mit in die Span- Tags einbauen. Aber da muss man dann wieder unterscheiden ob das span was erzeugt wird zu einen Link gehört oder nur eine einfache Grafik ist, weil sonst wird die Hand auch angezeigt wenn man mit den Cursor über normale Grafiken geht, was etwas irreführend dann ist.
Zum verlinken der Button musst du im A Tag das attribut href ändern/anpassen, dass
javascript:bild('icons/capteur.png')
einfach durch die URL ersetzen von der Seite die aufgerufen werden soll.Ja, und die geschichte mit den MouseOut Event, da hatte ich auch Probleme mit und deshalb diese zeilen eingebaut:
if(statSave == myImage.src){return}
statSave = myImage.src;
Weil ohne diese zeilen würde das Mousover nicht gehen. Da in dem Moment wo das Script das Span austauscht das onMouseOut Event eintritt und dann die default Grafik wieder anzeigt. Ich vermute mal das der Browser etwas zu langsam ist beim austauschen und wenn er es ausgetauscht hat, du dann schon wieder mit dem Cursor wo anders bist. Wen du noch einmal über die Grafik gehst (mit normaler geschwindigkeit) dann sollte es wieder normal sein.
Aber ich schätze mit den kleinen Fehler können die Besucher leben, oder?
Antwort 17 von Dramirak
Hallo,
also das mit dem Cursor habe ich jetzt auch hingekrigt. Bleibt das Problem mit dem verlinken. In Opera und Netscape funktionnieren die Links, im IE nicht.
Ich denke das hat was damit zu tun das das Bild durch ein Span ausgetauscht wird. Also müsste ich wahrscheinlich irgendwie das span verlinken. wie geht das?
Hier noch mal der neuste Code:
Und hier noch mal der dazu gehörige Link
www.pesage.com/XDEV/problem.htm
mfg
Dramirak
also das mit dem Cursor habe ich jetzt auch hingekrigt. Bleibt das Problem mit dem verlinken. In Opera und Netscape funktionnieren die Links, im IE nicht.
Ich denke das hat was damit zu tun das das Bild durch ein Span ausgetauscht wird. Also müsste ich wahrscheinlich irgendwie das span verlinken. wie geht das?
Hier noch mal der neuste Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--[if gte IE 5.5000]>
<script language="JavaScript"> var ie55up = true </script>
<![endif]-->
<title>Untitled Document</title>
<link rel="stylesheet" href="accueil.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var imgAttribSave = new Array();
function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.
{
if (window.ie55up)
{
var imgName = myImage.name;
imgAttribSave[imgName] = new Array();
imgAttribSave[imgName]['imgName'] = (myImage.name) ? "id='" + myImage.name + "' " : ""
imgAttribSave[imgName]['imgClass'] = (myImage.className) ? "class='" + myImage.className + "' " : ""
imgAttribSave[imgName]['imgStyle'] = "display:inline-block;" + myImage.style.cssText;
imgAttribSave[imgName]['imgHeight'] = myImage.height;
imgAttribSave[imgName]['imgWidth'] = myImage.width;
myImage.outerHTML = makeSpan(myImage.src,imgName);
}
}
function makeSpan(imgSrc,imgName,cursor){
if (cursor == '1')
{
var imgCursor = "cursor:hand;"
}else imgCursor = ""
return "<span " + imgAttribSave[imgName]['imgClass'] + imgAttribSave[imgName]['imgName']
+" style=\"" + " width:" + imgAttribSave[imgName]['imgWidth']
+ "px; height:" + imgAttribSave[imgName]['imgHeight'] + "px;" + imgCursor
+ imgAttribSave[imgName]['imgStyle']
+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+"(src=\'" + imgSrc + "\' , sizingMethod='scale');\" ></span>";
}
capteurBasis=new Image();
capteurBasis.src="icons/capteur.png";
capteurActiv=new Image();
capteurActiv.src="icons/capteurOver.png";
capteurDruck=new Image();
capteurDruck.src="icons/capteurOnClick.png";
compteuseBasis=new Image();
compteuseBasis.src="icons/compteuse.png";
compteuseActiv=new Image();
compteuseActiv.src="icons/compteuseOver.png";
compteuseDruck=new Image();
compteuseDruck.src="icons/compteuseOnClick.png";
function bild(b)
{
document.b1.src=b;
}
var statSave = null;
function changePNG(myImage,name)
{
if (window.ie55up){
if(statSave == myImage.src)
{return}
statSave = myImage.src;
document.getElementsByName(name)[0].outerHTML = makeSpan(myImage.src,name,1)
}else {
document.images[name].src = myImage.src
}
}
//-->
</script>
</head>
<body>
<table width="200" border="0">
<tr>
<td><a href="https://supportnet.de"
onmouseover="changePNG(capteurActiv,'capteur')"
onmouseout="changePNG(capteurBasis,'capteur')"
onmousedown="changePNG(capteurDruck,'capteur')"
onmouseup="changePNG(capteurActiv,'capteur')">
<img src="icons/capteur.png" border="0" name="capteur" onload="fixPNG(this)"></a>
</td>
<td><a href="http://www.google.de"
onmouseover="changePNG(compteuseActiv,'compteuse')"
onmouseout="changePNG(compteuseBasis,'compteuse')"
onmousedown="changePNG(compteuseDruck,'compteuse')"
onmouseup="changePNG(compteuseActiv,'compteuse')">
<img src="icons/compteuse.png" border="0" name="compteuse" onload="fixPNG(this)"></a>
</td>
</tr>
</table>
</body></html>
Und hier noch mal der dazu gehörige Link
www.pesage.com/XDEV/problem.htm
mfg
Dramirak
Antwort 18 von Dr.Ma-Busen
Das du dir so eine mühe machst *kopfschüttel*
Naja, musst du wissen :)
So, Änderungen:
Die einmal ersetzen:
Und onMouseDown erweitern mit this
Übrigends, als ich gerade mit meinen IE mal auf dein Link war mit dem Beispiel, da wurden mir keine Grafiken angezeigt, lokal geht es aber bei mir.
Überleg es dir noch mal das ganze nicht doch mit Gif, anstelle von PNG zu machen. Könntest mit deiner Seite schon viel weiter sein ;)
MfG
Naja, musst du wissen :)
So, Änderungen:
Die einmal ersetzen:
function changePNG(myImage,name,obj){
if (window.ie55up){
if(statSave == myImage.src){return}
statSave = myImage.src;
document.getElementsByName(name)[0].outerHTML = makeSpan(myImage.src,name)
if(obj){window.location.href = obj.href;}
}else {
document.images[name].src = myImage.src
}
}
Und onMouseDown erweitern mit this
onmousedown="changePNG(capteurDruck,'capteur',this)"
Übrigends, als ich gerade mit meinen IE mal auf dein Link war mit dem Beispiel, da wurden mir keine Grafiken angezeigt, lokal geht es aber bei mir.
Überleg es dir noch mal das ganze nicht doch mit Gif, anstelle von PNG zu machen. Könntest mit deiner Seite schon viel weiter sein ;)
MfG
Antwort 19 von Mister-X
Vielleicht solltest du mal nachschauen ob Microsoft endlich reagiert und ob PNG endlich vollständig unterstützt wird. Ich brauche Microsoft weder für Betriebssystem (Linux) oder Browser (Konqueror). Trotzdem könntest du es mit dem SP2 versuchen, das werden bald so wie so alle haben oder einen anderen Browser.
Antwort 20 von Dr.Ma-Busen
Ich hab das SP2 bei mir schon drauf in der Hoffnung das die Bluescreen weniger werden, aber dem ist nicht so und der IE ist immer noch so ein Steinzeitbrowser wie vorher.
Das beste was die ja eingebaut haben beim IE ist ja so eine nette Informationsleiste :-/
Die immer auftaucht wenn eine Seite aktive inhalte enthält. Die muss ich erst immer mit 2 klicks wechklicken.
Nervt ganz schön, habe auch noch keine möglichkeit gefunden das abzuschalten. Na ja, hoffentlich erreicht M$ dadurch das viele leute den Browser meiden werden und sich einen vernünftigen Installieren *G
Das beste was die ja eingebaut haben beim IE ist ja so eine nette Informationsleiste :-/
Die immer auftaucht wenn eine Seite aktive inhalte enthält. Die muss ich erst immer mit 2 klicks wechklicken.
Nervt ganz schön, habe auch noch keine möglichkeit gefunden das abzuschalten. Na ja, hoffentlich erreicht M$ dadurch das viele leute den Browser meiden werden und sich einen vernünftigen Installieren *G
Antwort 21 von Dramirak
@Mister-X
Auch wenn das mit dem SP2 behoben werden sein sollte, würde mir das nicht weiterhelfen. Denn nicht jeder im Internet wird das SP2 installieren, das gleich gilt auch für den vernünftigen Brauser, ich bin schon seit einiger Zeit mit Opera unterwegs.
@Dr. Ma-Busen
Ich habe es auch schon mit GIF's versucht nur sind die Icons dann sehr schlechter Qualität. Denn bei GIF's kann ich Anialias nicht einschalten, da sonst ein hässliger weißer Rand erscheint. Und ohne das Antialias sind die Icons super pixelich.
Außerdem denke ich sollte man sich nicht wegen dem "sch ei ß" Microsoft den spaß an PNG vermaseln lassen.
Komisch bei mir klappt das mit den Bildern auch online, habe es auch an einem zweiten Rechner ausprobiert
grüße
Dramirak
Auch wenn das mit dem SP2 behoben werden sein sollte, würde mir das nicht weiterhelfen. Denn nicht jeder im Internet wird das SP2 installieren, das gleich gilt auch für den vernünftigen Brauser, ich bin schon seit einiger Zeit mit Opera unterwegs.
@Dr. Ma-Busen
Ich habe es auch schon mit GIF's versucht nur sind die Icons dann sehr schlechter Qualität. Denn bei GIF's kann ich Anialias nicht einschalten, da sonst ein hässliger weißer Rand erscheint. Und ohne das Antialias sind die Icons super pixelich.
Außerdem denke ich sollte man sich nicht wegen dem "sch ei ß" Microsoft den spaß an PNG vermaseln lassen.
Komisch bei mir klappt das mit den Bildern auch online, habe es auch an einem zweiten Rechner ausprobiert
grüße
Dramirak
Antwort 22 von Dramirak
Geschafft,
noch mal recht herzlichen Dank an dich Dr. Ma-Busen für deine Geduld, ohne deiner Hilfe wäre ich nicht so weit gekommen, zumindest nicht so schnell.
Vielleicht kann ja auch jemand anderes von diesem Thread profitieren.
hier noch mal das Ergebnis, vielleicht kann der eine oder andere es nochmal an seinem Rechner ausprobieren und Bescheid sagen ob alles funzt:
www.pesage.com/XDEV/problem.htm
mfg
Dramirak
noch mal recht herzlichen Dank an dich Dr. Ma-Busen für deine Geduld, ohne deiner Hilfe wäre ich nicht so weit gekommen, zumindest nicht so schnell.
Vielleicht kann ja auch jemand anderes von diesem Thread profitieren.
hier noch mal das Ergebnis, vielleicht kann der eine oder andere es nochmal an seinem Rechner ausprobieren und Bescheid sagen ob alles funzt:
www.pesage.com/XDEV/problem.htm
mfg
Dramirak