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
Doud - 20 déc. 2008 à 14:23
A voir également:
- Script Java: Apparaître disparaître.
- Script vidéo youtube - Guide
- Waptrick java football - Télécharger - Jeux vidéo
- Java apk - Télécharger - Langages
- Jeux java itel football - Télécharger - Jeux vidéo
- Java jre - Télécharger - Langages
5 réponses
Marco la baraque
Messages postés
996
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
328
15 nov. 2008 à 00:51
15 nov. 2008 à 00:51
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 !
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
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?
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
328
15 nov. 2008 à 01:14
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 :
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,
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
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 !
Un grand merci à toi, je n'aurais sans doute jamais réussi..!
Merci !
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:21
15 nov. 2008 à 01:21
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 ^^)
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
328
>
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
15 nov. 2008 à 01:36
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,
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
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
328
15 nov. 2008 à 02:13
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).
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,
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
15 nov. 2008 à 15:11
C'est super j'ai enfin réussi mon coup..!
Merci à toi !!
Merci à toi !!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question