[RESOLU] Basculer d'un DIV à un autre au passage de la souris

Bonjour à tous,

Je m'occupe d'un site d'une copine qui se lance dans le home staging et decoration. Elle me demande des prouesses en therme de web design et de mise en page et je casse un peu un la tete.

J'ai un accueil avec 9 cellules (3 X 3) pour lesquelles :
- je dois afficher une photo et un Titre <h1>
- ou lorsque qu'on passe avec la souris (hover), un autre DIV apparait avec du texte qui decrit le titre et la photo.

Biensur, les 9 vignettes doivent être cliquables...

Avez vous une ID?
Modifié par pika28 (14 Oct 2009 - 11:25)

bonjour,

c'est en theorie faisable . Cependant la description de ton probléme ne permet pas vraiment de savoir ce que tu veut afficher et ou (sous l'image , a coté , a la place du titre .... ) ?

un croquis et un aperçu de ta structure html deja en place aiderait a te conseillé ou orienter vers une technique ou une autre.

Compatible IE6 a 100% ou avec une alternative acceptable ?

GC

Je souhaite basculer d'un DIV à un autre avec le passage de la souris.

Exemple la vignette tout en haut à gauche affiche une photo et son titre et quand je passe au dessus, ca affiche la description et masque la photo
Modifié par pika28 (12 Jan 2010 - 19:12)

J'avance un peu dans mon probleme.

J'ai en fait deux div:
- le premier s'affiche avec le texte
- le deuxieme avec la photo et grace à hover en css, j'ai collé "visibility: hidden;" pour masqué la photo.

Ca fait enfin ce que je recherche sauf que la reaction de la souris est bizarre, pas facile à expliquer, voir plutot le site

CSS actuel

#index-photo-1 a.menu-1 {
 position: absolute; left: 0px; top: 0px; width: 240px; height: 160px;}
#index-photo-1 a:hover.menu-1 {
 visibility: hidden;}
#index-texte-1 {
 position: absolute; left: 0px; top: 0px; width: 230px; height: 150px;
 border: 5px;
 border-style: ridge;
 border-color: #a90101;
 background:#a90101;}

HTML actuel

<div id="index-texte-1">
<br />Ceci est le texte 
<br />de la photo N°1.
</div>
<div id="index-photo-1">
<a class="menu-1" href="1.html"><img src="images/index-1.jpg" alt="Image 1" /></a>
</div>

Avez une idée du comportement de la fonction "visibility: hidden;" qui clignote au passage de la souris?
Modifié par pika28 (12 Jan 2010 - 19:13)

Bonsoir,

l'idée est bonne , mais le chat essaie d'attrapé sa queue et la souris dance.
l'ilage est visible .... tu passe au dessus , elle est donc cachée
Une fois cachée ... bah la souris est-elle encore au dessus de l'image?
(ou est donc passé le lien avec l'image a l'écran , qui maintiendrais l'effet hover ? ) .

Comme ton texte ne semble pas si long , tu peut integrer celui-ci et son image dans le lien complet et transformer ta serie de div en liste .

<ul>
<li class="lien">
<a href="page/truc.html" title="page machin">
<img src="image.gf" alt="" longdesc="page/truc.html" />
texte descriptif cours 
</a>
</li>
...
</ul>

Pour le css :

Mettre les li en position relative. leur données une dimension et la couleurs de fond.

Mettre les a en display:block, leur donné la dimension des li.

Mettre les images en position:absolute , leur donné la dimension des li et les calée a top:0; et left:0; et les faire passé en z-index:1;


Sur a:hover , Mettre les img en display:none; appliquer la bordure .

A priori , pas même besoin d'utilisé id ou class pour arriver a tes fins.

GC

J'ai pas tout compris comme d'hab... lol mais je vais essayer tout ça, la pratique fonctionne souvent avec moi que la théorie.... hihihi
Modifié par pika28 (28 Sep 2009 - 12:48)

J'ai du mal interpréter tes conseils au niveau CSS car les photos clignottent toujours comme avec ma version de code


Le CSS actuel :

.menu ul {
 padding:0;
 margin:0;
 width: 100%;
 list-style-type:none;}

.menu li {
 margin-left:5px;
 margin-top: 5px;
 float:left;
 position: relative; left: 0px; top: 0px; width: 240px; height: 160px;
 background:#a90101;}

.menu a {
  display: block;
  position: absolute; left: 0px; top: 0px; width: 240px; height: 160px; 
  float:left;}

.menu a:hover {
  display: none;
  border: 0px;
  border-style: ridge;
  border-color: #a90101;}

.menu img  {
  border:0px;
  position: absolute; left: 0px; top: 0px; width: 240px; height: 160px;
  z-index:1;}

le HTML :

<div class="menu">
<ul>
<li><a href="1.html" title="titre de la page 1"><img src="images/index-1.jpg" alt="Image 1" />Ceci est le texte de la photo N°1. </a></li>
<li><a href="2.html" title="titre de la page 2"><img src="images/index-2.jpg" alt="Image 2" />Ceci est le texte de la photo N°2. </a></li>
<li><a href="3.html" title="titre de la page 3"><img src="images/index-3.jpg" alt="Image 3" />Ceci est le texte de la photo N°3. </a></li>
<li><a href="4.html" title="titre de la page 4"><img src="images/index-4.jpg" alt="Image 4" />Ceci est le texte de la photo N°4. </a></li>
<li><a href="5.html" title="titre de la page 5"><img src="images/index-5.jpg" alt="Image 5" />Ceci est le texte de la photo N°5. </a></li>
<li><a href="6.html" title="titre de la page 6"><img src="images/index-6.jpg" alt="Image 6" />Ceci est le texte de la photo N°6. </a></li>
<li><a href="7.html" title="titre de la page 7"><img src="images/index-7.jpg" alt="Image 7" />Ceci est le texte de la photo N°7. </a></li>
<li><a href="8.html" title="titre de la page 8"><img src="images/index-8.jpg" alt="Image 8" />Ceci est le texte de la photo N°8. </a></li>
<li><a href="9.html" title="titre de la page 9"><img src="images/index-9.jpg" alt="Image 9" />Ceci est le texte de la photo N°9. </a></li>
</ul>
</div>

Modifié par pika28 (12 Jan 2010 - 19:13)

bonjour,

en gros , le lien ne doit pas etre positionné en absolu ni en flottant , juste en block et dimension.

au survol du lien , ne cacher que l'image .

C'est en fait beaucoup plus simple que tu ne le pense et le contenu de ta page ne nécessite pas l'usage de class ou d'id , il te suffit juste de cibler les lien dans les li , contenant une image .

demo : http://gcyrillus.free.fr/essai/Concept%20DecoHome%20StagingD%c3%a9corationint%c3%a9rieureetext%c3%a9rieure.html

GC

Merci beaucoup GC, c'est simple et je me suis juste pris la tete mdr.

En tout cas, bravo pour ton parcourt

J'ai augmenté la largeur width de divprin car le résultat était sur 2 col dans ie6 et 3 dans les autres...

Merci beaucoup encore.

Dernière question : Est ce que google va prendre en compte le texte caché derrière les photos pour le référencement? j'aurais donc des H1, les alt, title, le texte et le meta...

Pour google et autre media ou lecteur sans support des styles , pas de soucis , tout est visible .
Ce ne sont juste que les styles qui superposent texte et images.

GC

Ok, c'est bien ce que je pensais, ca confirme donc que l'on peut cacher du texte avec des balises H1, H2, Hn et que Google va bien le lire et le prendre en compte dans le référencement...

Bonne soirée GC, bonne soirée à tous?

Bonjour, je viens de me rendre compte d'un dernier petit BUG,

Lorsque je suis hors ligne, tout est ok avec IE et FF, par contre une fois en ligne, la vignette tout en bas a droite deconne avec firefox et pas avec ie, le texte sort de sa zone. Si j'actualise 10-15 fois, il se remet en place et redeconne juste apres.

J'y comprend rien, encore une différence d'interpretation entre firefox et IE mais pourquoi ca marche hors ligne et pas en ligne, c'est bizarre ca.
Modifié par pika28 (12 Jan 2010 - 19:13)

Bonjour,

Après plusieurs essais, j'ai trouvé d'ou venait le probleme. Il s'agissait des "div class="textcenter"" que j'utilisais pour mettre en forme le texte caché sous les images. J'ai donc supprimé ces div et la class en reportant les attributs dans le css du <li>.

Par contre, je n'arrive plus à gérer les marges intérieurs du texte, les marges du <li> aggissent sur l'espacement entre vignettes.

Faut-il que je remettent des divs pour gérer la mise en page avec un parametre supplméentaires pour éviter le texte qui sort de la vignette ou alors existe t-il une autre solution pour gérer la mise en page du texte dans la vignette?

Merci d'avance

oulala

mais tu ne peut pas mettre d'element block dans un lien .

par contre , tu peut integrer ton lien dans le titre et repositionner (via css) ton div un peu plus bas .

ex:

<li>
<h1><a href="home-staging.html" title="Home Staging - Concept Déco Eure et loir"><img src="images/index-1.jpg" alt="Home Staging - Concept Déco- Chartres" />
Home Staging</a></h1>
<div class="texteindex">
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.
</div>
</li>

Arf c'est vrai encore une règle que j'avais zappé, pas de block dans les inline, donc pas de <div> dans un <a>, c'est pas faute de me l'avoir déjà dit !!!

Merci GC, tu vas devenir mon mentor .... lol

Mais non , c'est ce forum qui veut ça ... avoir des reponses .

Sinon , n'oublie pas que si tu multiplies tes liens , dans une structure et des effets différents , il te faut alors les cibler (defaut de ton dernier li) .

ex: h1 a {} au lieu de a{} ou appliquer une class a ceux ou tu veut afficher/cacher l'image qu'ils contiennent.

++

C'est quelque chose que j'ai encore un peu de mal à cerner, je vois des syntaxes différentes à droite à gauche et je ne sait plus trop ce qui est bon ou pas... Je viens de modifier le site suivant tes conseils toujours et retour à la case départ, ca CLIGNOTTE !!

J'arrive pas à comprendre la logique de la méthode et ça m'agasse... lol

Le probleme vient à coup sur de l'imbrication des balises mais tant que j'aurais pas pigé le truc...
Modifié par pika28 (06 Oct 2009 - 12:13)

Bonjour,

Après plusieurs tests, toujours le même probleme, mon html est bon, ca vient juste du CSS et de la facon d'imbriquer les balises mais je trouve pas le juste milieu...

GC, à l'aide.... lol

bonjour,

alors,
- tu indiques : height et width a 100% pour a , mais son parent direct est H1, sans taille indiquée . Ce sera 100% de rien (heritage).
Il vaut mieux alors donné cette dimension en pixel ou donner une dimension a H1 qui servira de reference .

- tu positionne un div en absolu , celui-ci pour etre visible vient se positionner au dessus du lien . Son fond est transparent mais le texte non . Il y a un conflit entre a:hover et div . Ces deux elements sont deux zones differente . Si div:hover , ce n'est plus a:hover ....

Pour conserver l'effet , il te faut alors placé le :hover sur li (en gardant le a:hover pour IE6 )

exemple recapitulatif :

li h1 a {
display:block;
width: 240px; 
height: 160px; 
}

li h1 a:hover img , li:hover h1 a img {
 visibility: hidden;
 }

li h1 a:hover , li:hover h1 a {
border: 3px;
border-style: ridge;
width: 234px; 
height: 154px;
border-color: #a90101;
}

Le défaut perdureras dans IE6 , il faudra un peut de js sur l'evenement li onmouseover .

Reste ensuite des défaut "d'accessibilités" , sans souris il ne se passe pas grand chose , mais ça vaut probablement un autre topic .

GC

bonjour,

le js, c'est bien pour corriger le "li:hover h1 a img" ? Dans ce cas, car je ne connais rien au js, il va falloir que j'ouvre un autre topic pour comprendre les bases... Ne vaut-il mieux pas que j'abandonne le hover CSS au profis du js. Ou faut-il créer une condition pour que le js ne fonctionne qu'avec IE6?

le js va t-il avoir la même compatibilité que le css? JE pense que le probleme du js, c'est surtout pour les navigateurs qui ne l'affiche pas.... je me trompe?

bonne journée à tous