11523 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Afficher / Masquer les div class="hover" avec onmou

Bonjour,

Pour faire suite à ce premier <topic>, je créer celui dans la section appropriée afin de développé sur la partie JS...

Je n'ai jamais mis les pieds dans le JS et je voudrais faire mes premiers pas...

Ma problématique :
- Effet souhaité (Ne fonctionne pas sous IE6).
- Je voudrais créer un fichier hover.js qui permettrais lorsque qu'un div portant la class="hover" de masquer le div et son contenu au survol de la souris et l'afficher lorsque la souris sort du div.

Mes bases :

Le HTML :

<!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" lang="fr"> 
    <head> 
        <title>Le site</title> 
		<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" /> 
        <link href="style.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="hover.js"></script> 
    </head> 
	
<body> 

<div class="texte-fixe"> 
Je place ici <h1>titre</h1> et sa description.
</div>

<div class="hover"> 
je placerais ici une balise <img>
</div> 		

</body> 
</html>


Les 2 div sont placé en absolute l'un sur l'autre avec les mêmes dimensions et avec le div hover en z-index=1 dans le css....

Il me manque maintenant le code pour le fichier hover.js, j'aimerais le construire et comprendre plutot que recopier betement un exemple.

Merci à vous
Modifié par pika28 (12 Jan 2010 - 19:15)
Bonjour,


Il reste un bug, le div comprenant le texte sur fonc bordeau devrait se caché lorsque la souris sort de la zone mais ce n'ets pas toujours le cas...

une idée?
Modifié par pika28 (12 Jan 2010 - 19:15)
En plus de ne pas forcement se cacher tu as un effet de lague entre les deux "calques".

moi je verrais plus quelque chose du genre:

<div class=warper>
  <div class="warperImg">
    <a title="Home Staging - Concept Déco Eure et loir" href="home-staging.html">
      <img alt="Home Staging - Concept Déco- Chartres" src="images/index-1.jpg"/>
    </a>
  </div>
  <div class="warperText">
    <a title="Home Staging - Concept Déco Eure et loir" href="home-staging.html">
      <h1>Home Staging</h1>
      <br/>
      Valoriser votre bien immobilier grâce au home staging en réaménagent l'espace intérieur et
      extérieur pour faciliter la vente. Nous intervenons sur Chartres, Eure et Loir, la région 
      centre et la région parisienne.
    </a>
  </div>
</div>


lorsque le pointer de la souris est sur le warper on cache le warperImg dès qu'il en sort on cache le warperText.
Je n'y connais strictement rien en JS, je comprend ce que tu veux dire par rapport à ma version actuelle mais pourrais tu m'aider sur le JS
Modifié par pika28 (12 Oct 2009 - 14:20)
Quelque chose du type:



<div class="warper" onmouseout="MM_showHideLayers('warperText_id','','hide')" onmouseover="MM_showHideLayers('warperImg_id','','show')">

  <div class="warperImg" id="warperImg_id" >

    <a title="Home Staging - Concept Déco Eure et loir" href="home-staging.html">

      <img alt="Home Staging - Concept Déco- Chartres" src="images/index-1.jpg"/>

    </a>

  </div>

  <div class="warperText" id="warperText_id" >

    <a title="Home Staging - Concept Déco Eure et loir" href="home-staging.html">

      <h1>Home Staging</h1>

      <br/>

      Valoriser votre bien immobilier grâce au home staging en réaménagent l'espace intérieur et

      extérieur pour faciliter la vente. Nous intervenons sur Chartres, Eure et Loir, la région 

      centre et la région parisienne.

    </a>

  </div>

</div>
Bonjour, merci pour votre participation, mon amie a changé d'avi (roh les femmes...) je plaisante biensur, n'aller pas croire que je soit matcho...


@+

Pika
Modifié par pika28 (12 Jan 2010 - 19:15)
Sujet clos
Aller à