Supportnet Computer
Planet of Tech

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

Antwort 3 von TroubleMaker

dramirak schaust du hier ;-)

TM

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:


<!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.

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>

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:


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 :)

<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 mit
myImage.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 schreiben
document.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:


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:



<!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:
<!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

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

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
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:


<!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:

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

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

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



Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: