Script Java: Apparaître disparaître.

Résolu

Sanader -

Bonjour,

j'aimerais faire apparaître et disparaître un élément à la manière d'un menu en javascript. Problème : vous l'avez deviné, je ne connais pas le js...
je fais donc appel à vous pour m'aider à bidouiller un code js dans ma page web... (j'aimerais pouvoir le paramètrer et le modifier par la suite, si possible donc d'avoir des commentaire...)

Voilà mon code XHTML :

<a href="http://www.monsite.com"class="lien-sur-lequel-la-souris-passe">lien n°1.</a>

<a href="http://www.monsite.com/Section"class="lien-qui-saffiche-au-passage-de-la-souris">lien n°2.</a>

Quelqu'un est-il donc capable de créer un script java pour mon petit problème?

Merci.

Configuration: Windows XP
Firefox 3.0.3
XHTML 1.0 Strict

Afficher la suite

A voir également

Script Java: Apparaître disparaître.
Java jeux - Télécharger - Jeux vidéo
Jeux java football - Télécharger - Jeux vidéo
Waptrick java course - Télécharger - Jeux vidéo
Java apk - Télécharger - Langages
A quoi sert java ✓ - Forum Java

5 réponses

Réponse 1 / 5
Doud
Tu peux utiliser la librairie Jquery. Les fonctions show et hide sont déjà définies.

0

Réagir
Réponse 2 / 5
Sanader Auteur
C'est super j'ai enfin réussi mon coup..!

Merci à toi !!

0

Réagir

Sanader Auteur

saurais tu corriger le liens que j'ai pondu à partir de la première solution? (ça ne marche pas et j'ai encore du mal :/)

<html>
<head>
	<title>CCM Exemple</title>
	<script type="text/javascript">
		function show('lien1) {
			//on récupère l'élément qui a l'identifiant donné en paramètre
			var toShow = document.getElementById('lien1');
			//on change la valeur du style css en visible
			toShow.style.visibility = 'visible';
		}
		
				function show(lien2) {
			//on récupère l'élément qui a l'identifiant donné en paramètre
			var toShow = document.getElementById('lien2');
			//on change la valeur du style css en visible
			toShow.style.visibility = 'visible';
		}
		
		function hide() {
			//on récupère l'élément qui a l'identifiant donné en paramètre
			var toHide = document.getElementById('lien-qui-saffiche-au-passage-de-la-souris');
			//on change la valeur du style css en visible
			toHide.style.visibility = 'hidden';
		}

	</script>
</head>
<body>

<!-- Si la souris est sur le lien, on affiche le second. Quand on n'est plus sur ce lien, on n'affiche plus l'autre-->
<a href="http://www.monsite.com" id="lien-sur-lequel-la-souris-passe" onMouseOver="show();";">lien n°1.</a>

<!-- Par défaut ce lien est caché, donc j'ai mis l'attribut css visibility à 'hidden'-->
<a href="http://www.monsite.com/Section" id="lien1" style="visibility: hidden;" onMouseOut="hide();">lien n°2.</a> 

<!-- Par défaut ce lien est caché, donc j'ai mis l'attribut css visibility à 'hidden'-->
<a href="http://www.monsite.com/Section" id="lien2" style="visibility: hidden;" onMouseOut="hide();">lien n°2.</a> 
</body>
</html>

Marco la baraque Contributeur
Woulaa !
Attention, tu ne peux pas écrire deux fonctions qui ont le même nom ! Comment veux-tu que ton navigateur sache quelle fonction appeler après ?

Tu ne dois écrire qu'une seule fonction show qui prend un id en argument, et qui fait un traitement (ici met la visibility à visible).
```
function show(id) {
       //on récupère l'élément qui a l'identifiant donné en paramètre
	var toShow = document.getElementById(id);
...
```
Ensuite, sur ton lien 1, dans onMouseOver, tu peux appeler plusieurs fois ta fonction avec un paramètre différent :
```
onMouseOver="show('lien1'); show('lien2');"
```
Cordialement,
0

Réagir

Sanader Auteur

hum..

j'avance enfin vers ma quête xD
encore quelques petites choses à savoir

show(je suis sencé mettre quelque chose entre ces parenthèses?)

et saurais tu m'en dire un peu plus sur la fonction onMouseout?

Marco la baraque Contributeur
Non, de la manière dont j'ai écrit ça, tu n'as rien à mettre entre les parenthèses.
Par contre, si on écrit ça de la manière suivante :
```
...
function show(id) {
	//on récupère l'élément qui a l'identifiant donné en paramètre
	var toShow = document.getElementById(id);
...
<a href="http://www.monsite.com" id="lien-sur-lequel-la-souris-passe" onMouseOver="show('lien-qui-saffiche-au-passage-de-la-souris');" onMouseOut="hide();">lien n°1.</a>
...
```
alors dans ce cas, tu pourras personnaliser tes liens pour afficher/cacher (le but c'est de faire pareil avec la fonction hide) les liens que tu veux.

OnMouseOut est un évènement qui est levé lorsque ta souris quitte la zone définie. Par exemple si tu as une image, l'évènement onMouseOver sera levé dès que tu vas survoler cette image, et dès que ton curseur sortira de l'image, l'évènement onMouseOut va être levé.

Cordialement,
0

Réagir
Sanader Auteur
@Marco la baraqueJe viens de réussir, ça ne marchais pas, il y avait une erreur de ma part..!

Un grand merci à toi, je n'aurais sans doute jamais réussi..!

Merci !

0

Réagir
Sanader Auteur
@Marco la baraqueUne dernière chose peut-être..
si je souhaite augmenter le nombre de lien que le premier affiche au passage de la souris, quel code on obtient?

(un exemple avec 2-3 liens affichés au passage de la souris suffiront ^^)

0

Réagir

Marco la baraque Contributeur

@SanaderAlors tu as deux solutions.
La première, c'est continuer dans le même sens :

<!-- Si la souris est sur le lien, on affiche le second. Quand on n'est plus sur ce lien, on n'affiche plus l'autre-->
<a href="http://www.monsite.com" id="lien-sur-lequel-la-souris-passe" onMouseOver="show('lien1'); show('lien2')" onMouseOut="hide();">lien n°1.</a>

<!-- Par défaut ce lien est caché, donc j'ai mis l'attribut css visibility à 'hidden'-->
<a href="http://www.monsite.com/Section" id="lien1" style="visibility: hidden;">lien n°2.</a> 

<!-- Par défaut ce lien est caché, donc j'ai mis l'attribut css visibility à 'hidden'-->
<a href="http://www.monsite.com/Section" id="lien2" style="visibility: hidden;">lien n°3.</a>

La seconde solution (que je préfère) et c'est vers celle là que tu étais parti, consiste à utiliser non plus les identifiants des liens mais leur classe. Pour cela on va utiliser une fonction développée par Dustin Diaz permettant de récupérer tous les éléments d'une classe (c'est ultra chaud et je ne saurai pas te l'expliquer). Ensuite on modifie la fonction show pour récupérer tous les éléments de la classe dans un tableau, que l'on va parcourir.

function getElementsByClass(searchClass, node, tag) {
 var classElements = new Array();
 if ( node == null )
  node = document;
 if ( tag == null )
  tag = '*';
 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
 for (i = 0, j = 0; i < elsLen; i++) {
  if ( pattern.test(els[i].className) ) {
   classElements[j] = els[i];
   j++;
  }
 }
return classElements;
}

function show(classe) {
	//on récupère tous les éléments de la classe passée en paramètre
	var toShow = getElementsByClass(classe, null, null);
	
        for (var i = 0; i < toShow.length; i++) {
          //on change la valeur du style css en visible
	  toShow[i].style.visibility = 'visible';
        }
}
...

<!-- Si la souris est sur le lien, on affiche tous les liens de la classe sousmenu1-->
<a href="http://www.monsite.com" id="lien-sur-lequel-la-souris-passe" onMouseOver="show('sousmenu1');">lien n°1.</a>

<!-- Par défaut ce lien est caché, donc j'ai mis l'attribut css visibility à 'hidden'-->
<a href="http://www.monsite.com/Section" class="sousmenu1" style="visibility: hidden;">lien n°2.</a> 

<!-- Par défaut ce lien est caché, donc j'ai mis l'attribut css visibility à 'hidden'-->
<a href="http://www.monsite.com/Section" class="sousmenu1" style="visibility: hidden;">lien n°3.</a>

Cordialement,

Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question

Marco la baraque Contributeur

Bonsoir Sanader,

<html>
<head>
	<title>CCM Exemple</title>
	<script type="text/javascript">
		function show() {
			//on récupère l'élément qui a l'identifiant donné en paramètre
			var toShow = document.getElementById('lien-qui-saffiche-au-passage-de-la-souris');
			//on change la valeur du style css en visible
			toShow.style.visibility = 'visible';
		}
		
		function hide() {
			//on récupère l'élément qui a l'identifiant donné en paramètre
			var toHide = document.getElementById('lien-qui-saffiche-au-passage-de-la-souris');
			//on change la valeur du style css en visible
			toHide.style.visibility = 'hidden';
		}
	</script>
</head>
<body>

<!-- Si la souris est sur le lien, on affiche le second. Quand on n'est plus sur ce lien, on n'affiche plus l'autre-->
<a href="http://www.monsite.com" id="lien-sur-lequel-la-souris-passe" onMouseOver="show();" onMouseOut="hide();">lien n°1.</a>

<!-- Par défaut ce lien est caché, donc j'ai mis l'attribut css visibility à 'hidden'-->
<a href="http://www.monsite.com/Section" id="lien-qui-saffiche-au-passage-de-la-souris" style="visibility: hidden;">lien n°2.</a> 

</body>
</html>

J'ai mis des commentaires en espérant que tu comprennes bien. Si tu veux t'en servir pour faire un menu, il va falloir l'adapter un peu (par exemple retirer le onMouseOut sinon tu ne pourras jamais cliquer sur ton lien ;).

Bon courage !

Script Java: Apparaître disparaître.

5 réponses

Discussions similaires

Newsletters