IE, transparent png's & usemap problem

[vagpap]

Καλησπέρα

 

Φτιάχνω μια σελίδα (στατική) html η οποία χρησιμοποιεί <img> αντικείμενα που έχουν src, trasparent png's. Μέσα στο img tag χρησιμοποιώ το usemap attribute για να ορίσω περιοχές κλικ μέσα στο img.

Στον firefox, όλα πάνε μια χαρά.

Στον IE 6, τα png πάνε κατά διαόλου.

Το transparency λύνεται με ένα javascript...

>
function correctPNG() { // correctly handle PNG transparency in Win IE 5.5 & 6.
            var arVersion = navigator.appVersion.split("MSIE")
            var version = parseFloat(arVersion[1])
            if ((version >= 5.5) && (document.body.filters)) {
                   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
                               var imgWidth = img.width
                               var imgHeight = img.height
                               
                               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:" + imgWidth + "px; height:" + imgHeight + "px;"
                               + imgStyle + ";" + " border-style:none;"
                               + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                               + "(src=\'" + img.src + "\', sizingMethod='image');\"></span>" 
                               img.outerHTML = strNewHTML
                               i = i-1
                        }
                   }
            }    
       }
       window.attachEvent("onload", correctPNG);

 

Έλα μου όμως που πάει περίπατο το usemap... :-S

Το span από ότι βρίσκω δεν υποστηρίζει usemap (κάνω λάθος?).

 

Καμιά ιδέα για να δουλέψει στον καταραμένο IE?

 

Thanks

[alex2005]

Τα .gif πάντως δεν έχουν πρόβλημα στο transparency.

Θα μπορούσες κάνεις τις εικόνες σου gif.

[alkisg]

Σε αυτό το σημείο,

+ "(src=\'" + img.src + "\', sizingMethod='image');\"></span>"

 

πρέπει να χρησιμοποιήσεις το img.innerHTML ώστε να αντιγράψεις και το image map, γιατί αλλιώς χάνεται. Το img.src δεν αντιγράφει το map...

[vagpap]

Σε αυτό το σημείο,

+ "(src=\'" + img.src + "\', sizingMethod='image');\"></span>"

 

πρέπει να χρησιμοποιήσεις το img.innerHTML ώστε να αντιγράψεις και το image map, γιατί αλλιώς χάνεται. Το img.src δεν αντιγράφει το map...

 

Σε έχασα...

Η

>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

δέχεται σαν attributes, src, sizingMethod & enabled.

Το img.innerHTML πού θα το χρησιμοποιήσω?

 

Παρεπιπτόντως, το img.innerHTML επιστρέφει κενό (σε alert)... Μάλλον επειδή:

The innerHTML property is valid for both block and inline elements. By definition, elements that do not have both an opening and closing tag cannot have an innerHTML property.

(Πηγή: MSDN)

 

Ας βάλω και την HTML...

>
<img src="../../images/forms/main/frmMain_lowerRight_el.png" style="border-style:none" usemap="#mainIndex">
<map name="mainIndex">
   <area id="corporate" shape="rect" coords="69,19,304,32" alt="Corporate Campaign" href="frmCampaign_el.html"/>
   <area id="portfolio" shape="rect" coords="69,46,135,59" alt="Main Options" href="frmPortfolio_el.html"/>
   <area id="contact" shape="rect" coords="69,72,160,83" alt="Contact Us" href="frmContact_el.html"/>
</map>

Το gif format δεν απεικονίζει τα χρώματα ίδια με το png, συνεπώς είναι η δεύτερη λύση στην περίπτωση που δεν τα καταφέρω...

 

Thanks

[alkisg]

Για το innerHTML φυσικά έχεις δίκιο, παίρνει αυτό που είναι μέσα στα tags, ενώ εγώ εννοούσα ότι έπρεπε να πάρεις το usemap. Γίνεται με outerHTML αλλά θα είναι πιο απλό να το πάρεις κατευθείαν με την img.useMap:

http://msdn2.microsoft.com/en-us/library/ms534711.aspx

 

Επίσης δίκιο έχεις που ρωτάς τι θα το κάνεις, αφού η AlphaImageLoader δεν υποστηρίζει maps: Μια λύση είναι για κάθε image να βάζεις στο span ένα ακόμα absolutely positioned image με τις ίδιες διαστάσεις με το αρχικό.

Αυτό το δεύτερο image, μπορεί να είναι ένα διαφανές .gif 1x1 pixel (φυσικά στο width και height δεν θα βάζεις 1x1, θα βάζεις αυτά του αρχικού image).

Και επειδή θα πέφτει στο ίδιο σημείο με το αρχικό και θα έχει και το image map (που πήρες παραπάνω με την usemap) θεωρητικά θα φαίνεται στο χρήστη όπως το θέλεις...

 

Δηλαδή ο κώδικας που πρέπει να παράγεις στο περίπου είναι

<span .... filter:progid:DXImageTransform...><img src="empty1x1.gif" width="...32px" height="...32px" usemap="#mainIndex"></span>

[vagpap]

Thanks alkisg.

Το trick με το gif δούλεψε μια χαρά, με μια μικρή λεπτομέρεια: κατά την πλοήγηση, η περιοχή του usemap φαίνεται να έχει χωριστεί ανά pixel σε clickable και μη, εναλλάξ. Μικρό το κακό ;-)

 

Α ρε καταραμένε IE... όλο πατέντες θέλει αυτό το πράμα...

Κάπου διάβασα το εξής:

Remembert Firefox shows what you wrote - IE shows what it thinks you want.

[alkisg]

Υ.Γ. βάλε να μην προσθέτει το φίλτρο στον IE7, αφού τα .png παίζουν ΟΚ:

 

if ((version >= 5.5) && (version < 7.0) && (document.body.filters)) {

...

 

Πάντως εγώ για την ώρα προτιμώ τα .gif, απλά τα κάνω edit ώστε να έχουν και το background μαζί (χωρίς διαφάνεια δηλαδή)...

 

Συμφωνώ απόλυτα με το quote σου!

[vagpap]

Κάτι μου λέει ότι θα τα γυρίσω και εγώ στα gif's γιατί ο συνδυασμός τους (png & gif) μου τα χαλάει λίγο στην τοποθέτησή τους....

Τη διαφάνεια τη θέλω, οπότε θα την κρατήσω.

ΙΕ 7 δεν έχω πρόχειρο... οπότε δεν το ήξερα... Αν αντικαταστήσει πλήρως τον 6... θα το γυρίσουμε στα png...