extrem simpel mouseover!

Hvad gør fixPNG-funktionen?

<ole>

Nej, det er ikke HTML, men et forsøg på at skrive XHTML  :)

Problemet er bare, at ingen af de png-fixes, jeg har set, kan bruges under XHTML. Enten bør du undlade at bruge 24bits png'er - eller også bør du skrive HTML4.01 (som i modsætning til XHTML er understøttet på WWW - og den seneste standard, der er understøttet i de store browsere)

/mvh
</bole>

PS: og der er i øvrigt ikke tale om en 'extrem simpel mouseover'  ;o)

thesurfer>> fixPNG sørger for at ie5.5+ via et .js kan fortolke genemsigtigheden i png filer :-)

ole>> oki en dum fejl.., skal den så sættes til Transitional eller Strict?
-Men når det nu er efterspurgt kan du (eller en anden) ikke skrive mouseover funktionen ind?

Og har du evt. en federe måde til at få ie til at fortolke png filer korrekt?
dette er min pngfix.js:

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage)
{
    if ((version >= 5.5) && (version < 7) && (document.body.filters))
    {
      var imgID = (myImage.id) ? "id='" + myImage.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
                  + " style=\"" + "width:" + myImage.width
                  + "px; height:" + myImage.height
                  + "px;" + imgStyle + ";"
                  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
      myImage.outerHTML = strNewHTML     
    }
}

//(det er da ikke sådan når man ikke laver andet end flash dag ind og dag ud..hehe)

ole>> en super simpel så? haha vi må jo bare hæve points, eller lave funktionen på en anden måde ;-)

Jeg på vej udaf døren, men jeg kikker på det, når jeg kommer hjem  :)

vupti.. oki doki...

Jeg skal nok skrive herinde hvis jeg blive for utålmodig og laver en anden løsning på projektet :-)

det skal for iøvrigt også siges at dette KUN kommer til at fungere som en splash screen til mit flash site, så udfra det at dømme er det vel ikke de fineste finurligheder der skal tages i forhold da det jo ikke er et website som skal laves med en masse under sider...
det er kun for at give stemningen og fornemmelsen af at 'nu bliver du lukket ind i mit flash-univers'...haha

kig den hér:
www.Rittencom.dk/rittencom.html

Dette skulle for det første gerne være (næsten) standardiseret DOM og for det andet, er der en mouseover- og -out funktion, der kan skifte billedet ved 'over' og tilbage igen ved 'out':

function fixPNG(myImage) {
    if (version<5.5 || version>=7 || !document.getElementsByTagName("body")[0].filters) return;
    var imgClass, imgTitle, imgAlt, css, imgID = myImage.getAttribute("id");
    imgClass = myImage.getAttribute("className");
    imgAlt = myImage.getAttribute("alt");
    imgTitle = myImage.getAttribute("title");
    oSpan = document.createElement("span");
    if (typeof imgID=="string") oSpan.setAttribute("id", imgID);
    if (typeof imgClass=="string") oSpan.setAttribute("className", imgClass);
    if (typeof imgAlt=="string") oSpan.setAttribute("alt", imgAlt);
    if (typeof imgTitle=="string") oSpan.setAttribute("title", imgTitle);
    css = oSpan.style;
    css.cssText = myImage.style.cssText;
    css.display = "block";
    css.width = myImage.offsetWidth + "px";
    css.height = myImage.offsetHeight + "px";
    css.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + myImage.getAttribute("src") + "\', sizingMethod='scale')";
    oSpan.onmouseover = myImage.onmouseover;
    oSpan.onmouseout = myImage.onmouseout;
    myImage.parentNode.replaceChild(oSpan, myImage);
}
function swapOver(oImg, src) {
    if (oImg.tagName.toLowerCase()=="img") {
        oImg.setAttribute("initSrc", oImg.getAttribute("src"));
        oImg.setAttribute("src", src);
    } else {
        oImg.setAttribute("initSrc", oImg.filters[0].src);
        oImg.filters[0].src = src;
    }
}
function swapOut(oImg) {
    var oldSrc = oImg.getAttribute("initSrc");
    if (oImg.tagName.toLowerCase()=="img") oImg.setAttribute("src", oldSrc);
    else oImg.filters[0].src = oldSrc;
}

- og billedet:

<img src="pic.png"
    title="Min lile test"
    alt="Noget alternativ tekst"
    onmouseover="swapOver(this, 'picOver.png')"
    onmouseout="swapOut(this)"
    onload="fixPNG(this)">

Scriptet er en omskrivning af dit oprindelige, men jeg lod mig vist rive lidt for meget med  :)
Der er ingen grund til at indsætte et inline-element (et span) - blot for derefter at sætte dets display-property til 'block'. Så er det mere logisk at bruge et block-element (et div) i stedet:

function fixPNG(myImage) {
    if (version<5.5 || version>=7 || !document.getElementsByTagName("body")[0].filters) return;
    var imgClass, imgTitle, imgAlt, css, imgID = myImage.getAttribute("id");
    imgClass = myImage.getAttribute("className");
    imgAlt = myImage.getAttribute("alt");
    imgTitle = myImage.getAttribute("title");
    oDiv = document.createElement("div");
    if (typeof imgID=="string") oDiv.setAttribute("id", imgID);
    if (typeof imgClass=="string") oDiv.setAttribute("className", imgClass);
    if (typeof imgAlt=="string") oDiv.setAttribute("alt", imgAlt);
    if (typeof imgTitle=="string") oDiv.setAttribute("title", imgTitle);
    css = oDiv.style;
    css.cssText = myImage.style.cssText;
    css.width = myImage.offsetWidth + "px";
    css.height = myImage.offsetHeight + "px";
    css.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + myImage.getAttribute("src") + "\', sizingMethod='scale')";
    oDiv.onmouseover = myImage.onmouseover;
    oDiv.onmouseout = myImage.onmouseout;
    myImage.parentNode.replaceChild(oDiv, myImage);
}

- resten skal der ikke pilles ved

- og for at være lidt 'pillen', så bør variablen naturligvis erklæres med 'var' (det havde jeg faktisk også glemt med spannet):

var imgClass, imgTitle, imgAlt, oDiv, css, imgID = myImage.getAttribute("id");

Så er variablen lokal (kan kun læses/sættes indenfor funktionen), så du ikke kommer til at overskrive en global variabel med samme navn, som du evt. måtte oprette ved en senere opdatering  ;o)

olebole> tsk tsk.. det må være alderen.. :-)

thesurfer >> i så fald ville det nok være endnu værre ... langt værre!  ;D

*lyden af få, små, grå hår, der blafrer i forårsbrisen*

Hehehe! :-)

haha hvor er det kanont det hér :-D
-herligt!

ole>> jeg tester det lige så snart filmen er færdig..hehe :-D

thesurfer >> ej, nu har du jo ikke set mig, så det kan du jo ikke vide, men faktisk har jeg et langt, krøllet, blondt hår ............ ét ............ midt i venstre øjenbryn - og det er squide irriternde at holde nede!  *LooOooL*

exclusive >> helt okay  ;o)

ole>> kig engang på wwww.Rittencom.dk/rittencom.html
Det virker helt perfekt det du fik brygget sammen...!
-Men se engang.. den laver ikke handCursor (og der er endda lavet link på billedet) og man rørrer ikke billedet der hvor der er angivet i png'en at det skal være gennemsigtigt...

er det evt. det man kan fikse med den der 1x1px blank.gif ?

Nu har jeg lavet linket til at ligge på col'en men handCursor og swapOver ligger stadig kun på visse punkter af png'en :-(

olebole>> er det noget du evt. kan klare?

På opfordring her: http://www.eksperten.dk/spm/709500  :)

Jeg takker og bukker  ;o)