[PNG] Désactivation du contenu sous IE

Rayniac · 10 Juillet 2006

Bonjour,

Premier post sur ce forum, qui m'a permis plusieurs fois de m'aider sur certains problèmes.

Aujourd'hui, je viens poster, pour demander un éclaircissement, sur un problème que je rencontre.

Le concept est donc d'afficher une image PNG en background afin de pouvoir écrire dessus, mais le problème lors de l'application du filtre DXImageTransform.Microsoft.AlphaImageLoader, est que le contenu du cadre devient inactif, ce qui est fort embetant.

Exemple illustré simplement:

http://acoutut.free.fr/css/

On voit très nettement que l'on ne peut cliquer sur les liens présents dans le cadre.

Source:

<!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" xml:lang="fr">
	<head>
		<title>.:Test :.</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
		<!--
		function main()
		{
		if(document.all && window.ActiveXObject)
		  {
			document.getElementById("main").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizing='crop');";
			document.getElementById("main").style.backgroundImage="none";
		  }
		}

		window.onload=main;
		-->
		</script>
	</head>
<body>

<div id="main">

	CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.

HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, position, mais aussi le formatage non visuel, comme la vitesse à laquelle le document doit être lu par des lecteurs de texte.

Ainsi, les avantages des feuilles de style sont multiples :

	<a href="">* La structure du document et la présentation sont gérés dans des fichiers séparés.</a>
	* La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace.
	* Dans le cas d'un site Internet, la présentation est uniformisée : Les documents (pages « html ») font référence à la (aux) même(s) feuille(s) de styles. Cette caractéristique permet de plus un "relookage" rapide.
	* Un même document peut donner le choix entre plusieurs feuilles de style (impression ou lecture à l'écran par exemple). Certains navigateurs web permettent d'accéder facilement à un choix de feuilles de style.
	* Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.

	<a href="">Cliquer ICI</a>
</div>
</body>
</html>

Style:


html 
{
margin: 0px;
padding: 0px;
}

body
{
margin: 0px;
padding: 0px;
font : 13px Arial, Helvetica, sans-serif;
color: #000000;
background-color:#669933;
}

#main
{
margin-top:30px;
margin-left:auto;
margin-right:auto;
width:650px;
height:382px;
background-image: url('fond.png');
background-repeat: no-repeat;
background-position:0% 0%;
}

Je m'en remets donc à vous, attendant patiemment, vos idées et solutions.

Merci d'avance

Edit captain_torche : lorsque tu insères de longs morceaux de code, il est préférable d'utiliser la balise codebox, qui n'étire pas tout le post en longueur. J'ai édité ton message en ce sens.

Modifié 11 Juillet 2006 par captain_torche

**captain_torche** · 11 Juillet 2006

Pourrait-on avoir un exemple d'utilisation "en conditions réelles" ? (Avec la vraie image en fond, plutôt qu'un aplat ?)

Et sinon, les filtres que tu utilises sont propriétaires Microsoft (ils ne sont censés fonctionner que sous IE : il serait dommage de se priver de l'audience des autres navigateurs).

Il y a sûrement une autre solution pour ce que tu veux faire, mais on aura besoin de plus de détails pour la trouver.

Rayniac · 11 Juillet 2006

dsl pour le code

Le lien ( http://acoutut.free.fr/css/ ) illustre parfaitement l'exemple, ce que je souhaite reellement obtenir est proche de ceci, puis pour revenir à ton message captain_torche, regarde le code, le filtre est appliqué uniquement pour IE qui ne gere pas la transparence des PNG ( sauf sur ceux sur 8 bits ).

Le problème peut se résumer ainsi: comment afficher un background en PNG dans un calque avec du contenu "interactif" ( hyperlien ) fonctionnant sous IE

Merci

Connexion

[PNG] Désactivation du contenu sous IE

Sujets conseillés

Rayniac

Lien vers le commentaire

Partager sur d’autres sites

captain_torche

Lien vers le commentaire

Partager sur d’autres sites

Rayniac

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité