Problème PNG avec menu déroulant

**abadou** · 15/09/2010, 19h49

Bonjour,

J'ai un menu déroulant et en dessous du bloc menu j'ai un bloc avecune background png pour résoudre le problème du png sous ie6 j'ai utilisé une fonction jQury:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
if( jQuery.browser.msie && (jQuery.browser.version == "6.0") ) {
							DD_belatedPNG.fix('.bg_png');							
 
	}

Le problème c'est que lorsque j'utilise cette fonctionne les menus déroulants paraissent en dessous du bloc png par contre lorsque j'enlève la fonction plus de problème,
Bien sure les menus déroulant ont une position absolute mais quand le bloc png se position sur les menus , j'ai utilsé le z-index mais ça n'a rien changé

Aves-vous une solution?

Merci d'avance

**Rahim-US** · 17/09/2010, 20h51

Salut, j'avais le même problème sur mon site avec les images png et IE6 et j'ai utilisé ce script pour résoudre le problème et ça a marché très bien:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(savePNG)
function savePNG(){
        if(!jQuery.browser.msie)return
 
		rePng         = /\.png/gi
		reUrl                = /url\((.+)\)/
		imgBlank         = 'space.gif';
 
        $('*',$('body')).each(
 
                function (i){
                        // 1 Traitement des attributs background
                        if($(this).attr('background')){
                                var bg = $(this).attr('background')
                                if(bg.match(rePng)!=null){
                                        $(this).attr('background','')
                                        $(this).css('backgroundImage','none')
                                        $(this).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bg+"', sizingMethod='scale');")
                                        return;
                                }
                        }        
                        // 2 Traitement des attributs css (background-image)
                        if($(this).css('backgroundImage')){
                                var bg = $(this).css('backgroundImage')
                                if(bg.match(rePng)!=null){
                                       var src = reUrl.exec(bg)
                                        $(this).css('backgroundImage','none')
                                        $(this).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src[1]+"', sizingMethod='scale');")
                                        return;
                                }
                        }
                        // 3 Traitement des attributs  src de la balise img
                        if(this.tagName=='IMG'){
                                var bg= $(this).attr('src')
                                if(bg.match(rePng)!=null){
                                        $(this).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ bg +"', sizingMethod='scale');");
                                        return;
                                }
                        }
                }
 
        )
}

J'espère que ça va marché avec toi.

**Bovino** · 17/09/2010, 20h55

Pour ma part, ça fait longtemps que j'ai abandonné ce genre de script pour les png. Je préfère créer un png pour les navigateurs et un gif pour IE6. Tant pis (j'aurais tendance à dire tant mieux

) si l'affichage est pourri avec le gif

**Rahim-US** · 17/09/2010, 23h53

moi personnellement j'ai abandonné l'utilisation des GIF, j'utilise les png avec le script, je le met dans un fichier pngfix.js par exemple et je l'utilise sur IE seulement en ajoutant cette ligne entre <head> et </head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if IE]><script src="pngfix.js" type="text/javascript"></script><![endif]-->

on peut aussi l'utilisé avec IE 6 seulement en ajoutant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if IE 6]><script src="pngfix.js" type="text/javascript"></script><![endif]-->

**polymorphisme** · 18/09/2010, 10h02

Bonjour,

je crois que ce genre de traitement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if IE]><script src="pngfix.js" type="text/javascript"></script><![endif]-->

complique inutilement la création et la gestion d'un site.
Mieux veux rester simple avec des fichiers png et des gif.

**Rahim-US** · 18/09/2010, 13h07

Oui mais il y a des problèmes avec les anciens navigateur (IE6 par exemple) et les fichier png, surtout dans la transparence des image png, pour Mozilla et Opera je pense que pas de problème alors j'ai ajouter le script seulement pour IE6, et si je l'utilise avec Internet Explorer seulement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if IE]><![endif]-->

ça ne pose pas de problème.

**polymorphisme** · 19/09/2010, 11h00

Oui, oui bien sûr ! On connait ces problèmes.

Il existe des méthodes génériques beaucoup plus propres
qui ne font pas intervenir une solution purement propriétaire.