[RESOLU] Faire apparaitre une image devant le texte

Salut à tous !

C'est mon premier post sur ce forum, donc soyez indulgent.

J'ai un petit probleme, en effet, je veux faire apparaitre une version agrandi d'une image au survol de la souris.

J'ai adapté le code de ce tutorial et le résultat est presque là, seulement l'image apparait derrière le texte des autres boites.

J'ai essayé de jouer sur les z-index mais ça donne pas grand chose.

Peut-être est-ce ma gestion des div qui n'est pas bonne, seulement je n'ai pas trop envie de tout chambouler, sachant que j'ai mis pas mal de temps pour pouvoir aligner les miniatures à la description...

Voilà une partie du code css qui semble fautif

div#visage  
   {
	background: ffffff;
	z-index:3;
	background-repeat: no-repeat;
	height: 110px;
	width: 100px;
        left: 0px;
        top:0px;
	position :absolute;
   }
	
	
div#visage a:hover 
   {
        background: none; /* correction d'un bug IE */
   }

div#visage a span 
  { 
       /* définition de la balise <span> inclue dans <a> */
       display: none;
  }

div#visage a:hover span
  { 

       /* définition de la balise <span> au survol */
       z-index:4;
       display: inline;
       position:absolute;
       top: 0px; 
       left: 100px;
       width: 200px;
       height: 100px;
       background: white;
       text-align: center;
       color: white;

   }

Et voici le code Html:

                        <div class="realisation" >
				  <h3> Visage  </h3>
				  <p>Vectorisation réalisé &agrave; partir d'une                     photo.				  </p>
				<div id ="visage"><a href=""> <img src="images/visage_small.png" /> <span><img src="images/visage_large.png" /> </span></div></a>
				</div>

Bref, allez plutôt sur la page de mon site pour voir le truc, et prenez le css avec le plugin FireBug de firefox.

Merci d'avance !!

PS: Le site n'est pas encore compatible ie, alors regardez avec firefox
Modifié par Emrydie (08 Sep 2007 - 18:47)

Salut,

En vitesse, j'ai remarqué dans ton code source :

<div id ="maire">
<a href=""> <img src="images/homme.png" <span><img src="images/homme.png" />

1 balise img --> homme.png n'est pas fermée />
et dans la balise span il ne devrait pas y avoir de balise img...il me semble.
Désolé je dois filer.
Niklaus
Modifié par Niklaus (08 Sep 2007 - 08:13)

Merci pour ta réponse,

Erreur corrigé en local, pas de changement.

Apparemment, certaines balises qui ne sont pas fermées, renvoient des erreurs avec le parser de webdeveloper ( plugin firefox ) mais n'ont aucune incidence sur la mise en page, et les balises que tu me désignes n'ont aucun effet si elles ne sont pas fermées , bizarre faudra qu'on m'explique.


Pour le <span> contenant une image, je n'ai fais que suivre les instructions du tuto.

Si quelqu'un voit quelquechose.... Je suis preneur

Resalut,

Au passage, il manque ta balise title <h1>.
Tu sautes directement à la <h2>

A part cela, j'utilise aussi mon style d'agrandissement d'image. Tu peux voir 1 exemple sur l'image de cette page :
Asport.ch

Partie HTML

 
<p id="tournoi-grand-prix-fribourg">
<a title="" href="">
<img alt="..." src="design/pub/affiche-grand-prix-tennis-fribourg.gif" />
<span><img alt="..." src="design/pub/affiche-grand-prix-tennis-fribourg.jpg" /></span></a></p>

Code CSS

#tournoi-grand-prix-fribourg {
	position: relative;
}
#tournoi-grand-prix-fribourg span {
	display: none;
}
#tournoi-grand-prix-fribourg img {
	display: inline;
	position: absolute;
	top: 0; 
	left: 0;
	text-align: left;
}
#tournoi-grand-prix-fribourg a:hover {
	background: none; /* correction d'un bug IE */
}
#tournoi-grand-prix-fribourg a span {
	display: none;
}
#tournoi-grand-prix-fribourg a:hover span {
	display: inline;
	position: absolute;
	top: 0; 
	left: -5px;
	margin: 0;
	padding: 0;
}

Essaie de t'en inspirer et redis-moi!
Bonne chance!
Niklaus
Modifié par Niklaus (08 Sep 2007 - 17:48)

Re-salut,


En fait, j'ai résolu le problème en créant une classe de div pour les images au lieu de faire une id pour chaque image.

Ca donne pour l'image usine par exemple:

HTML

<div class="description">
            <h3> Usine</h3>
            <p>   Usine réalisé avec Illustrator </p>
            <p>
              pour une animation interactive en Flash
            </p>

          </div>
          <div class="realisation">
            <a href="realisations.html"><img src="images/usine_small.png" alt=
            "XXXXXXXX" /> <span><img src="images/usine_large.png"
            alt="XXXXXXXX" /></span></a>
          </div>

Le Css se retrouve bien allégé avec tout ça, ça donne:

CSS

div.description {
	margin-top: 10px;
	width: 494px;	
	position:relative;	
	z-index:1;
	height: 110px;	 
    text-align:right;
 }


div.realisation  {
	background: ffffff;
	z-index:3;
	background-repeat: no-repeat;
	height: 110px;
	width: 100px;
    left: 0px;
    top: -110px;
	position :relative;
	
	}
	
	
div.realisation a:hover {
background: none; /* correction d'un bug IE */
}
div.realisation a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
div.realisation a:hover span { /* définition de la balise <span> au survol */
z-index:4;
display: inline;
position:absolute;
top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 100px;
width: 200px;
height: 100px;
background: white;
text-align: center;
color: white;
}

Merci pour ton aide, même si je ne m'en suis pas servi. Pour le h1, c'est parceque je suis un rebelle !
J'éspère que ça servira à d'autres.

Voilà, premier topic et résolu en 24h, de la baballe.
Modifié par Emrydie (08 Sep 2007 - 18:46)

Salut,
ok, content que tu as trouvé ta solution.
Deux remarques:
1) h1: toi tu es rebelles, peut-être pas tes visiteurs ?
2) div.realisation {
...
left: 0px;}

Pas besoin de noter d'unité vu que la valeur est "0"
Niklaus