A voir également:
- Afficher un bloc via un id dans une div
- Afficher mot de passe wifi android - Guide
- Afficher calendrier outlook dans google agenda - Guide
- Id chinois one piece fighting path - Forum Jeux vidéos smartphones
- Document id lycamobile - Forum Logiciels
- Bloc note gratuit - Télécharger - Agendas & Calendriers
1 réponse
Salut, déjà il y a un problème:
J'ai un menu dans un bloc gauche de mon ecran avec un id qui corresponds au bloc qui contient le même id que je souhaite afficher/masquer.
Une id étant censé être unique il ne peut avoir deux éléments avec la même id! Rien ne l'interdit (car id est un attribut HTML et HTML permet tout, même certaines erreurs peuvent ne pas l'être)mais en plus d'être source de confusion cela empêchera des fonctionnements normaux.
Bon l'id n'étant pas vraiment le même (ajout de # devant) je ne suis pas sûr que cela bloque. Que vous parliez de JavaScript et montrez de l'HTML est déjà un problème, qu'avez vous commencé à faire et qu'est ce qui bloque? Cela permettrais de mieux vous répondre non?
Bon commençons dans l'ordre. On va enlever les sources d'erreur de fonctionnement (ou au moins de confusion) et respecter une règle tacite d'avoir un code le plus explicite possible.
Déjà je constate que vous avez confondu ID et HREF (id pour identity (identité) en français et HREF pour HypertextReference)
(au passage là vous approchez de la façon de faire un lien dans la page, même s'il n'est pas correct mais en HTML ce qui n'a rien à voir avec JavaScript.
JS c'est de la programmation et HTML n'en est surtout pas.)
Revenons à nos moutons, ça devient:
Pour rappel le doctype HTML5
voire même en HTML5 plus propre rapide et simple(comme tout HTML5) où on se passe des guillemets voire même d'un paquet de trucs superflus:
ou plutôt
Bon maintenant on est sur de bonnes bases.
Pour utiliser l'interactivité(donc la vrai pas un lien) il suffit de mettre un listener(écouteur en français) sur l’élément qui doit agir et d'indiquer son type(clic, survol, etc...). On peut utiliser n'importe quel élément , donc mieux vaut éviter d'utiliser un lien (balise <a>) qui est déjà prévu pour autre chose puisque qu'il méne où on indique(le fameux href comme référence hypertexte en français)
J'ai un menu dans un bloc gauche de mon ecran avec un id qui corresponds au bloc qui contient le même id que je souhaite afficher/masquer.
Une id étant censé être unique il ne peut avoir deux éléments avec la même id! Rien ne l'interdit (car id est un attribut HTML et HTML permet tout, même certaines erreurs peuvent ne pas l'être)mais en plus d'être source de confusion cela empêchera des fonctionnements normaux.
Bon l'id n'étant pas vraiment le même (ajout de # devant) je ne suis pas sûr que cela bloque. Que vous parliez de JavaScript et montrez de l'HTML est déjà un problème, qu'avez vous commencé à faire et qu'est ce qui bloque? Cela permettrais de mieux vous répondre non?
Bon commençons dans l'ordre. On va enlever les sources d'erreur de fonctionnement (ou au moins de confusion) et respecter une règle tacite d'avoir un code le plus explicite possible.
Déjà je constate que vous avez confondu ID et HREF (id pour identity (identité) en français et HREF pour HypertextReference)
<a href="#affiches" rel="nofollow noopener noreferrer" target="_blank">bref c'est mal partit et à moins d'avoir un esprit très tordu et de vouloir se compliquer la vie votre JavaScript derrière ne pourra pas marcher!
(au passage là vous approchez de la façon de faire un lien dans la page, même s'il n'est pas correct mais en HTML ce qui n'a rien à voir avec JavaScript.
JS c'est de la programmation et HTML n'en est surtout pas.)
Revenons à nos moutons, ça devient:
Pour rappel le doctype HTML5
<doctype html><!-- carrément trop...simple et rapide XD-->
<!-- je garde le href=#affiches même si je voit pas vraiment à quoi il peut servir dans ce cotexte --> <a href="#affiches" rel="nofollow noopener noreferrer" target="_blank" ID="lienaffiches">
voire même en HTML5 plus propre rapide et simple(comme tout HTML5) où on se passe des guillemets voire même d'un paquet de trucs superflus:
<a href=#affiches ID=lienaffiche rel=nofollow noopener noreferrer target=_blank>
ou plutôt
<a href=#affiches ID=lienaffiche rel='nofollow noopener noreferrer' target=_blank><!-- avec des guillemets quand il y a des espaces entre plusieurs valeurs , juste par sécurité même s'il ne devrait pas être nécessaire-->
Bon maintenant on est sur de bonnes bases.
Pour utiliser l'interactivité(donc la vrai pas un lien) il suffit de mettre un listener(écouteur en français) sur l’élément qui doit agir et d'indiquer son type(clic, survol, etc...). On peut utiliser n'importe quel élément , donc mieux vaut éviter d'utiliser un lien (balise <a>) qui est déjà prévu pour autre chose puisque qu'il méne où on indique(le fameux href comme référence hypertexte en français)
Ce ne sont que des explications pas le vrai code, je les mets en tant que code pour éviter probléme avec correcteur orthographique. Rien de sorcier avec element_qui_va_interagir.addEventListener( declencheur, instructions_lors_de_levenement, propagationaudessus_ou_pas); Ce qui correspondrait ici : lien_avec_id_lienaffiches.addEventListener('mouseover', function(){ /*ICI ON VA AFFICHER LE TEXTE QUE L'ON DECIDE DANS L'ENDROIT VOULUT*/}, false);
Modifié le 30 sept. 2017 à 05:19
Dans le corps de la fonction anonyme passée dans la fonction addEventListener on met les instructions du texte à afficher.
donc pareil que précédemment d'abord récupérer l'élément de la page en question(toujours par son id ce qui est le moyen le plus simple en général car pas besoin d'avoir à s'occuper des node et de l'arborescence associée.
Pour le dernier argument de la fonction addEventListener le plus souvent il vaut mieux mettre à false, indiquant que l’événement ne se répercutera à l'élément parent qui le contient jusqu'au body.
Ah oui sauf que comme j'ai dit plus haut on utilise une balise a, donc quand on clique il se passe quelque chose(et quand on survole aussi puisque la balise <a> se surligne par défaut.
Donc il faut soit arrêter le fonctionnement normal de a qui sinon risque(ou à coup sûr pour un clic) de remplacer l'événement que l'on veut déclencher soit ne pas utiliser une balise <a> qui n'est pas prévue pour ça puisque déjà prévue pour autre chose. Bienvenue dans la programmation événementielle :)) couplée au DOM.
Bien sûr je recommande simplement d'utiliser une autre balise qui n'a pas des comportements qui déclenche des événements et seront concurrents, cela évite d'avoir à faire du code en plus.
Sinon il suffit d'utiliser .stopPropagation() voire stopPropagationAll() qui comme son nom l'indique bloquera la propagation de l'événement déclenchée par le programme et empêchera celui ci.
Donc mieux vaut éviter d'utiliser <a> pour un clic interne à la page, est parfaitement adapté à cela(sans oublier que la syntaxe HTML utilise 2 balises et de définir type = button. On peut bien sûr utiliser n'importe quel type de balise comme un div. Au fait les div ne doivent plus être utilisés pour l'utilisation que vous en faites, c'est une autre histoire avec section et article, eux ont une valeur sémantiques que les moteurs de recherches peuvent utilisés, div n'en a aucune et sert à définir un élément de page isolé du reste et sans définition précise(donc servent pas souvent , sauf pour éventuellement faire des bouttons scriptés avec JavaScript ;) . L'avantage d'utiliser un bouton lui c'est de pouvoir passer une valeur par l'attribut value et bien sûr de se faire connaître en tant que bouton lors du référencement(en plus d'avoir une apparence de bouton toute prête à utiliser et que les navigateurs mobiles comme navigateurs d'ordi donnent déjà une apparence sans le moindre CSS). Quand aux liens hypertextes, bien ils servent surtout à relier 2 éléments sans avoir à mettre la moindre programmation et ont nativement(à leur création sur la page) des aspects indiquant les état associés(survol, visités, clic..) et tout ça dans le but d'aider et rendre clair à l'utilisateur ce qu'il a devant lui+le référencement, restons sur ce bon principe.
30 sept. 2017 à 05:09
Si je vous faisait tout ça s'appelle un métier et j'ai beau pas être cher je fais payer!
L'entraide c'est bien (quoique là c'est plutôt ne formation et là aussi je fais payer , même plus cher que le développement en taux horaire) alors j'espère que vous allez vous sortir les doigts maintenant que vous avez presque tout sur un plateau.
Oui presque car quand on utilise un outil le plus efficace et rapide c'est regarder la documentation pour apprendre à l'utiliser.
Bon je suis pas cher en ce moment:
voici la doc ou vous pouvez rechercher toutes les fonctions et autres récurrences et banalités(fut un temps on disait même routine mais la programmation était plus à l'âge de pierre et les routines ont pas grand chose à voir) de JavaScript:
.
https://www.w3schools.com/JSREF/met_document_addeventlistener.asp
Chez Mozilla ils ont aussi une bonne doc et en français, mais moins claire et moins officielle.