J'aimerais savoir si c'est possible, quand on a 2 liens avec le même href dans notre page, d'appliquer, au survol d'un seul des 2, un style aux 2 en même temps ?
en CSS ce n'est pas possible : le hover/focus ne s'applique à l'unique élément survolé/mis en focus. Tu peux jouer avec JavaScript, en détectant le hover/focus, et si l'url correspond à ce que tu attends, ajouter une classe spécifique à tous les liens avec cette url en href - et enlever la classe à la perte de hover/focus.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Merci de ta réponse, les étapes que tu m'a indiqué me paraissent claires.
Du coup, j'avais pas encore commencé le javascript mais je m'y suis mis.
J'ai d'abord ajouter aux lien les attributs onmouseover (curseur sur l'élément) et onmouseout (curseur qui sort de l'élément) (qui sauf erreur de ma part sont les équivalents de hover en javascript):
J'ai ajouté à ces attributs comme valeur (qui doit être un code JavaScript) les fonctions qui vont respectivement ajouter et enlever une classe spécifique aux liens qui ont le même href. Voilà les fonctions(que j'ai ajouté directement dans mon code html via la balise <script>):
<script>
zoom(url)
{
var els = document.querySelectorAll("a[href=url]"); //stocke tous les liens vers url (2 normalement) dans un tableur (de taille 1 donc)
for (var i = 0; i < els.length; i++)
{
var el = els[i];
el.classlist.add("survol") //On ajoute la classe survol à ces liens
}
}
dezoom(url)
{
var els = document.querySelectorAll("a[href=url]"); //stocke tous les liens vers url (2 normalement) dans un tableur (de taille 1 donc)
for (var i = 0; i < els.length; i++)
{
var el = els[i];
el.classlist.remove("survol") //On enlève la classe survol à ces liens
}
} </script>
Cependant, au survol, il ne se passe rien. J'ai un doute sur la ligne suivante:
var els = document.querySelectorAll("a[href=url]"); //stocke tous les liens vre url (2 normalement) dans un tableur (de taille 1 donc)
Je ne pense pas que le href comprenne que url est une variable javascript (parmètre de la fonction).
Alors, déjà, on oublie les "ontruc", c'est intrusif, on fait ça avec des écouteurs :
var listenedLinks = document.querySelectorAll('a.listened'); // ou juste "a" si tu n'as pas accès au HTML
for (var i = 0; i < listenedLinks.length; i++) {
var link = listenedLinks[i];
link.addEventListener('mouseenter', function() {
zoom(link.href);
});
link.addEventListener('mouseleave', function() {
zoom(link.href);
});
}
Ensuite, dans tes fonction "zoom" et "dezoom", url est un argument, c'est donc une variable disponible dans la fonction. Il ne faut donc pas la laisser entre les guillemets - ça devient une chaîne de caractère toute banale.
Ce que tu cherches c'est
var els = document.querySelectorAll("a[href='" + url + "']");
Pas d'aide concernant le code par MP, le forum est là pour ça :)
<script>
var listenedLinks = document.querySelectorAll('a'); // ou juste "a" si tu n'as pas accès au HTML
//On stocke tous les liens dans listenedLinks
//Pour chaque lien
for (var i = 0; i < listenedLinks.length; i++)
{
listenedLinks[i].addEventListener('mouseover', function() //on lui permet d'être zoomé à chaque fois qu'on passe dessus
{
zoom(link.href);
});
listenedLinks[i].addEventListener('mouseout', function() //on lui permet d'être dézoomé à chaque fois qu'on le lâche
{
dezoom(link.href);
});
}
zoom(url)
{
var urlLinks = document.querySelectorAll("a[href='" + url + "']"); //stocke tous les liens vers url (2 normalement) dans un tableau (de taille 1 donc)
for (var i = 0; i < urlLinks.length; i++)
{
urlLinks[i].classlist.add("survol") //On ajoute la classe survol à ces liens
}
}
dezoom(url)
{
var urlLinks = document.querySelectorAll("a[href='" + url + "']"); //stocke tous les liens vers url (2 normalement) dans un tableau (de taille 1 donc)
for (var i = 0; i < urlLinks.length; i++)
{
urlLinks[i].classlist.remove("survol") //On enlève la classe survol à ces liens
}
} </script>
J'ai placé ce script avant de refermer la balise <body> (avant </body>).
J'ai bien les instructions que je voulais mais rien ne se passe lorsque je survol mes liens, que ce soit sur mozilla ou IE.
ok , merci pour le conseil. J'ai rectifié pour les fonctions, ça ne marche toujours pas, je vais continuer à chercher.
Sélection de plusieurs liens (vers la même page)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)