18073 sujets

Questions générales et questions de débutants

Pb mise en oeuvre Tutorial "zone réactive(image map) en CSS"

Bonjour,
Tout d'abord merci pour la qualité de vos tutoriaux dont j'essaie de m'inspirer pour créer mon 1er site en essayant de respecter les standards .

Je rencontre un pb avec ie ( c'est ok avec firefox) lorsque je veux appliquer le tutorial des zones réactives en css.
J'ai une image découpée en 3 parties.
A ces 3 parties j'ai associé un lien en lui spécifiant des propriétés de type bloc, de telle façon qu'au survol d'une des parties de l'image le browser m'affiche un zoom de cette partie sur la totalité de l'image .
Les 3 parties sont définies dans des div flottants à gauche .
Sous ie, lorsque je survole une partie , les autres parties sont décalées, il n' y a pas de recouvrement comme peut le faire ff . J'utilise pourtant les z-index, dont je crois avoir compris que c'était la finalité .

Voici mes css :
/* CSS Document */
#Installation {
position:relative;
left:2%;
float:left;
border: 1px solid white;
width:130px;
height:90px;
top:5px;
background:url(../Images/compo.png) top left no-repeat;
/* z-index:4;*/
}
#InstallationVestiaire {
position: relative;
float:left;
/*display:none;*/
/*text-align:left;*/
background:none;
width : 65px;
height: 45px;
}
#InstallationMaison {
position: relative;
float:left;
/*display:none;*/
width : 65px;
height: 45px;
}
#InstallationTerrain {
position: relative;
float:left;
/*background:none;*/
width : 130px;
height: 45px;
}
#InstallationVestiaire:hover {
width : 130px;
height: 100%;
background: url(../Images/Vestiaires.png) top left no-repeat;
z-index: 100;
}
#InstallationMaison:hover {
width : 130px;
height: 90px;
margin-left:-50%;
background: url(../Images/MaisonAssos.png) top left no-repeat;
z-index: 90;
}
#InstallationTerrain:hover {
width : 130px;
height: 90px;
margin-top:-35%;
background: url(../Images/Terrain.png) top left no-repeat;
z-index: 80;
}
/* Structure de la page */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 650px;
background-color: #BFFFBF;
}
.Haut {
background-color:#BDCDE8;
height: 110px;
width:100%;
top:0%;
margin-top:0px;
border: 0;
}
/* Police d'affichage */
p {
font-family: "Comic Sans MS";
color: #0000FF;
font-style: italic;
font-size: 15px;
font-weight: bold;
}

/* CSS Document */
.Bas {
background-color:#BFFFBF;
height: 150px;
width: 100%;
float: left;
}
#fleur {
position:relative;
top:5%;
width:50px;
height:41px;
z-index:6;
left: 50%;
}


Voici mon code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>APM Football</title>
<style type="text/css" media="screen">
<!--


.Centre {
background-color:#FFFFFF;
float: left;
height: 400px;
width: 60%;
}
.texte {
left:3%;
top:4%;
width:94%;
height:96%;
z-index:2;
background-color: #E2E4EF;
overflow: scroll;
visibility: visible;
position: relative;
}
.MilieuGauche {
background-color:#BDCDE8;
float:left;
height: 400px;
width: 20%;
}
.MilieuDroit {
background-color:#BDCDE8;
float: left;
height: 400px;
width: 20%;
}
-->

</style>

<script type="text/javascript" >
<!--
//-->
</script>
</head>
<link rel="stylesheet" type="text/css" href="css/Entete.css">
<link rel="stylesheet" type="text/css" href="css/Pied.css">
<body>


<div class="Haut">

<div style="display: none;"><img alt="" src="../Images/Vestiaires.png" /><img alt="" src="../Images/MaisonAssos.png" /><img alt="" src="../Images/Terrain.png" />
</div>
<div id="Installation">
<a id="InstallationVestiaire" href="#" title="Vestiaires zoom"></a>
<a id="InstallationMaison" href="#" title="Maison des Associations zoom"></a>
<a id="InstallationTerrain" href="#" title="Terrain zoom"></a></div>

</div>


<div class="MilieuGauche">
</div>

<div class="Centre">
<div class="texte">

<blockquote>
<p align="center" >&nbsp;</p>
<p align="center" >Debut du texte </p>
</blockquote>

</div>
</div>

<div class="MilieuDroit">
</div>

<div class="Bas">
</div>
</body>
</html>

J'ai parcouru les cas résolus du forum et je ne pense pas avoir trouvé de réponse;
si quelqu'un veut se pencher sur mon pb ce serait sympa .

Merci

Désolé pour le non respect d'édition du code, ce n'est pas faute d'avoir parcouru les régles, mais je suis passé au travers ... donc je corrige

/* CSS Document */
#Installation {
	position:relative;
	left:2%;
	float:left;
	border: 1px solid white;
	width:130px;
	height:90px;
	top:5px;
	background:url(../Images/compo.png) top left no-repeat;
/*	z-index:4;*/
}
#InstallationVestiaire {
position: relative;
float:left;
/*display:none;*/
/*text-align:left;*/
background:none;
width : 65px;
height: 45px;
}
#InstallationMaison {
position: relative;
float:left;
/*display:none;*/
width : 65px;
height: 45px;
}
#InstallationTerrain {
position: relative;
float:left;
/*background:none;*/
width : 130px;
height: 45px;
}
#InstallationVestiaire:hover {
width : 130px;
height: 100%;
background: url(../Images/Vestiaires.png) top left no-repeat;
z-index: 100;
}
#InstallationMaison:hover {
width : 130px;
height: 90px;
margin-left:-50%;
background: url(../Images/MaisonAssos.png) top left no-repeat;
z-index: 90;
}
#InstallationTerrain:hover {
width : 130px;
height: 90px;
margin-top:-35%;
background: url(../Images/Terrain.png) top left no-repeat;
z-index: 80;
}
/*  Structure de la page */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 650px;
	background-color: #BFFFBF;
}
.Haut {
	background-color:#BDCDE8;
	height: 110px;
	width:100%;
	top:0%;
	margin-top:0px;
	border: 0;
}
/* Police d'affichage */
p {
	font-family: "Comic Sans MS";
	color: #0000FF;
	font-style: italic;
	font-size: 15px;
	font-weight: bold;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>APM Football</title>
<style type="text/css" media="screen">
<!--


.Centre {
	background-color:#FFFFFF;
	float: left;
	height: 400px;
	width: 60%;
}
.texte {
	left:3%;
	top:4%;
	width:94%;
	height:96%;
	z-index:2;
	background-color: #E2E4EF;
	overflow: scroll;
	visibility: visible;
	position: relative;
}
.MilieuGauche {
	background-color:#BDCDE8;
	float:left;
	height: 400px;
	width: 20%;
}
.MilieuDroit {
	background-color:#BDCDE8;
	float: left;
	height: 400px;
	width: 20%;
}
-->  

</style>

<script type="text/javascript" >
<!--
//-->
</script>
</head>
<link rel="stylesheet" type="text/css" href="css/Entete.css">
<link rel="stylesheet" type="text/css" href="css/Pied.css"> 
<body>


<div class="Haut">

<div style="display: none;"><img alt="" src="../Images/Vestiaires.png" /><img alt="" src="../Images/MaisonAssos.png" /><img alt="" src="../Images/Terrain.png" />
</div>		
<div id="Installation">
	<a id="InstallationVestiaire" href="#" title="Vestiaires zoom"></a>
	<a id="InstallationMaison" href="#" title="Maison des Associations zoom"></a>
	<a id="InstallationTerrain" href="#" title="Terrain zoom"></a></div>

</div>


<div class="MilieuGauche">
</div> 

<div class="Centre">
	<div class="texte">

	<blockquote> 
    <p align="center" >&nbsp;</p>   
    <p align="center" >Debut du texte </p>
    </blockquote> 

	</div>
</div>

<div class="MilieuDroit">
</div>

<div class="Bas">
</div>
</body>
</html>

Modifié par jpi (04 Jun 2006 - 08:45)
Administrateur
Hello jpi et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à