28172 sujets

CSS et mise en forme, CSS3

[résolu] Texte qui remplace une image

je souhaite que mon site s'ouvre sur une image (un petit gif animé) qui disparait ensuite pour faire place à un texte d'accueil.

j'ai donc mis des z-index et un display : none au hover de l'image qui doit disparaitre (j'ai même essayé en lui mettant un top:-5000px)

<body>
<div id="global">

<div id="image1"><a href="#"><img src="/site axa/images/logo_index.gif" alt="logo animé de La CGT-AXA" /></a></div>

<div id="image2"><a href="/site axa/index_2.php" title="entrer sur le site La CGT-AXA"><img src="/site axa/images/landscape4.jpg" alt="dessin humoristique" /></a></div>
<p class="texte">Apprendre du présent, ne rien perdre du passé pour éclairer l’avenir</p>
<p class="entrer"><a href="/site axa/index_2.php">entrer sur le site La CGT-AXA
</a> </p>
</div>

</div>
</body>



#global { 
min-height:100%;  /* page occupe toute la hauteur de la fenêtre*/
width: 90%;
max-width: 90em;
min-width: 850px;
margin: 0 auto ; /*centre la page*/
text-align:center; /* pour IE, pour centrer la page*/
} 

#global img {border: 0 none;} /* elimine le cadre bleu entourant les images cliquables*/

#global li{list-style-type:none;}
#global a {text-decoration: none;}

#image2 {
position:relative;
margin : 50px auto;
z-index:1;}

.texte {font: 150% Geneva, Arial, Helvetica, sans-serif ; }

.entrer {font: bold 120% Arial, Helvetica, sans-serif; width:auto; margin :50px auto; }
.entrer a {color: #039; background-color:#8399fb; height:50px; padding:1em 1em; }
.entrer a:hover{color: #900; background-color:#e91313; height:50px; padding:1em 1em;}

#image1 {
position:absolute; 
  left: 50%; 
  top: 50%;
  width: 600px;
  height: 600px;
  margin-top: -300px; /* moitié de la hauteur */
  margin-left: -300px; /* moitié de la largeur */
z-index:2;}

#image1 a:hover {display:none; }


Le problème, c'est que ma première image ne disparait pas et donc, il n'y a pas d'accès au texte et lien qui sont positionnés dessous

En farfouillant internet, je n'ai trouvé qu'une solution qui, je trouve n'est pas satisfaisante : créer 2 page et mettre une balise meta de redirection sur la première (<meta http-equiv="refresh" content="5; url=http://monsite/index.php" />)
Ca me pose 2 pbs : c'est coté client et c'est pas bon pour le référencement...

Donc, comment faire ça bien en css ?
Modifié par arives (25 Mar 2009 - 23:42)
Salut,
ça ne serait pas le javascript ta solution. Tu affiche à l'aide de javascript ton truc qui bouge partout (display: block ). Au bout de x temps tu l'efface(display: none).
c'est une solution que j'avais envisagé, mais ça pose 1 pb : si le javascript est desactivé...
Si tu tiens absolument à ton gif animé, place le en css dans le flux de ta page. Ensuite tu le positionne en javascript.
merci beaucoup à Nours312. Grâce à lui, j'ai un petit java script qui fonctionne impec :


<script language="JavaScript">
function changer() {
document.image.src = ".../image2.jpg" ;
}
setTimeout("changer()", 6000);
</script>


à positionner après le </body>

sans oublier de mettre un name="image" dans le html

<img src=".../image1.jpg" name="image" alt="ma jolie 1ère image" />


.../ est à remplacer par le chemin (dossier) où se trouve l'image
Salut,

juste en passant et pour respecter les standards, il faut remplacer
<script language="JavaScript">
par
<script type="text/javascript">
Smiley cligne
Sujet clos
Aller à