Script Java: Apparaître disparaître.

Résolu/Fermé

Sanader Messages postés 66 Date d'inscription samedi 15 novembre 2008 Statut Membre Dernière intervention 2 juillet 2010 - 15 nov. 2008 à 00:15
Doud - 20 déc. 2008 à 14:23

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.

A voir également:

Script Java: Apparaître disparaître.
Waptrick java football - Télécharger - Jeux vidéo
Jeux java itel football - Télécharger - Jeux vidéo
Script vidéo youtube - Guide
Java apk - Télécharger - Langages
Java décompiler - Télécharger - Langages

5 réponses

Réponse 1 / 5

Marco la baraque Messages postés 996 Date d'inscription vendredi 9 mai 2008 Statut Contributeur Dernière intervention 5 novembre 2009 329
15 nov. 2008 à 00:51

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 !

Réponse 2 / 5

Sanader Messages postés 66 Date d'inscription samedi 15 novembre 2008 Statut Membre Dernière intervention 2 juillet 2010 1
15 nov. 2008 à 01:03

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 Messages postés 996 Date d'inscription vendredi 9 mai 2008 Statut Contributeur Dernière intervention 5 novembre 2009 329
15 nov. 2008 à 01:14

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,

Sanader Messages postés 66 Date d'inscription samedi 15 novembre 2008 Statut Membre Dernière intervention 2 juillet 2010 1 > Marco la baraque Messages postés 996 Date d'inscription vendredi 9 mai 2008 Statut Contributeur Dernière intervention 5 novembre 2009
15 nov. 2008 à 01:15

Je 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 !

Une 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 ^^)

Marco la baraque Messages postés 996 Date d'inscription vendredi 9 mai 2008 Statut Contributeur Dernière intervention 5 novembre 2009 329 > Sanader Messages postés 66 Date d'inscription samedi 15 novembre 2008 Statut Membre Dernière intervention 2 juillet 2010
15 nov. 2008 à 01:36

Alors 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,

Réponse 3 / 5

Sanader Messages postés 66 Date d'inscription samedi 15 novembre 2008 Statut Membre Dernière intervention 2 juillet 2010 1
15 nov. 2008 à 01:49

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 Messages postés 996 Date d'inscription vendredi 9 mai 2008 Statut Contributeur Dernière intervention 5 novembre 2009 329
15 nov. 2008 à 02:13

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,

Réponse 4 / 5

Sanader Messages postés 66 Date d'inscription samedi 15 novembre 2008 Statut Membre Dernière intervention 2 juillet 2010 1
15 nov. 2008 à 15:11

C'est super j'ai enfin réussi mon coup..!

Merci à toi !!

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

Posez votre question

Réponse 5 / 5

Doud
20 déc. 2008 à 14:23

Tu peux utiliser la librairie Jquery. Les fonctions show et hide sont déjà définies.

Discussions similaires

Téléchargement de la Bible en français

application JAVA sur telephone portable !!!!

Trouver des jeux java pour portable.

le jeux PES 2014