Ma première fonction

Résolu
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008 - 25 avril 2008 à 23:18
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 - 27 avril 2008 à 17:15
Je tente d'ecrire une fonction pour gérer le background de liens dans un menu dynamique

Je suis carrément novice et évidement, ca ne marche pas :os

Je la reproduit ici en essayant de simplifier au maximum (le but est de changer le bg de lien a en survolant lien b)

html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="liens.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="liens.js"></script>
</head>



[# lien a]

[# lien b]

</html>

css :

a:hover {background-color:red;}
.noir a:hover {background-color:black;}

javascript :

function lien(){
getElementById('liena').className='noir';
}

Si vous m'aidez a dépatouiller ca, je serais bienheureux ;o)

41 réponses

cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
26 avril 2008 à 15:16
>>le problème est simple en fait je veux modifier le background de lien A au survol de lien B

je répond "strictement" à ce qui est demandé !

[# lien a]

[# lien b]

<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.style.backgroundColor="red";    }
    function par()
    {    l.style.backgroundColor="green";    }
</script>

    pas certain que le css puisse faire cela.....

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
3
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
27 avril 2008 à 12:19
et donc :

<style>
a:hover {background-color:red;}
.class1  {background-color:red;}
.class2  {background-color:none;}
</style>
[# lien a]

[# lien b]

<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.className="class1";    }
 function par()
    {    l.className="class2";    }
</script>

ça baigne....

<head>
<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.className="class1";    }
 function par()
    {    l.className="class2";    }
</script>
<style>
a:hover {background-color:red;}
.class1  {background-color:red;}
.class2  {background-color:none;}
</style>
</head>

[# lien a]

[# lien b]

    ça baigne plus....

    au fait :
¡————————¡——————————————————————————————————————————————————————————¡
|FireFox |regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
| | |
| | et mieux, télécharger FireBug |
¦————————¦——————————————————————————————————————————————————————————¦
|Internet|activer le deboggage : Outils/options Internet/Avancés |
|Explorer| dans la liste, sous "Navigation" : décocher |
| | ° Afficher une notification de chaque erreur de script |
| | ° Désactiver le débogage de Scripts (Internet Explorer) |
| | |
| | et mieux, télécharger le Debogger IE |
¦————————¦——————————————————————————————————————————————————————————¦
|K—Meleon|regarder la "console d'erreurs" |
| | Outils / Console d'erreurs |
¦————————¦——————————————————————————————————————————————————————————¦
|Opera |regarder la "console d'erreurs" |
| | utils / Asole d'erreurs |
¦————————¦——————————————————————————————————————————————————————————¦
|Safari |regarder Debug / Show JavaScript Console |
| | |
| |modif Fichier "Support:\Documents and Settings\utilisateur|
| |\Application Data\Apple Computer\Safari\Preferences.plist"|
| | y ajouter <key>IncludeDebugMenu</key> |
| | <true/> |
!————————!——————————————————————————————————————————————————————————!

et pour nico, ne sachant pas de qui tu parles...
( tu peux me dire en privé, je te répondrais de même ! )
j'en connais, au moins 1, qui semble, peut-être, un codeur
"pas trop mauvais", mais totalement détestable, stupide...
pour n'en pas dire plus...

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
3
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 00:15
J'ai corrigé deux erreurs mais ca ne fonctionne toujours pas :

.noir a {background-color:black;}

document.getElementById('liena').className='noir';
0
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
26 avril 2008 à 08:50
Salut,

Tu aurai pu m'attendre, lol !!
Tout ça pour dire que je viens de me lever et que j'ai répondu a ton message !!!

J'ai répondu que si tu mettais une class sur tes liens tu pouvais peut être faire quelque chose dans ce genre :

   .class:hover
{
   background-color: couleur;
}

Si t'a besoin d'aide, MP !!!
0

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

Posez votre question
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 16
26 avril 2008 à 08:52
Bonjour,
essaies avec ce style

<style type="text/css">

a:hover {
  background-color:red;
}
a.noir:hover { /* note l'ecriture */
  background-color :
black;
  color : white
}
</style>
;O)
0
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 13:25
Merci de vos réponses ;o)

Je viens de tester ca et aucune des deux ne marchent, je m'explique.
Si je met la même classe aux deux liens, quand je survoole lien A, lien B est modifié, et c'est genant pour mon menu dynamique.
Pour ce qui est de la syntaxe css, cela ne fonctionne pas mais j'aurais au moins progressé en "orthographe" ;o)
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
26 avril 2008 à 13:47
Bonjour,

    >>Si je met la même classe aux deux liens, quand je survole lien A, lien B est modifié,
       ah ben... sûrement pas ? le "survol" est bien attaché au survol d'un lien
             l'autre ne change pas... puisque non survolé....

    >>Pour ce qui est de la syntaxe css, cela ne fonctionne pas
       si si ( l'impératrice ) désolé d'affirmer ça;, mais le css : ça fonctionne
       peut-être pas comme tu voudrais ?
          encore faudrait-il savoir ce que tu veux.... justement !
          et encore faut-il faire ce qu'il faut pour obtenir ce qu'on voudrait
          .... si c'est possible ( et ça ne l'est pas toujours... quoique )

    >>pour mon menu dynamique.
       pas vu de menu ici.... me trompe-je ?

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 13:52
Bonjour Bultez,

le problème est simple en fait je veux modifier le background de lien A au survol de lien B

Et je n'accuse ni le CSS ni le JavaScript, je voulais simplement dire que la solution proposé ne fonctionnait pas

Effectivement il n'y a pas de menu dynamique, j'ai tenté se simplifier au maximum le problème, j'adapterais par la suite à ce fameux menu
0
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 14:18
Je met la source du menu dynamique horizontal, si cela peut aider

Il est adapté dans mon cas avec une cascade de sous menu et je voudrais conserver le background des liens du haut vers le bas
0
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
26 avril 2008 à 14:20
Salut,

essaye ça, en supposant que le lienA est un attribut id qui vaut lienA et que le lienB est un attribut id qui vaut lienB :

document.getElementById('lienA').onmouseover = function () {
document.getElementById('lienA').style.background-color = "#couleur";
}
document.getElementById('lienB').onmouseover = function () {
document.getElementById('lienA').style.background-color = "#couleur";
document.getElementById('lienB').style.background-color = "#couleur";
}

Si t'a besoin d'aide, MP !!!
0
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
26 avril 2008 à 15:03
Re,

je viens de me rendre compte d'une erreur :

function lien () {
document.getElementById('lienA').onmouseover = function () {
document.getElementById('lienA').style.bgcolor = "#couleur";
}
document.getElementById('lienB').onmouseover = function () {
document.getElementById('lienA').style.bgcolor = "#couleur";
document.getElementById('lienB').style.bgcolor = "#couleur";
}
}

Si t'a besoin d'aide, MP !!!
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
26 avril 2008 à 15:24
je ne suis pas certain non plus que c'est ce que tu veux réellement !
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 15:35
Bultez,

il me reste du boulot pour adapter ton code mais si, c'est exactement ce que je voulais, lors du survol de lien B on a bien une modification de bg de lien A

En fait mon menu descend en cascade et je veux "conserver" le chemin du haut vers le bas, avec ta fonction et un peu de reflexion je pense y arriver

Nico n'est pas loin de la solution lui aussi (il a pris la même piste que moi) mais je ne sais pas pourquoi, pour l'instant ca ne veux pas functionner :op
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
26 avril 2008 à 15:41
>>En fait mon menu descend en cascade et je veux "conserver" le chemin du haut vers le bas,
    pas sûr, là non plus, de comprendre  
    mais si ce qu'on t'a mis te permet de faire : nickel.
    ça me semble... disons curieux...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 15:50
En fait le menu comprend une cascade de deux sous menu ;
Lors du survol du premier lien, j'ouvre un premier sous menu, je survole un lien dans ce sous menu et il ouvre un sous-sous menu.
Et bien je veux conserver le bg "survol" du premier lien jusqu'au troisième en descendant.
Je pense que je vais adapter ton code comme je vais pouvoir, cela va me faire un script d'un kilomètre et il y a surement beaucoup plus simple.
Mais au moins j'ai un début de solution et je ne passerais plus pour un abruti avec la caboche qui fume derrière son écran :o))
0
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 15:51
Lundi je met les sources et la solution que j'aurais bidouillé ;o)
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
26 avril 2008 à 16:08
ok.   car peut-être ne faut-il pas "faire quelquec chose sur le lien b" quand on est sur le lien a
    mais, et là ça baigne en css ,  "remettre le lien b comme il était" en quittant le lien b ?
    on verra...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
leejunfan Messages postés 45 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 7 août 2008
26 avril 2008 à 16:12
Je suis en train d'adapter le code, cela soulève un nouveau problème.

J'ai une feuille de style avec ses propriétés (a:hover)

Avec la fonction de Bultez j'ai onmouseout qui réatribue un bg a lien A, le soucis c'est qu'ainsi le css ne fonctionne plus, Lien A garde cette propriété

Y a t'il une manière de revenir au css ?
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
26 avril 2008 à 16:39
si tu veux changer background-color, oui. sinon, non.
    sinon met onmouseover sur le lien a

<style>
a:hover { color:yellow;    }
</style>
[# lien a]
[# lien b]
<script>
    var l=document.getElementById("lien1");
    function sur()
    {    l.style.backgroundColor="red";    }
    function par()
    {    l.style.backgroundColor="green";    }
</script>

<hr size="2" width="100%" />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
26 avril 2008 à 16:40
on peut bien entendu jouer avec className si plusieurs choses à modifier.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
Rejoignez-nous