11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Un filtre pour IE6 qui rend le texte difficile à sélectionner

Salut à tous,

Afin de résoudre le problème de transparence PNG 32 sous IE 6, j'ai mis en place un JavaScript appliquant le filtre d'IE 6 aux images incriminées.

Seulement voilà, en l'appliquant à deux images d'arrière-plan, le menu devient pratiquement invisible et le texte du contenu ne peut plus être sélectionné (y compris les liens).

Voici le code JavaScript (du moins, un extrait se résumant à l'essentiel) :
// Fonction d'application du filtre d'IE 6 aux images d'arrière-plan
function fnFiltrePNG32CSS (selecteur, src)
{
  $(selecteur).css('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop");');
  $(selecteur).css('background', 'none');
}

$(document).ready(function ()
{
  // Images d'arrière-plan
  var aArrierePlan = [
    ['#corps', '../images/css/fond-conteneur-global.png'],
    ['#contenu', '../images/css/fond-contenu.png']
  ];
  for (var i = 0; i < aArrierePlan.length; i ++)
  {
    fnFiltrePNG32CSS (aArrierePlan[ i][0], aArrierePlan[ i][1]);
  }
}
);

Le résultat peut être consultable sur cette page (lien supprimé).
Modifié par Victor BRITO (24 Nov 2009 - 07:58)
Bonjour,

Ayant eu le même problème ( concernant le sélection du contenu ), j'ai résolu en passant d'un
 background: none;

à un
 background-image: url(none.gif);

où none.gif est une image transparente d'un pixel de côté

Je ne doute pas que tu pourras transformer ce code CSS en directive javascript (jquery)
Personnellement, j'aurai appliqué un style spécifiquement à IE6 via les commentaires conditionnels...

David
Victor BRITO a écrit :
Afin de résoudre le problème de transparence PNG 32 sous IE 6, j'ai mis en place un JavaScript appliquant le filtre d'IE 6 aux images incriminées.

OK, tu sors. Smiley lol

Sinon, mon conseil:
- ne pas utiliser d'images en PNG-32, c'est lourd pour pas grand chose le plus souvent;
- ou bien en utiliser, et ne pas s'occuper d'IE6;
- ou bien s'en occuper en mettant une couleur de fond personnalisée à l'image PNG-32, qui sera utilisée par IE6 à la place du fond gris moche (The Gimp fait ça bien);
- ou bien s'en occuper en remplaçant l'image en PNG-32 avec transparence graduelle par une image en PNG-8 avec transparence binaire;
- mais NE PAS UTILISER ALPHAIMAGELOADER;
- surtout si on ne maitrise pas;
- (et si on maitrise ben on sait qu'il faut pas l'utiliser);
- sans déconner.

Et si vraiment on est une fichue tête de mule qui fait rien qu'à vouloir avoir de la transparence graduelle du PNG-32 dans un navigateur qui le supporte pas en natif (rhaaaa!!!!!), on jettera un oeil à DD_belatedPNG qui est pas mal.

Voili voilou.
Modifié par Florent V. (02 Nov 2009 - 22:59)
Victor BRITO a écrit :
le menu devient pratiquement invisible et le texte du contenu ne peut plus être sélectionné (y compris les liens)

Ça s'appelle une punition divine, car tu péchas.

J'ai jeté un oeil au site. Pour dix images en PNG-32, il y en a sans doute une ou deux qui sont utiles. Dommage.
Finalement, j'ai résolu le problème en transférant les images d'arrière-plan vers des éléments img générés en JavaScript et positionnés en absolu et sur lesquels j'applique le filtre d'IE 6, avec le résultat attendu.

Florent, pour les PNG 32, j'ai profité d'une demande de retouche d'images pour faire un peu le ménage. Smiley cligne
Sujet clos
Aller à