Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
samuk
Threadersteller
Dabei seit: 01.06.2006
Ort: Upper-Eastside Helvetia
Alter: 48
Geschlecht:
|
Verfasst Mi 28.05.2008 09:40
Titel PNG und IE... |
|
|
... 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?
Zuletzt bearbeitet von samuk am Mi 28.05.2008 12:10, insgesamt 1-mal bearbeitet
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 28.05.2008 09:43
Titel
|
|
|
any code
|
|
|
|
|
Anzeige
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 28.05.2008 10:12
Titel Re: PNG un IE... |
|
|
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 |
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 28.05.2008 10:27
Titel
|
|
|
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
|
|
|
|
|
samuk
Threadersteller
Dabei seit: 01.06.2006
Ort: Upper-Eastside Helvetia
Alter: 48
Geschlecht:
|
Verfasst Mi 28.05.2008 10:36
Titel
|
|
|
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
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 28.05.2008 10:42
Titel
|
|
|
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
|
|
|
|
|
samuk
Threadersteller
Dabei seit: 01.06.2006
Ort: Upper-Eastside Helvetia
Alter: 48
Geschlecht:
|
Verfasst Mi 28.05.2008 12:09
Titel
|
|
|
whow. elegant! das geht ohne zusätzliche scripte?
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 28.05.2008 12:16
Titel
|
|
|
ähm ja.
du must halt das javascript einbinden.
|
|
|
|
|
|
|
|
|
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.
|
|