Pages :
(reprise du message précédent)

Quelle est votre méthode utilisée pour que la transparence des png s'applique sur les background d'une CSS externe ?
Visiblement, la méthode par Javascript dans le premier post d'ernstein ne passe pas.

En fait, je tente de faire un rollover CSS, avec des PNG transparent...
Modifié par Nigel (04 Jul 2006 - 12:48)
Voici un exemple de style CSS qui permet d'utiliser la transparence d'une image PNG sous IE:

#test{
height: 100px;
width: 100px;
background-image: url("image.png");
* background-image: url("blank.gif");
background-repeat: no-repeat;
* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}

blank.gif est une image en gif transparante.

Ceci marche pour une image utilisé en background d'un div par exemple mais cette technique peut être utilisé avec la balise image, en modifiant quelque truc...

Have fun
Ca peut être interessant si on trouve le moyen de l'appliquer à tous les png de la css externe !
Bonjour à tous,

en utilisant la fonction
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
dans ma feuille de style, le png transparent est bien géré par ie.

Le problème est que dans la div où j'ai appliqué le filter, il est impossible d'intéragir avec les liens ou les boutons javascript.
exemple :

<style>
#maDiv {
height: 400px;
width: 100px;
background-image: none;
background-repeat: no-repeat;	
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); 
}
</style>

<div id="maDiv">
<a href="http://www.alsacreations.com">Alsa</a>
<a href="javascript:void(0);" onclick="alert('paf');"><img src="bouton.jpg" title="mon bouton paf"/></a>
</div>


Si vous avez une idée, je suis preneur Smiley smile

merci d'avance.
Modifié par JFK99 (18 Jul 2006 - 18:34)
je reviens encore sur ce probleme car si on utilise un position: absolute; pour le container #maDiv, le position: relative; sur les liens n'est plus opérationnel... chiant ce ie !
Bonjour à tous !

Je rencontre également le problème de "liens inaccessibles" que JFK99 cite dans ses précédents messages. En fait le problème se produit sur tous les types d'objets contenus dans les balises auxquelles on a appliqué le filtre de Microsoft Smiley decu Donc aussi sur un formulaire par exemple, je ne parviens plus à accéder aux éléments...

La solution de Laurent Denis ne fonctionne pas non plus, je commence à vouloir réellement organiser un attentat chez les créateurs de IE6 Smiley fache

Si quelqu'un a une idée, je suis plus que preneur ! Et en attendant, merci beaucoup à toutes les anciennes contributions qui m'ont déjà beaucoup aidé Smiley smile
Modérateur
Je tente de rendre compatible IE à la transparence des png en utilisant la méthode de Justin Koivisto, Merci Stephan Smiley cligne .
Bon ben j'ai testé la manipulation proposée par Stephan et n'ai pas eu de résultat concluant (il faut m'excuser mais je n'ai que "bêtement" suivi la procédure, je n'ai aucune connaissance en php).
J'ai voulu intégrer ça au cms que j'utilise depuis peu : Plume CMS version 1.06.
J'ai placé dans le dossier des templates un dossier images dans lequel j'ai mis les 2 png de la source téléchargée. Puis j'ai ajouté les 2 balises (je ne sais pas si on parle également de balises en php) au début et à la fin de chaque gabarit (après et avant les balises de cache). J'ai placé le fichier "replacePngTags.php" dans le dossier templates (le dossier contenant les gabarits et le dossier images) ça ne fonctionne pas !
Voici le gabarit de la page d'accueil que j'ai modifié pour information et aide à la résolution :

<?php
// cache the page
if ($cache->processCache()):

pxTemplateInit('remove_numbers');
pxGetLastResources();
?>
<?php ob_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php pxInfo('encoding'); ?>" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
<?php pxHeadLinks(); ?>
<meta name="DC.title" content="<?php pxInfo('name'); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php pxInfo('url'); ?>rss.php" />
<link rel="stylesheet" type="text/css" href="<?php pxInfo('filesurl'); ?>theme/jojaba/style.css" media="screen" />
<title><?php pxInfo('name'); ?></title>
</head>
<!-- ================================= Début de la page ========================================= -->
<body>
<div id="page">
 
<!-- ==================== Titre ======================= -->
<div id="top">
<div id="search">
      <form action="<?php pxInfo('url'); ?>search.php" method="get">
        <h2>
          <label for="q">Rechercher :</label>
        </h2>
        <p class="field">
          <input name="q" id="q" size="15" value="" accesskey="4" type="text" />
          <input class="submit" value="Hopla !" type="submit" />
        </p>
      </form>
</div>  
<a href="<?php pxInfo('url'); ?>">
<img class="logo" alt="Merci &agrave; Darckforce pour ce logo !!!" src="<?php pxInfo('filesurl'); ?>theme/jojaba/img/logo-jojaba.gif" title="Merci &agrave; Darckforce pour ce logo !!!" width="150" height="150" />
</a>
    <h1><?php pxInfo('name'); ?></h1>
    <p class="description"><?php pxInfo('description'); ?></p>
</div>
<!-- ================ Fin du Titre ==================== -->  
<!-- ========================== Partie principale =================================== -->
<div id="main">
<!-- ================== Panneau latéral ========================= -->
<div id="sidebar">

  <div id="top-categories">
      <h2>Rubriques</h2>
      <?php pxPrimaryCategories('<ul>%s</ul>'); ?>
  </div>  

  <div id="links">
      <h2>Liens</h2>
      <ul>
      <li><a href="http://www.plume-cms.net/">PLUME CMS</a></li>
      <li><a href="http://nekodesign.net/">Nekodesign.net</a></li>
      <li><a href="http://extensions.geckozone.org/">Liberté d'extensions</a></li>
      <li><a href="http://www.geckozone.org/forum/">Forum Geckozone</a></li>
      </ul>
  </div>

  <div id="contact">
      <h2>Contact</h2>
      <ul>
      <li><a href="mailto:%6A%6F%6A%61%2E%62%61%40%6C%61%70%6F%73%74%65%2E%6E%65%74">Courriel</a></li>
      <li><a href="http://www.babelzilla.org/forum/index.php?showuser=155">BabelZilla</a></li>
      </ul>
  </div>
  
  <div id="syndicate">
      <h2>Syndication</h2>
      <ul>
      <li><a href="<?php pxInfo('url'); ?>rss.php">fil rss 1.0</a></li>
      </ul>
  </div>
  
  <div id="admin">
      <h2>Administration</h2>
      <ul>
      <li><a href="<?php pxInfo('url'); ?>manager">Accès au gestionnaire du site</a></li>
      </ul>
  </div>
  
</div>
<!-- ============== Fin du panneau latéral ========================= -->
<!-- ================ Historique de navigation ==================== -->
  <div id="traces">
  » <a href="<?php pxInfo('url'); ?>">Page d'accueil</a>
  </div>
<!-- ============== Fin de l'historique de navigation ============== -->
<!-- ==================== Contenu ======================================= -->
<div id="content">
<div id="titre-categorie">
<h2 class="principal">Bienvenue !</h2> 
<?php pxSingleCatDescription(); ?>
</div>

<div class="resource">
<h2 class="principal">Dernières ressources publiées</h2>
  <?php while (!$last->EOF()): ?>
  <h2 class="resource-title"><a href="<?php pxLastResPath(); ?>"><?php pxLastResTitle('%s', 'no_numbers'); ?></a></h2>
  <p class="resource-info">Le <?php pxLastResDateModification('%d/%m/%y à %HH%M'); ?>,
   par <?php pxResAuthor(); ?> <a href="<?php pxLastResPath(); ?>">Permalien</a></p>
	<?php
	  $last->moveNext();
	  endwhile;
	?>
</div>	  
</div>
<!-- ================================= Fin du contenu ============================================ -->
</div>
<!-- ====================== Fin de la partie principale =================================== -->
<!-- ============================== Pied de page ================================= -->
  <p id="footer">
  Site personnel de <a href="mailto:%6A%6F%6A%61%2E%62%61%40%6C%61%70%6F%73%74%65%2E%6E%65%74">jojaba</a>, tous droits réservés
  <br />
  <a href="http://www.plume-cms.net/">
  <img src="<?php pxInfo('filesurl'); ?>theme/jojaba/img/plume-cms-powered.png" alt="powered by PLUME CMS" />
  </a>
  <a href="http://validator.w3.org/check?uri=referer">
  <img src="<?php pxInfo('filesurl'); ?>theme/jojaba/img/xhtml10.gif" alt="valid xhtml 1.0 strict" />
  </a>
  </p>
<!-- ======================= Fin du pied de page ================================= -->  
</div>
</body>
<!-- ================================= Fin de la page =========================================== -->
</html>
<?php
    include_once 'replacePngTags.php';
    echo replacePngTags(ob_get_clean());
?>
<?php
// end of the cache of the page
$cache->endCache();
endif;
?>


Merci d'avance pour votre petit coup de pouce !
Modifié par jojaba (07 Aug 2006 - 15:24)
Salut

Question à 2 francs (j'ai pas regardé le code) : est-ce que tu as vidé le cache de Plume ? Sinon, il n'aura pas calculé la page avec les nouvelles fonctions Smiley ohwell
Modérateur
Sopo a écrit :
Salut

Question à 2 francs (j'ai pas regardé le code) : est-ce que tu as vidé le cache de Plume ? Sinon, il n'aura pas calculé la page avec les nouvelles fonctions Smiley ohwell

A 2 euros tu voulais dire, non ? Smiley ravi
Oui, j'ai bien vidé le cache ! Je commence à avoir l'habitude, je modifie à tout bout de champ mes templates.
Je me demande s'il ne faut pas placer le "replacePngTags.php" à un autre endroit. Concernant les deux balises à rajouter, là non plus je ne sais pas trop si j'ai bien fait de les mettre là où elles sont. Si je pouvais avoir un exemple de code source d'une page utilisant cette astuce ça m'aiderait sûrement...
Merci.
Guybrush Threepwood a écrit :
Bonjour à tous !

Je rencontre également le problème de "liens inaccessibles" que JFK99 cite dans ses précédents messages. En fait le problème se produit sur tous les types d'objets contenus dans les balises auxquelles on a appliqué le filtre de Microsoft Smiley decu Donc aussi sur un formulaire par exemple, je ne parviens plus à accéder aux éléments...

La solution de Laurent Denis ne fonctionne pas non plus, je commence à vouloir réellement organiser un attentat chez les créateurs de IE6 Smiley fache

Si quelqu'un a une idée, je suis plus que preneur ! Et en attendant, merci beaucoup à toutes les anciennes contributions qui m'ont déjà beaucoup aidé Smiley smile


Je suis moi aussi confronté au problème.
Guybrush Threepwood :as-tu finalement réussi à le résoudre ?
JFK99 a écrit :
Bonjour à tous,

en utilisant la fonction
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
dans ma feuille de style, le png transparent est bien géré par ie.

Le problème est que dans la div où j'ai appliqué le filter, il est impossible d'intéragir avec les liens ou les boutons javascript.
exemple :

<style>
#maDiv {
height: 400px;
width: 100px;
background-image: none;
background-repeat: no-repeat;	
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); 
}
</style>

<div id="maDiv">
<a href="http://www.alsacreations.com">Alsa</a>
<a href="javascript:void(0);" onclick="alert('paf');"><img src="bouton.jpg" title="mon bouton paf"/></a>
</div>


Si vous avez une idée, je suis preneur Smiley smile

merci d'avance.

Ce cas de figure n'est pas résolvable en CSS ?
J'aimerai éviter l'utilisation d'un script javascript... Smiley ohwell
En utlisant le javascript pour faire du png transparent les liens ne marchent plus sous IE, il faut donc mettre un div autour du texte en le mettre en position absolute, ca ne changera pas la position du texte et le texte deviendra selectionable comme ici:
http://www.infinitecolors.com[/url]


<div class="price" style="position:absolute; width:370px; ">
<p>Sylvie Yarza, the internationaly acclaimed performer and artist; <strong><a href="http://www.sylvieyarza.com" target="_blank" class="link1">www.sylvieyarza.com</a>, has herself reaped countless rewards and benefits through the application of this color system.</strong></p>
</div>


PS: Je viens de me rendre compte avec horreur que mon client c'est amusé dans le code et changer le texte dans dream et m'a rajouté des styles de partout ARGGHHH! donc la pollution du code n'est pas de moi lol

Autre detail, les png transparent sous IE7 sont plus foncé que sous Opera et FF, c'est un bug connu, le seul moyen d'y remedier est d'utiliser tweakPNG et de changer la valeur du gamma et trouver une valeur moyenne qui marche bien entre IE et FF.
Une chose que je ne comprends pas:

Si en appliquant le code du filtre on a des problèmes concernant les liens (Cf. nouveau tuto d'alsacreations concernant un site en x étapes), etc... si une solution javascript n'est valable qu'avec l'utilisation de javascript... pourquoi ne pas modiier tout simplement l'image via un logiciel comme tweakPNG à la base?

Il est certain que dans le premier message de ce sujet on voit clairement l'effet translucide que peut générer le format PNG. Mais ce fameux code:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

génèret-til la même transparence? une vraie transparence sous IE, et pas un simple effet d'opacité réduit... est-ce qu'avec tweakPNG on peut garder l'effet translucide du format PNG?

Est-ce que cet effet translucide spécifique dépend déjà du logiciel utilisé pour le créer (gimp, inkscape, photoshop) ? et ainsi, malgré toutes les astuces utilisées par la suite, le résultat sera là ou pas?

a+
Salut a tous je suis petit nouveau ici alors soyez indulgent...

Pour ce probleme de lien qui ne fonctionne pas, j'ai trouve une solution.

il faut mettre :

<div id="maDiv">
<div>
<a href="http://www.alsacreations.com">Alsa</a>
<a href="javascript:void(0);" onclick="alert('paf');"><img src="bouton.jpg" title="mon bouton paf"/>
</div></a>
</div>



En gros, il faut ajouter un div qui entoure le href

@+

JFK99 a écrit :
Bonjour à tous,

en utilisant la fonction
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
dans ma feuille de style, le png transparent est bien géré par ie.

Le problème est que dans la div où j'ai appliqué le filter, il est impossible d'intéragir avec les liens ou les boutons javascript.
exemple :

<style>
#maDiv {
height: 400px;
width: 100px;
background-image: none;
background-repeat: no-repeat;	
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); 
}
</style>

<div id="maDiv">
<a href="http://www.alsacreations.com">Alsa</a>
<a href="javascript:void(0);" onclick="alert('paf');"><img src="bouton.jpg" title="mon bouton paf"/></a>
</div>


Si vous avez une idée, je suis preneur Smiley smile

merci d'avance.
Les méthodes de transparence PNG sur ce topic sont formidables, mais je viens de m'apercevoir que si nous désirons appliquer un filtre d'opacité à une image PNG qui subit déjà l'une des méthodes de forçage de transparence... ça ne marche...

En gros ce que je désire faire, c'est utiliser
filter:alpha(opacity=60)
sur un PNG transparent (forcé pour IE)

Auriez-vous une petite idée pour faire marcher ces deux filtres en même temps, l'un dans le fichier HTC, l'autre (opacité) dans la css...? Smiley ohwell
Quelle casse-tête !
ernstein a écrit :
çà fonctionne à une exéption près ....... IE PC Smiley cligne

en fait quand j'utilise cette propriété sous IE


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/masque.png'); 


j'ai un décalage de quelques pixels à droite de mon bloc image..

je résume : j'ai un bloc image de 555px x 176px avec comme fond une illustration.. la balse image en elle même apelle je fichier PNG (masque.png)

ce bloc flotte à coté de mon menu (le menu est à sa gauche)

à partir du moment ou j'utilise la propriété filter mon menu se décale de quelques pixels à droite....

Dans le cadre du projet qui m'occupe, çà pose un problème...

et puis j'aime pas les trucs que je ne maîtrise pas Smiley smile

avez-vous rencontré ce problème ?

j'ai presque l'impression que çà se comporte comme la double marge sous IE


Une solution entièrement en CSS est disponible ici:
http://www.twinhelix.com/css/iepngfix/demo/

Une seule limitation, il est impossible d'utiliser la propriété background-repeat:repeat; sur l'image de fond png. L'image n'apparaitra qu'une seule fois.
Sinon toutes les autres configurations fonctionnent et la pacth ne s'applique qu'à IE6!
bonjour, n'y a t'il pas une méthode pour que la transparence fonctionne de manière simple en background-repeat?
Modifié par r4z (02 Jul 2007 - 10:20)
r4z a écrit :
bonjour, n'y a t'il pas une méthode pour que la transparence fonctionne de manière simple en background-repeat?

Si, ça s'appelle « mise à jour vers Internet Explorer 7 ». Smiley cligne
Sinon, non, pas de moyen simple. L'utilisation de Javascript et/ou des filtres propriétaires d'IE pour l'activation de la transparence PNG dans IE6 n'est qu'un pis-aller, et a ses limites.

Le mieux est encore d'en tenir compte dès la conception de la maquette. (Est-ce que ceci sera réalisable dans IE6 ? Est-ce qu'on pourra basculer vers des images opaques ou en transparence binaire pour IE6 via un commentaire conditionnel ? Etc.)
Pages :