[HTML] Images et transparence

Version imprimable

08/03/2006, 11h07
ashurai

[HTML] Images et transparence

Bonjour à tous,

J'ai un petit problème avec un image avec un bout transparent :

Cette derniere est dans un div de couleur B, ce dernier étant dans un div de couleur A.

Evidemment, je souhaiterait que le bout transparent soit de la couleur B, mais il est de la couleur A.... Donc c'est pas trés beau... :o(

Quelqu'un à t'il déjà eu ce cas ?
08/03/2006, 11h12
ashurai

Petite précision : Sous FireFox ca réagit correctement, pas sous I.E.

Vive I.E !
08/03/2006, 13h59
AlphaYoDa

Si ton image est un .png c'est normal car IE ne gère pas la transparence de ces images. Personnelement j'utilise un javascript chargé sur chaque page qui permet la transparence sur IE (à l'aide d'un div supplémentaire)
08/03/2006, 14h07
ashurai

Tu pourrais me donner la source de ton javascript ?

J'en ai trouver 2, mais aucun ne marche ...
08/03/2006, 14h16
ashurai

C'est pas grave, j'ai mis un GIF à la place.

Merci quand même.

excuse moi je ne suis pas repassé :

voilà le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
  {
  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
             }
     }
  }
if(typeof window.addEventListener != 'undefined') window.addEventListener('load', correctPNG, false);
else if(typeof document.addEventListener != 'undefined') document.addEventListener('load', correctPNG, false);
else if(typeof window.attachEvent != 'undefined') window.attachEvent('onload', correctPNG)