Au secours !! Débutante cherche code javascript/css pour apparition/disparition

Question

Bonjour à tous !

Bon voilà je me lance, je fais mon premier site et je suis déjà confrontée au problème suivant :

J'ai une liste de lien et je souhaite faire apparaitre une div à la droite de cette liste qui est remplacée par une autre lorsque je fais un rollover sur les liens (chaque lien à une div correspondante) pour compliquer la chose j'aimerais que lorsqu'on clique sur le lien la div reste fixe mais disparait et est remplacée par d'autre lorsque je continuer à survoler les liens... (jespère que je suis claire )

Je me débrouille en .html et css mais pour le javascript  c'est une autre histoire (je débute tout juste)... 

J'ai trouvé un bout de code que j'ai adapté, voir mon exemple ici mais même si je me rapproche ce n'est pas encore l'effet escompté... J'ai mis tout le code javascript et css dans la même page pour que vous puissiez le voir.

La personne qui saura m'aider aura ma reconnaissance éternelle !! 

Merci d'avance !!

Roxanita06

BunoCS · Answer

Hello,
Le problème, c'est que tu "unhide" bien (ou bien tu rends visible ) mais tu ne caches pas la précédente div, c'est pour ça qu'elles se mettent les unes à la suite des autres. Il faut donc que tu récupères la div en cours et que tu la caches.


@+
Buno, Admin CS
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...

Zobibol · Answer

Bien le bonjour, comme la fait constaté buno précédement, la méthode unhide ne fait que montrer/cachér la div encours.
Voilà la méthode qui va bien pour cacher les autres div et ne montrer que la div en cours:
/**
* Cache les div exceptée celle passée en paramètre qui sera montrée.
*
* @param divID identifiant de la div à montrer
*/
 function unhide(divID) {
// Récupération des div contenu dans la sous div d'information identifiée par: col2liststyles
var _childDivs = document.getElementById("col2liststyles").getElementsByTagName("div");
// pour chacun des fils de la div d'affichage.
for ( var i=0; i< _childDivs.length; i++){
// test la classe, il ne faut traiter que les divs ayant une classe: hidden/unhidden, les autres sont exclues
if ( _childDivs[i].className == "hidden" || _childDivs[i].className == "unhidden"){
if ( _childDivs[i].id != divID){
// Alors on cache fatalement la div.
_childDivs[i].className = "hidden";
}
// si égalité, on montre c'est cette div qu'il faut montrer.
else{
_childDivs[i].className = "unhidden";
}
}
}
 }

le nom de cette méthode n'est pas des plus plaisant: une méthode du style switchVisibility semblerait plus indiquée, mais c'est très accessoire.



[o-_-o]

BunoCS · Answer

le nom de cette méthode n'est pas des plus plaisant: une méthode du style switchVisibility semblerait plus indiquée, mais c'est très accessoire.
Pour moi, le choix du nom des méthodes n'est pas accessoire...

@+
Buno, Admin CS
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...

cs_jperre · Answer

Voilà comment je ferais pour obtenir l'effet que tu désire : 1 - Je placerais le texte de chacun des messages associés dans un élément avec un attribut id="div0", id="div1",... Chacun de ces éléments div sera affecté d'un attribut style="display:none". Ce qui donne pour le premier d'entre eux : Le texte du premier message...avec les balises HTML éventuelles... 2 - Je créerais un élément vide avec un attribut id="divaff"> : avec une position absolue car c'est dans cet élément que seront affichés tous les messages. 3 - Je créerais un élément avec un attribut style="list-style:none". Puis j'insèrerais autant d'éléments

qu'il y a d'items dans ton menu vertical. Ces éléments

auront: * un attribut id="li0", id="li1",... * un attribut style="display:inline;float:left" qui permettra de réaliser un menu horizontal, * deux attributs événementiels onmouseover et onmouseout. J'affecterais la valeur showMessage(this.id) à l'attribut onmouseover et la valeur removeMessage(this.id) à l'attribut onmouseout. Maintenant le code à placer dans la section de la page HTML: Maintenant je pense que cela fonctionne. Bon courage!...

roxanita06 · Answer

WOW merci pour vos réponses !! Je vais essayer ça tout de suite et je poste le résultat

Au secours !! Débutante cherche code javascript/css pour apparition/disparition

5 réponses

Votre réponse

Discussions similaires