Script Java: Apparaître disparaître.
Résolu
Sanader
Messages postés
66
Date d'inscription
Statut
Membre
Dernière intervention
-
Doud -
Doud -
A voir également:
- Script Java: Apparaître disparaître.
- Waptrick java football - Télécharger - Jeux vidéo
- Jeux java itel - Télécharger - Jeux vidéo
- Script vidéo youtube - Guide
- Eclipse java - Télécharger - Langages
- Java apk - Télécharger - Langages
5 réponses
Bonsoir Sanader,
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 !
<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 !
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?
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?
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 :
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,
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,
Alors tu as deux solutions.
La première, c'est continuer dans le même sens :
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.
Cordialement,
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,
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>
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).
Ensuite, sur ton lien 1, dans onMouseOver, tu peux appeler plusieurs fois ta fonction avec un paramètre différent :
Cordialement,
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,
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question