mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:28 Benutzername: Passwort: Auto-Login

Thema: PNG und IE... vom 28.05.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> PNG und IE...
Seite: 1, 2  Weiter
Autor Nachricht
samuk
Threadersteller

Dabei seit: 01.06.2006
Ort: Upper-Eastside Helvetia
Alter: 48
Geschlecht: Männlich
Verfasst Mi 28.05.2008 09:40
Titel

PNG und IE...

Antworten mit Zitat Zum Seitenanfang

... ich weiss, ein altes und oft diskutiertes problem.
hab auch schon einige tricks angewendet - jedoch nicht mit dem erwarteten resultat.

problem: alphatransparente png-navigation mit rollovereffekten auf header, welcher immer ein bisschen wechselt.

mit einigen scripts zeigt er das auch (für ie-verhältnisse) hübsch an, wenn man aber mit der maus drüberfährt, rollen alle navis auf "aktiv".

"verzweifel"


any lösungsvorschläge? * Keine Ahnung... *


Zuletzt bearbeitet von samuk am Mi 28.05.2008 12:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 28.05.2008 09:43
Titel

Antworten mit Zitat Zum Seitenanfang

any code * Keine Ahnung... *
  View user's profile Private Nachricht senden
Anzeige
Anzeige
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Mi 28.05.2008 10:12
Titel

Re: PNG un IE...

Antworten mit Zitat Zum Seitenanfang

samuk hat geschrieben:
... rollen alle navis auf "aktiv".


klingt für mich eher nachm fehler im code - nicht im png...!


Kash hat geschrieben:
any code * Keine Ahnung... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 28.05.2008 10:27
Titel

Antworten mit Zitat Zum Seitenanfang

ich nehme jetzt einfach mal an das die id die beim rollOver angegeben ist bei allen <a> elementen die selbe ist.
aber wie gesagt ohne code kann man nur raten
  View user's profile Private Nachricht senden
samuk
Threadersteller

Dabei seit: 01.06.2006
Ort: Upper-Eastside Helvetia
Alter: 48
Geschlecht: Männlich
Verfasst Mi 28.05.2008 10:36
Titel

Antworten mit Zitat Zum Seitenanfang

das ganze läuft momentan mit dem script von erik arvidson


Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="9"><img src="_org/trans.gif" width="1024" height="208" /></td>
</tr>
<tr>
<td><img src="_org/trans.gif" width="274" height="22" /></td>
<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','_org/navig/01_unternehmen_akt.gif',1)"></a></td>
<td><a href="01_unternehmen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','_org/navig/01_unternehmen_akt.png',1)"><img src="_org/navig/01_unternehmen_pass.png" name="Image5" width="103" height="22" border="0" id="Image5" /></a></td>
<td><a href="02_leistungen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','_org/navig/02_leistungen_akt.png',1)"><img src="_org/navig/02_leistungen_pass.png" name="Image6" width="82" height="22" border="0" id="Image6" /></a></td>
<td><a href="03_direktversand.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','_org/navig/03_direktversand_akt.png',0)"><img src="_org/navig/03_direktversand_pass.png" name="Image7" width="108" height="22" border="0" id="Image7" /></a></td>
<td><a href="04_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','_org/navig/04_news_akt.png',1)"><img src="_org/navig/04_news_pass.png" name="Image8" width="97" height="22" border="0" id="Image8" /></a></td>
<td><a href="05_support.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','_org/navig/05_support_akt.png',1)"><img src="_org/navig/05_support_pass.png" name="Image9" width="66" height="22" border="0" id="Image9" /></a></td>
<td><a href="06_kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','_org/navig/06_kontakt_akt.png',0)"><img src="_org/navig/06_kontakt_pass.png" name="Image10" width="60" height="22" border="0" id="Image10" /></a></td>
<td><img src="_org/trans.gif" width="233" height="22" /></td>
</tr>
         
</table>


sorry die darstellung
der css-tag sieht so aus:
Code:
img {
behavior: url("_org/pngbehavior.htc");
}


die "pngbehavior.htc" dann so:
Code:
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>
/*
* PNG Behavior
*
* This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
* for WebFX (http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage see license at http://webfx.eae.net/license.html
*
* Version: 1.02
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
* 2004-05-09 When printing revert to original
*
*/

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";

var realSrc;
var blankSrc = "blank.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};

function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}

function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}

function afterPrint() {
isPrinting = false;
fixImage();
}
</script>
</public:component>


Zuletzt bearbeitet von samuk am Mi 28.05.2008 10:39, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 28.05.2008 10:42
Titel

Antworten mit Zitat Zum Seitenanfang

die javascript funktionen?

MM_swapImgRestore() und MM_swapImage() ??

wir haben in einem Projekt bei uns die selbe JavscriptFunktion genutzt

Code:

<a href="*.html" class="link" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('p1','','img/image2.gif',1)"><img src="img/image1.gif" border="0" name="p1" alt="" /></a>


bei mehren Links müßtest du nur bei jedem Link 'p1','p2','p3', und so weiter.

so und noch die nötigen Javascripte

Code:

<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);


function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr;
          for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) {
                  if (marker!=x.name) x.src=x.oSrc;
          }
}

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// -->


Zuletzt bearbeitet von Kash am Mi 28.05.2008 10:50, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
samuk
Threadersteller

Dabei seit: 01.06.2006
Ort: Upper-Eastside Helvetia
Alter: 48
Geschlecht: Männlich
Verfasst Mi 28.05.2008 12:09
Titel

Antworten mit Zitat Zum Seitenanfang

whow. elegant! das geht ohne zusätzliche scripte?
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 28.05.2008 12:16
Titel

Antworten mit Zitat Zum Seitenanfang

ähm ja.
du must halt das javascript einbinden.
  View user's profile Private Nachricht senden
 
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.