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

(reprise du message précédent)

Poste moi ton code je te dit ce qui ne va pas.

Bonjour,

Il reste un bug, le div comprenant le texte sur fond 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:14)

Ca saute un peu au rollover. Des fois c'est à cause du z-index. ( z-index = ordre des div , 2 est au dessus de 1 etc ..... ).

effectivement le rollout marche de manière aléatoire.

Le mieux est de mettre le calque de base en dessous , puis son rollover par dessus ( à gérer avec le z-index ). Ensuite , sur le calque de base -> on rollover afficher le calque bordeau , et sur le calque bordeau , dire on rollout masquer le calque bordeau.

Faut donc créer 2 div par vignette ( 2 classes différentes ), une pour l'état normal , une pour l'état rollover.

ya moyen d'avoir le css ?
Modifié par SnowAddict (12 Oct 2009 - 12:31)

Le html :

<div id="vign1t" class="texteindex" onmouseout="MM_showHideLayers('vign1t','','hide')">
<a href="home-staging.html" title="Home Staging - Concept Déco Eure et loir">
<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 id="vign1i" onmouseover="MM_showHideLayers('vign1t','','show')">
	<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" />
	</a>
	</div>

Le CSS :

#vign1t { position:absolute;left:0px; top:0px; width:220px; height:140px;
z-index:2;
visibility:hidden;
background:#a90101;
}
#vign1i { position:absolute; left:0px; top:0px; width:240px; height:160px;
z-index:1;
}

Le Java :

function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible' [decu]v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

[/i]

le code a l'air bon. Juste une chose me dérange. Tes 2 div sont censées être superposées et strictement identiques, or elles ont un width de 20 px d'écart. Pourquoi ???? essayes avec des valeurs strictements identiques.

edit : bon j'ai fait un test , il semble que les images à l'intérieur des div posent des petits problèmes.

A ta place , j'essairais au rollover , d'afficher la div au dessus et de masquer celle d'en dessous.

Puis au rollout , masquer celle du dessus et afficher celle d'en dessous.
Modifié par SnowAddict (12 Oct 2009 - 13:23)

La différence de 20px est due au padding du texte...

Pourrais commenté ton JS que le comprenne...

Pour le moment, si je dis pas betise, l'image et le texte sont afficher en meme temps avec le texte par dessus grace au z-index, le texte se cache grace au css et il s'affiche/masque avec le JS et le rollover ??? C'est bien ca???

oui c'est ça , la div du dessous est tjs affichée, et le problème vient de là je pense.

Débrouille toi pour la masquer on rollover , puis de la réafficher on rollout , c'est possible.

Je suis incapable de comment ce JS , étant donné que c'est dreamweaver qui l'a généré !!! De plus je suis nul en programmation xD
Modifié par SnowAddict (12 Oct 2009 - 16:02)

J'avais essayer avec dreamweaver mais j'ai pas trouvé, je m'en suis jamais servi.

Je programme tout avec notepad ++ à l'ancienne

dans dreamweaver, ça se trouve dans les comportements , ya un comportement " afficher / masquer des éléments ". Tu assignes ça à ta div du dessous , et tu choisi les div à afficher / masquer au rollover. Tu fait pareil pour ta div du dessus mais au rollout.

C'est aussi simple que ça, et sans taper 1 seule ligne de code. Par contre tes div doivent avoir un id , sinon elles n'apparaitront pas dans la liste du comportement.

bonsoir , sans vouloir faire le trouble fête , je ne comprend pas trop bien ou tu en venir .

Tu veux dissocier le lien et l'image quand celle ci illustre le lien , (la page liée) ?
Cela ne me semble pas logique .

Tu veux basser ta navigation sur javascript , au risque de rendre ta navigation impossible sans celui-ci ?
Cela me semble un mauvais choix .

Ensuite utiliser dreamweaver pour profiter de ces script , ou se basser sur un éditeur texte + un framwork js , demande quand même un minimum de compréhension du javascript , en l'occurrence l'accès a la structure d'un document (sans parler de programmations pur ) .
Tu vas devoir quand même en passer par un apprentissage pour t'en sortir , si minime soit-il ?
Il y a toujours un bug , ou un truc a améliorer.

Mon avis perso

Sinon , tu refais l'erreur de mettre le titre dans la balise a ( <a><h1>pas bon ! </h1></a>)

En gros ma demarche c'est :
faire la structure (x)html la plus simple est coherente possible (en prenant deja en compte les differentes zone de la page :contenu/et geo-graphie.

appliquée les styles olice , couleurs , fond , puis positionement . en gardant une page lisible avec des liens visible et cliquable ...
ajouter les effets CSS (ou non ) puis les effets javascript .

Bien entendu , globalement le code html doit-etre adapté au javascript que tu veut inclure , mais il ne faut pas monté ta page pour quelle cadre pile-poil a un script . Javascript est une surcouche , et pour une simple navigation , c'est au script de s'adapter , et pas le document

Bon courage en tout cas , je te souhaite de vite passer ce cap encore plein de confusions .

GC

Je dois être con, car apres recherche de tuto, recherche dans l'aide, je ne trouve pas le menu comportement dans dreamweaver cs4... mdr

j'ai une cs3 anglaise, mais je pense que ça doit être pareil sur cs4.

Vas dans fenetre -> comportement , tu as le menu comportement ( behavior en anglais ) qui va apparaitre à droite , tu click sur le " + " et tu sélectionne le comportement " afficher masquer les éléments " ( show / hide elements " en anglais ). Tu as une boite de dialogue ou tu peut choisir les div à afficher / masquer , tu fait OK et le comportement va apparaitre dans la liste, et là tu pourras choisir l'action qui execute le comportement ( onclick , onmouseout , etc .... )

http://snowaddict06.free.fr/dream.jpg

http://snowaddict06.free.fr/dream2.jpg

ps: tes div doivent absolument avoir un id , sinon elles ne s'afficheront pas dans la boite de dialogue, et donc tu ne pourras pas les sélectionner.

Et si le js est désactivé, l'effet de rollover ne fonctionnera pas.

Sinon pourquoi se prendre la tête avec des div, de simples jpg ça peut pas le faire ?
Modifié par SnowAddict (13 Oct 2009 - 15:28)

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...

Le texte sera finalement caché et restera derrière la photo, en espérant que google le lise pour le référencement, ma problematique de base...

Merci pour DreamWeaver, j'ai trouvé mais je vais continuer à chercher sur le JS, soif de connaissance....

@+

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