6 svar · 377 visningar · startad av oskob
Hej och hå!
Sitter och jobbar med en sida och har ett litet javascript för att göra en snittsig liten animation med menyn, men såfort jag slänger in en png-fix för internet explorer så slutar den att fungera.
Funkar dock i FF både med och utan pngfixen.
menu.js
firstTime = true;
friction = 6;
function fixlinks() {
document.getElementById('menulink1').href = "#";
document.getElementById('menulink2').href = "#";
document.getElementById('menulink3').href = "#";
//alert(document.getElementById('menuitem1').anchor);
}
function highlight(target, action) {
if ( target == 'menuitem1' ) {
pic = 'portfolio';
}else if ( target == 'menuitem2' ) {
pic = 'about';
}else if ( target == 'menuitem3' ) {
pic = 'exit';
}
if ( action == 1 ) {
document.getElementById(target).src = "/img/" + pic + "Hi.png";
}else if ( action == 2 ) {
document.getElementById(target).src = "/img/" + pic + ".png";
}
}
function selectItem(selP) {
if ( firstTime == true ) {
if ( selected == '' ) {
aniMenu(selP, -25, 0, "yes");
firstTime = false;
}else if( selected != selP ) {
aniMenu(selP, -25, 0, "yes");
aniMenu(selected, 0, -25, "no");
firstTime = false;
}
}
}
function aniMenu(p, prevPos, finalPos, redirect) {
nextPos = (finalPos - prevPos) / friction;
nextPos += prevPos;
document.getElementById(p).style.top = Math.round(nextPos) + "px";
prevPos = nextPos;
if ( parseInt(document.getElementById(p).style.top) != finalPos ) {
window.setTimeout("aniMenu('"+p+"', "+prevPos+", "+ finalPos+", '" + redirect + "')", 1);
}else if (redirect == "yes") {
selected = p;
window.setTimeout("setUrl('" + p + "')", 100);
}
}
function setUrl(p) {
if ( p == 'menuitem1' ) {
window.location = "/portfolio/";
}else if ( p == 'menuitem2' ) {
window.location = "/about/";
}else if ( p == 'menuitem3' ) {
window.location = "/exit/";
}
}
pngfix.js
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// [url]http://homepage.ntlworld.com/bobosola[/url]. Updated 02-March-2004
function correctPNG()
{
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);
Och jag laddar in dem såhär:
\<script type="text/javascript" src="/js/menu.js"\>\</script\>
\<script type="text/javascript" src="/js/pngfix.js"\>\</script\>
Båda scripten fungerar ensamma men såfort jag lägger in båda samtidigt så vill inte explorer längre.
Kan någon förstå varför? Är det något som krockar?
Problemet med pngfix.js, är att efter att den har körts, så finns inget bildobjekt, och inget src. Den ersätts helt med en span som kör Microsofts DirectX Image Transform, vilket genererar en bild med det src som den hämtar ut från din image.
Det går att fixa, men jag är inte säker på hur snabbt det skulle köra. (Inte testat DX i internet explorer, så kan inte säga man veta hur snabb den är)
Lekt lite med den, inte den finaste lösningen, men det fungerar utan problem.. Och borde vara rätt lätt att förstå. Får ursäkta att kommentarerna är på engelska.. Lite bättre på det än svenska. :)
Hope it sheds some light.
Den png-fixare du har är otroligt ful. Bland annat för att den ändrar koden även för andra webbläsare än IE, (Tex firefox och Opera) som ju faktiskt har stöd för PNG med transparens.
Jag rekommenderar: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html som även borde funka med dit andra script.
Jag läser ju givetvis bara in raden om användaren kör explorer med <!--[if IE5.5 eller hur det där. Det är inte med i koden för jag testade om det skulle försöra för FF också :)
Men nu vet jag vad problemet är!
Testar ditt script nu dapper, men det är en rad som jag inte förstår:
element.src = "empty.gif";
varför kan man inte bara setta den till "" ?
R: Och jag fick problem med mouse over. När den byter bilden så blir det ju en vanlig PNG igen och därmed försvinner transparansen, så jag la in så den körde funktionen igen efter varje bildbyte men nu blinkar alla bilder till i blått (så som de är utan pngfixen) såfort jag för musen över någon knapp.
Tråkigt att behöva falla tillbaks på gamla sunkiga giffar bara för att explorer har sunkat till det.
R2:
Nej men fasen nu fungerar det!
När jag lagade länken till empty.gif så slutade den blinka sådär vid mouseover.
Tack dapper för hjälpen!
Och en till liten sak.
Hur gör jag om jag vill få bakgrunder i div:ar att få transparans? Nu söker den ju bara igenom img-elementen.
