8796 sujets

Développement web côté serveur, CMS

Trouvez-vous cette astuce utile ?







[Astuce] Transparence PNG Sous I.E. Nikel chrome avec ce script

Bonjour à tout le monde ! Smiley smile

Je viens de faire finalement mon script en PHP pour afficher correctement les images PNG en background pour tous les navigateurs.

Ce code est à insérer dans le header
<?php
	function backgroundPng($nombre){
 		if(preg_match("@MSIE ([0-9].[0-9]{1,2})@", $_SERVER['HTTP_USER_AGENT'], $resultats))
                                  echo('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale src=\'url/' . $nombre .'.png\')};');
		else	
                       echo('background-image:url(\'url/' . $nombre . '.png\');');
	}
?>


N'oubliez pas de remplacez "url" par le dossier (Ou par un blanc si c'est dans le même répertoire que ce code). Smiley cligne

Une fois ce code inséré dans le header, il vous suffit de faire votre emplacement pour l'image background (sans la mettre) et d'y préciser un petit code : style="<? backgroundPng(name); ?>" en remplaçant "name" par le nom et le dossier de votre images.

ATTENTION : Si l'url de votre image est "images_png/1.png" (= le nom de l'image est un numéro) alors le code à insérer sera style="<? backgroundPng(1); ?>" et il faudra remplacer dans le script du header, "url" par "images_png/".
En revanche, si l'url de votre image est "images_png/image1.png" (= le nom de l'image est un mot) alors le code à insérer sera style="<? backgroundPng('image1'); ?>" il y aura donc les signes ' à rajouter si le nom de l'images contient autre chose que des chiffres.

Exemple d'utilisation pratique du script : 

<?php
	function backgroundPng($nombre){
 		if(preg_match("@MSIE ([0-9].[0-9]{1,2})@", $_SERVER['HTTP_USER_AGENT'], $resultats))
                                  echo('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale src=\'png/' . $nombre .'.png\')};');
		else	
                       echo('background-image:url(\'png/' . $nombre . '.png\');');
	}
?>
</head>
<body>
<......>
<td width="100%" height="37" style="<? backgroundPng(1); ?>">texte ou non</td>


L'url de l'image affichée en background sera donc : "png/1.png"


Des questions ?


A+
FluidBlow Smiley biggrin
Modifié par FluidBlow (12 Jan 2009 - 19:11)
Salut,

Si tu positionne un lien sur un élément avec un background en png avec ton script, ton lien fonctionne-t-il ?
La détection navigateur n'est pas fiable même via PHP (proxy par exemple)

Les méthodes à base de CSS pur et de détection de fonctionnalité sont meilleures.

(peux tu editer ton titre de sujet s'il te plait, Smiley astuce ne veut pas dire grand chose... Smiley astuce transparence PNG serait déjà un peu mieux)
Modifié par Olivier (10 May 2006 - 18:29)
Bonjour à tous !!

J'ai effectué plusieurs tests sur différent ordinateurs/naviguateurs, aucun problème n'a eu lieu pour la détection, car I.E. est très reconnaissable des autre naviguateurs, il est donc presque impossible qu'un script comme celui-ci puisse se tromper entre I.E. et les autres naviguateurs. Smiley cligne

Pour éviter de tuer les liens, en effet, j'avais oublié de le préciser, il suffit de rajouter dans le style style="<? backgroundPng(1); ?>cursor:pointer;" mais après il manque un bout de code dont je n'arrive plus à me souvenir...

J'en reparle dès qu'il me revient.
FluidBlow a écrit :

J'ai effectué plusieurs tests sur différent ordinateurs/naviguateurs, aucun problème n'a eu lieu pour la détection, car I.E. est très reconnaissable des autre naviguateurs, il est donc presque impossible qu'un script comme celui-ci puisse se tromper entre I.E. et les autres naviguateurs. Smiley cligne


Non ! justement ! C'est tests ne sont pas fiable, notament en ce qui concerne les proxy etc.

Les tests de détection de navigateurs NE SONT PAS FIABLES. Smiley cligne
Olivier a écrit :


Non ! justement ! C'est tests ne sont pas fiable, notament en ce qui concerne les proxy etc.

Les tests de détection de navigateurs NE SONT PAS FIABLES. Smiley cligne


Je ne doute pas un seul instant de ta parole Smiley confused mais mes test était concluants, peut-être était-ce dû à un coup de chance ?
Salut,

Pourquoi réinventer la roue. Le problème n'existe qu'avec IE. Donc la solution est à apporter à IE.
Il existe les commentaires conditionnels pour isoler la solution et un script sous forme de .htc qui s'incrit dans la css pour IE et qui fait très bien l'affaire.

Une recherche sur Google donne :
win_png.htc
Bonjour,

En aucun cas je réinvente la roue, je ne fais que rendre des services à tant de gens qui aimeraient avoir des images png 32 bits sous ie en BACKGROUND, et aucun des quelques scripts ne fonctionnaient correctement.

Aujourd'hui je vais encore plus loin, en transposant ma technique en javascript !

<script type="text/javascript" language="javascript">
	function backgroundPng( width,height,nombre ){
		<!--  document.write ('entree dans la function'); -->
			document.write('<td width="'+width+'" height="'+height+'" style="');
			if (navigator.appName=="Microsoft Internet Explorer")
		        document.write ('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=\'images_png/' + nombre +'.png\')};');
			else document.write('background-image:url(\'images_png/' + nombre + '.png\');');
		document.write('"></td>');
	}
</script>

Et includer ça dans le body, par exemple entre deux balise <tr>LE code suivant :</tr>

<script>javascript:backgroundPng('100%','37','1');</script>


En appelant "<script>javascript:backgroundPng('100%','37','1');</script>", vous devez précisez, si vous utilisez un tableau, la longueur (width : 100%), la hauteur (height:37) et le nom de votre image (1);

Script bien sur, a modifier selon votre cas, ce n'est juste que le model !!

Bonne conversion !
A+
Modifié par FluidBlow (11 May 2006 - 17:45)
Malheureusement, pour avoir l'aspect souhaité (transparence Alpha, et non transparence d'index), il faut exporter ses PNG en 32 bits pour IE, alors que Firefox interprète la transparence partielle avec des PNG 8 bits sans problème. Deuxième problème, les évènements semblent ne pas vouloir se déclencher. Est ce que quelqu'un a déjà rencontrer ce problème ? Est ce que la solution avec win_png.htc est différente vis-a-vis des ces bugs ?
Salut euh voila j'ai tester ton code, et j'ai un petit problème sous IE ... ou bien le la transparence n'est pas gérée (en background) ou bien les liens ne marchent pas,

On m'a dit que sous IE 6.0 ça marchait mais chez moi ça na jamais marché ...

si tu pouvais m'apporter une réponse s'il te plaît merci Smiley lol
Bonsoir,

En effet, les liens ne fonctionnent pas directemment, il faut se meler à du css, par exemple pour regler ce probplème, je ne me souviens plus du code exact pour rendre le background cliquable. Mais il gère 100% la transparence.

Smiley cligne
Exuse moi j'ai pas très bien compris l'idée ??

il faudrait que je je fasse un background de transparence derrière tout les liens ? pour que ça puisse marcher ???

Et j'ai une question, est ce qu'on peut mettre du php dans le fichier .css ? pour avoir toute la mise en place du design dans le fichier CSS ?

Merci d'avance Smiley cligne
Bonsoir,

Non, on ne peut pas mettre de php dans un fichier css classique.
Sinon, pour l'utilisation de mon script, c'est très simple : tu inseres le script dans la page que tu veux afficher des images png, et tu affiche l'image png sous fprùe de background. Au lieu d'utiliser <img...> tu utilise soit un tableau pour mettre ton image avec l'attribut background, soi une balise block classique, du genre <div> ou autre.
C'est exactement ce que j'ai fait, et ça marche sous IE 6.0 et mozilla, mais chez moi les liens ne s'activent pas, je te montre mon code : 
<?php
	 function backgroundPng($nombre){
		   $repertoire = 'images/';
	   if(preg_match("@MSIE ([0-9].[0-9]{1,2})@", $_SERVER['HTTP_USER_AGENT'], $resultats)) {
				echo('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale src=\''.$repertoire.$nombre.'.png\')};'); }

		else {
				echo('background-image:url(\''.$repertoire.$nombre.'.png\');'); }

}

?>
<link href="lalonde.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="popup.js"></script>
</head>

<body>
	<div id="haut">
	</div>
	
	<div id="menu" style="<?php backgroundPng(background_menu)?>">
		<!--[if IE]><p><br/></p><![endif]-->
		<ul>
			<li><a href="index.php5">Acceuil</a></li>
		</ul>
		<div class="sous_menu">
			<h1>Location F2</h1>
			<ul>
				<li><a href="index.php5?page=photos&type=f2">Photo</a></li>
				<li>Vidéo</li>
				<li><a href="index.php5?page=calendrier&type=f2">Calendrier</a></li>
				<li><a href="index.php5?type=f2&page=contact">Prendre contact</a></li>
			</ul>
		</div>
	
		<div class="sous_menu">
			<h1>Location F4</h1>
			<ul>
				<li><a href="index.php5?page=photos&type=f4">Photo</a></li>
				<li>Vidéo</li>
				<li><a href="index.php5?page=calendrier&type=f4">Calendrier</a></li>
				<li><a href="index.php5?type=f4&page=contact">Prendre contact</a></li>
			</ul>
		</div>
	</div>
	
	<div id="corps" style="<?php backgroundPng(background_body)?>">
	<?php 
		if($_GET['type'] == NULL AND $_GET['page'] == NULL)
		{
			include('principal.php');
		}
		else if($_GET['page'] == 'contact')
		{
			include('contact.php');
		}
		else if($_GET['page'] == 'photo')
		{
			include('photo.php');
		}
		else if($_GET['page'] == 'video')
		{
			include('video.php');
		}
		else if($_GET['page'] == 'calendrier')
		{
			include('calendrier.php');
		}
		else if($_GET['page'] == 'photos')
		{
			include('photos.php');
		}
	?>
	</div>


Ca c'est mon code index.php5

Et sous IE comme je te l'ai dit, j'ai des problèmes pour les liens (mais en tout cas l'astuce est vraiment cool Smiley cligne

http://falto.free.fr/lalonde ... :s
L'adresse c'est euh : (a partir de la racine : ) images/f4(ou 2)_$i (ou $i = 0 ++ )

Voila ... mais si tu veux, l'adresse est bonne puisque j'ai la transparence mais les liens ne fonctionnent pas :s

PS : je pars pendant un mois, alors si tu n'a pas de questions pendant un mois, ne t'étonne pas Smiley langue et merci de m'aider Smiley cligne

EDIT : euh pour l'adresse en fait 'jai changer va sur http://loca-louclapas.ovh.org
si tu en as besoin (merci encore de ton aide)
Modifié par falto (30 Jun 2006 - 21:11)
Sujet clos
Aller à