IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Modifier mon code onMouseOver


Sujet :

JavaScript

  1. #21
    Invité
    Invité(e)
    Par défaut
    Je ne vois pas en quoi je suis "désagréable"...

    C'est une modification très basique, qui ne présente aucune difficulté :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #liste li.mouse-enter /* prise en compte avec la class */
    {
      background: #DDD;
    }

    Quant à l'âge, on ne peut pas le deviner.
    Par contre, on peut le définir dans son "Profil".

  2. #22
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Re,

    background: = fond du texte

    Si je mais color: #f80a0a; le texte devrais se mettre en rouge et il reste toujours pareil sauf que le fond devient gris.

  3. #23
    Invité
    Invité(e)
    Par défaut
    Si tu mettais le VRAI code (pas une "explication du code"), on pourrais te dire où est l'erreur.


    Si c'est le CSS que tu ne maîtrises pas :


  4. #24
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Le code

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mouseover/out sur SVG</title>
    <meta name="Author" content="NoSmoking">
    <meta name="DVP-discussion" content="d1911913">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <style>
    html,
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font: 1em/1.5 Verdana,sans-serif;
    }
    main {
      display: block;
      margin: auto;
      max-width: 60em;
    }
    h1 {
      margin: 0;
      color: #069;
    }
    #liste {
      display: inline-block;
      padding: 0;
      border: 1px solid #CCC;
      list-style: none;
      cursor: pointer;
    }
      #liste li {
        margin: 1px;
        line-height: 1.75;
      }
      #liste li:hover {
        background: #DDD;
      }
      #liste a {
        display: block;  
        padding: 0 .5em;    
        text-decoration: none;
      }
      #liste li.mouse-enter /* prise en compte avec la class */
    {
      background: #caf70c;color: #f80a0a;
    }
    #carte {
      width: 800px;
      margin: auto;
      padding: .5em;
      border: 1px solid #069;
    }
    text {
      fill: white;
    }
    path {
      stroke: white;
      stroke-width: 1;
      fill: #000;
      fill-opacity:.75;
    }
    #vignette g {
      opacity: 0;
      transition: all .3s;
    }
    #vignette text {
      display: block;
      font-size: 1em;
      font-weight: bold;
      fill: #069;
    }
    path.mouse-enter {
      fill: #ABC;
      fill-opacity: 1;  
    }
    path.mouse-enter ~ text {
      fill: #00F;
    }
    #vignette g.mouse-enter {
      opacity: 1;
    }
    </style>
    </head>
    <body>
    <main>
      <header>
        <h1>Circonscriptions de l'Allier</h1>
      </header>
      <section>
        <ul id="liste">
          <li><a href="1_circonscription.html" target="myFrame">1<sup>ére</sup> Circonscription</a></li>
          <li><a href="2_circonscription.html" target="myFrame">2<sup>éme</sup> Circonscription</a></li>
          <li><a href="3_circonscription.html" target="myFrame">3<sup>éme</sup> Circonscription</a></li>
        </ul>
      </section>
      <section id="carte">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="640" viewBox="-6 0 1000 800">
          <g>
            <a id="region-01" xlink:href="europe/france/1ére_circonscription_circonscription.html" target="myFrame">
              <path id="path_01" d="M398.5,337.7l-8.4-0.6l-13.1-6.2l-5.4,1.3l-2.2,5.1l-2.8,0.4l-9.2-6l0.7-5.8l-2.3-5.4l-15.1-9l-0.4-0.2l-6.6-9.6l-17.1-11l-9.4-14l5.7,1.2l19.4-6l7.2-4.9l8.3,1.4l3.3-4.7l-1.6-8l-8.1-14l24.1-15.5l1-10.8l5.1-2.7l-14.6-22l-7.3-4.1l-0.4-11.7l-2.5-0.6l-1.1,2.3l-4.8-6.7l-19.9-10.8l-1.6-5.4l1.4-5.5l-6.9-5l7.3-3.9l-3.4-13l1.4-5.2l7.9,2.3l7.1-17.5l-12.9-8l-0.6-13.2l17.7-15.3l2.9-7.9l10.7-4.7l6.9-4.8l-0.9-5.5l4.5-3.5l8.1-2.6l5.1,1.7l7.3,0.4l4.3-9.4l11.5,0.4l9.6,5.4l11.3-2.4l6.6,5.4l2.6-1.3l3.2,18.5l7,12.6L459,88.4l12.2,3.8l14.1,4.8l10.3,14.5l1.3,1.7l10.5,14.4l21.4,10.2l6.8-3.7l6.2-5.7l1.5-5.4l2.7-0.8l14.8-8.6l5.1-6.9l8.3,0.8l0.2-0.1l8.5-0.6l3.7,10.9l7.8,12l17.3,3l5.1-3l5.5-1.9l6.2-9.7l2-8.4l5.4-2.1l14.2,3.2l11.3-0.9L659,118l1.1,5.5l10.1,4.2l2.4,4.9l0,8.5l-4.1,4l0.1,5.5l-2.6,1.2l5.2,2.7l2.4,5.3l16.1,0.6l2-1.8l0.1-5.6l19.4-20.6l8-1.9l4.9,6.7l2.9,0l3.7-4.3l3.2-4.5l-6.3-13l-0.7-14.1l12.2,5.4l4.7-5.9l2.2,4.9l8.7-7.1l-10.3-20.2l8.5-11.3l5.5,9.3L770,75l4.3,3.7l-3.8,7.2l8.6,14l0,14l7.8,2.7l2.5,13.8l10,4.6l-1.5,8.3l14.9,9.2l2,5.5l0.1,2.5l2.9,5.6l2.6,8l4.1,3.8l4.3,3.9l-0.3,2.9l-5.7,10.1l3.5,4.4l8.6,1.4l2.6,16.6l0.8,6.6l0.3,13.1l-3.9,4.9l-0.9,5.5l5.3,6.8l8.1,2.8l8.3-2.4l4.3,3.5l1.7,5.3l7.9,0.8l4.8,6.4l5.2-0.8l14.6-9.2l5.4,6.3l-3.6,4.6l2.8,4.5l0.4,0.1l5.4-2l5,2.2l-2,14.3l2.8,4.9l15.7,7.3l3.6-3.8l2.4-5.2l7.8-3.7l10.3,4.3l13.8,0.3l-3.4,9.8l7.4,0.7l-8.2,11.5l0.8,8.5l-7.5,8.1l2.4,5.2l-4.8,1.5l-5.6,5.8l-7.9,2.1l-4.4-16.4l-9.8-10l-4.5,3.5l-2.2,8.1l-5.4-1.3l-3.3,7.8l3.5,7.4l-0.5,5.5l-6.2,8l-15.1,7.4l-2.9,0.2l-2.5-5.2l-5.8-8.9l-10.1,3.8l-3.4-9.8l-5.2-2l-6.3,5.5l-10.5-4.3l-9.6,5.3l-3.3-7.7l-10.6,2.9l-5-2.8l2.6-10.8l-4.6-2.9l0.8-2.8l-2.9,0.6l-2.8,5.1l-8.6,1.5l-12.9,6.9l-2.4,5.3l2.2,4.9l-2.2,1.7l-11.5-7.7l-2.6,0.8l-1.5,5.3l-8.4-1.2l-5.7-9.8l-8.2,1.6l-8.2-11.1l-10.6,8.4l-2.1,7.8l-5,1.3l4.8,13.4l-2.8,16.5l-5,2.1l-8.5-1.5l-5.3,2.5l-13-6l0.1,2.4l-8,4.8l-3.6,7.3l0.9,5.4l3.7,4l2.3-1.5l13.4,16.6l7.5,4.9l7.3,4l-0.3,14.3l4.2,7.6l10.3,15.1l2.6,0.6l2.8,0.4l-3.3,7.7l1.8,2.2l-6.2,8.8l-7.6,3.3l-1.2,8.3l-7.8,1.5l-0.1,14l5.3-1.2l4.4,3l4.7,15.3l-2.2,1.9l-11.7,6.6l-5.6,0.2l-7.3,4.4l-6.2,5.4l-10.5,0.5l-6.5-4.3l-2.5,0.9l-10,9.5l-3.9,3.9l-7.9,2.5l-0.4-5.5l3.6-7.3l-1-13.7l2.5-4.7l-18.6,1.7l-4.6-2.7l-8.1-30.8l-17.6-9.2l-2.8-0.1l-4.2,5.5l-8.4-0.9l-1.3-2.6l-6.1,9.4l2.2,7.7l-3.4,4.4l-12.8,2.4l-7-3.2l4.4,19.7l-3.7,7.6l-10.2,8.4l-3,10l-4.4,4.8l-10.4,3.1l-12.9-6l-5,2.1l-8.1,11.1l-10.1-9.8l-5.6-0.4l-0.1-7.4l-4.1-2.1l-9.3-4.9l-3.1-5.3l-2.5,1.4l-8.5-7.1l3.9-16.1l-7.6-11.4l-9.8-4.5l1.4-7.6l-4.2-6.8l-4.9,6.4l-2.8,0.2l-6-5.6l-6.6-11.9l-2.2-1.5l-7.6,2.4l-4.6-2.6l-0.9-5.8l3.9-14.1l11-11.8l3.4-10.1l-5.5-6.1l2.1-5l-5.2-6.6l-4.8-3.2l-0.3-5.8l-2.2-1.9l-11.5-0.2l-7.8-3.7l2-13.7l2.8-4.8l-1-5.4l-0.4-5l-6.5-11.9l4.1-15.8l5.4-1.3L398.5,337.7z" />
              <text transform="matrix(1.0064 0 0 1 567.1992 288.5073)">
                <tspan x="-40" y="0">1</tspan>
                <tspan x="-30" y="0" dy="-1ex">ére</tspan>
                <tspan x="0" y="0">Circonscription</tspan>
              </text>
            </a>
          </g>
          <g>
            <a id="region-02" xlink:href="europe/france/2éme_circonscription_circonscription.html" target="myFrame">
              <path id="path_02" d="M223.9,111l7.1-8.6l8.4-0.9l1-14.1l14.9-7.5l2.2,1.5l5.4,13.1l6.5,5.5l2,5.2l4.7-2.9l4.7,1.8l4.6-2.9l6.2-9.3l19.7-1.5l5.3,6l5.2,1.3l12.9,8l-7.1,17.5l-7.9-2.3l-1.4,5.2l3.4,13l-7.3,3.9l6.9,5l-1.4,5.5l1.6,5.4l19.9,10.8l4.8,6.7l1.1-2.3l2.5,0.6l0.4,11.7l7.3,4.1l14.6,22l-5.1,2.7l-1,10.8l-24.1,15.5l8.1,14l1.6,8l-3.3,4.7l-8.3-1.4l-7.2,4.9l-19.4,6l-5.7-1.2l9.3,14l17.1,11l6.6,9.6l0.4,0.2l15.1,9l2.3,5.4l-0.7,5.8l9.2,6l2.8-0.4l2.2-5.1l5.4-1.3l13.1,6.2l8.4,0.6l4,4.3l-5.4,1.3L393,359l6.5,11.9l0.4,5l1,5.4l-2.8,4.8l-2.1,13.7l7.8,3.7l11.5,0.2l2.2,1.9l0.3,5.8l4.8,3.2l5.2,6.6l-2.1,5l5.5,6.1l-3.4,10.1l-11,11.8l-3.9,14.1l0.9,5.8l4.6,2.6l7.6-2.4l2.2,1.5l6.6,11.9l6,5.6l2.8-0.2l4.9-6.4l4.2,6.8l-1.4,7.6l9.8,4.5l7.6,11.4l-3.9,16.1l8.5,7.1l2.5-1.4l3.1,5.3l9.3,4.9l4.1,2.1l0.1,7.4l-2.6-0.2l-11.9,10.1l3.6,4.3l-6.3,9.7l3.8,13.5l-3.3,4.7l1.3,0.8l-1.2,4.6l5,1.5l-3.1,4.6l2.5,7.6l-6.5,4.3l2.3,10.8l-7-0.7l-0.8-11l-4.9-13.3l-2.8-0.5l-9.6,6.4l-11,3.2l-6.5-5.6l-7.5,3.8l-5.3,0.4l-4.6-10l-8.5-7.2l-8.2-1.1l-4.8,2.3l-4.2-6.1l-5.2-15.8l-1.9-19.2l-5,2.2l-16-4.5l-2.8-3.8l4.8-3.1l0.5-5.9l-4.2-13.7l1.8-5.6l4.6-3.6l7.2-3.2l1.5-2.4l-3.9-7.2l7.9-7.7l-5.3-1.2l-6.3-5.2l-11.7,0.6l-11.2-3.7l-11.7,1.7l-3.6-4.6l-23.4,12.3l-0.9,8l3.3,10.1l-2.5,1.3l-1,11.1l-4,7.3l-13.6-2l-9.9-10l-5.7,0.6l-7.8-8.2l-8-2.9l-6,9.5l4.6,13l-4.3,6.8l0.3,5.4l-11.8,0.4l-10.2,4.4l-4.9,2.9l-0.8,11.3l-3.5,4.4l-2.8,10.7l-1.3,2.2l-4.4,10.3l-4.4,3.7l-5.6,1.1l-7.8-2.8l-12.6-6.7l-6.1,3.4l-9.7-10.9l-5.3-2.6l-3.6-26l-10-1.6l-7.7-7.2l-0.1-7.7l-3.8-7.1l-3.8-29.7l0.6-0.7l-15.8-8.8l-6.4-15.6l1-5.5l0.4-2.9l-5.8-6.2l-15.7-7.2l-5.5,1.4l-4.3,7.3l-2.7-0.7l-3.3-10.5l2.9-10.1l-18.8-17.8l-1.2-0.3l-8.9,16l-2.5,1.3L40,434.1l-13.7-1.5L15,424.7l-1.7-5.3l-5.5-1.2l3.3-4.4l1-7.4l7.9-7.6l8,0l-0.4-2.7l-2.9-7.8l-10.9,2l-6.7-4.8l-8.1-1.2l-1.2-2.5l-3.7-18.6l2.1-1.8l-1.9-5.4l1.3-2.6l-1.5-5.7l3.6-20.1l12-20.1l6.7,5.8l6-4.1l1.3-7l-2.7-4.9l5.3-9.8l9.9-10.1l9.8-5.6l9.1,0.1l17.6-2.1l7.6-4.3l5.8,0.6l4.7,3.5l14-4.6l7.2-5.2l7.9,1.3l0,5.6l2.1,1.9l5.5-1.1l3.4-4.5l5.5-0.5l6.7,8.1l23-15.7l19.9-10.8l1.3-2.5l-4.4-7.3l1.5-8.1l-5.7-18.7l-8.4,0.6l-3.8-10.1l-5.2-2.2l11.7-6.3l-2.3-7.9l6.8-8.7l-1.9-8.2l-15.1-4.9l2.1-5.7l20.6-8.4l0.5,5.6l9.8,5l4.4-10.2l0.2-2.8l-5.9-5.9l1.1-8.4l2.7-0.8l11.5,1.1l4.7-7l12.5-6.1L223.9,111z" />
              <text transform="matrix(1.0064 0 0 1 188.2813 362.7324)">
                <tspan x="-40" y="0">2</tspan>
                <tspan x="-30" y="0" dy="-1ex">éme</tspan>
                <tspan x="10" y="0">Circonscription</tspan>
              </text>
            </a>
          </g>
          <g>
            <a id="region-03" xlink:href="europe/france/3éme_circonscription_circonscription.html" target="myFrame">
              <path id="path_03" d="M690.7,544.3l-10.5,0.5l-6.5-4.3l-2.5,0.9l-10,9.5l-3.9,3.9l-7.9,2.5l-0.4-5.5l3.6-7.3l-1-13.7l2.5-4.7l-18.6,1.7l-4.6-2.7l-8.1-30.8l-17.6-9.2l-2.8-0.1l-4.3,5.5l-8.4-0.9l-1.3-2.6l-6.1,9.4l2.2,7.7l-3.4,4.4l-12.8,2.4l-7-3.2l4.4,19.7l-3.7,7.6l-10.2,8.4l-3,10l-4.4,4.8l-10.4,3.1l-12.9-6l-5,2.2l-8.1,11.1l-10.1-9.8l-5.6-0.4l-2.6-0.2l-11.9,10.1l3.6,4.3l-6.3,9.7l3.8,13.5l-3.3,4.7l1.3,0.8l-1.2,4.6l5,1.5l-3.1,4.6l2.5,7.6l-6.5,4.3l2.3,10.8l3,2.4l5.5,5.9l18.6,4.2l11.1-0.1l0.1-5.7l15.4,0.7l4.9-1.9l4.2,6.3l1.2-2.3l5,0.3l0.3,4.7l5.4,1l8.2-2.4l11.1,2.4l5-2.5l5.1,2.3l5.2-2.1l-0.4,2.5l8.9,3l9.1,4.6l-0.4,7.8L624,657l7.9-8.3l11.4-1.8l9.9-6.3l2.3,5.4l6.5,5.9l5.7,0.4l5.1-2.9l2.1,3.6l1.9,7.4l6.5,8.5l-5,2.3l2.5,7.9l-1.9,16.3l5.2-2.1l7.8-3l19.5-0.1l0.2-4.9l7.7-1.5l2.5,0.7l1.5,4.7l4.5-0.2l2.5,0.5l0.9-2.6l13.4,0.4l6.1-5.2l7.4,7.6l7.1,14.4l7.2,11.4l3.5,18.7l4.1-3.6l15.9,3.5l6.6,4.3l2.6,12.7l6.6,7.9l0.2-14.2l6-6.1l-1.6-8.4l4.5-6.9l18.8,6.2l5-2.8l2.6-8.1l2.8-0.7l12.5,6.5l5.2-2.1l5.5-6.5l5.5-1.2l7.8-2.9l0.7-5.5l4.2-3.8l0.2-0.2l-2.7-0.4l-1.5-5.3l-5.1-10.3l-1.3-14.5l-4.7-13.6l9.1-30.8l-10.7-16.5l-5.4-1.7l4.5-15.9l-4.5-10l-1-10.8l9.4-4.1l-10-20l-1.1-11.4l3.1-7.5l-5.3-10.1l-6.7-5.4l-2.4-11l5.2-2.2l14.1,3.8l2.9-15.5l24.8-4.1l10.6-1.3l5.1-9.9l5.4,1.5l7.3-1.8l-4-7.4l5.4-6.9l17.1-2.5l9.4-6.2v-1.6l0.7-11.4l11.6-1.1l8.4,2.3l12-7.9l-5.9-0.1l-5-0.9l1-18.3l2.4-16.3l-5.6-12.3l-2.5-10.6l6-8.1l-1.9-7.3l-0.3-2.7l6.5-4.5l-3.5-9.9l7.7-2.9l0.9-2.7l-3.9-7.4l2.3-5.2l-1.6-5.1l-11.3-7.6l-2.7-4.7l-5.3,1.3l-8.2,11.5l0.8,8.5l-7.5,8.1l2.4,5.2l-4.8,1.5l-5.6,5.8l-7.9,2.1l-4.4-16.4l-9.8-10l-4.5,3.5l-2.2,8.2l-5.4-1.3l-3.3,7.8l3.5,7.4l-0.5,5.5l-6.2,8l-15.1,7.4l-2.9,0.2l-2.5-5.2l-5.8-8.9l-10.1,3.8l-3.4-9.8l-5.2-2l-6.3,5.4l-10.5-4.3l-9.6,5.3l-3.3-7.7l-10.6,2.9l-5-2.8l2.6-10.8l-4.6-2.8l0.8-2.8l-2.9,0.6l-2.8,5.2l-8.6,1.5l-12.9,6.9l-2.4,5.3l2.2,4.9l-2.2,1.7l-11.5-7.7l-2.6,0.8l-1.5,5.3l-8.4-1.2l-5.7-9.8l-8.2,1.6l-8.2-11.1l-10.5,8.4l-2.1,7.8l-4.9,1.3l4.8,13.4l-2.8,16.5l-5,2.1l-8.5-1.5l-5.3,2.5l-13-6l0.1,2.4l-7.9,4.8l-3.6,7.3l0.9,5.4l3.7,4l2.3-1.5l13.4,16.6l7.5,4.9l7.3,4l-0.3,14.3l4.2,7.6l10.3,15.1l2.7,0.6l2.8,0.4l-3.3,7.7l1.7,2.2l-6.2,8.8l-7.6,3.3l-1.2,8.3l-7.8,1.5l-0.1,14l5.3-1.2l4.5,2.9l4.7,15.3l-2.2,1.9l-11.7,6.6l-5.6,0.1l-7.3,4.4L690.7,544.3z" />
              <text transform="matrix(1.0064 0 0 1 767.5684 510.2725)">
                <tspan x="-40" y="0">3</tspan>
                <tspan x="-30" y="0" dy="-1ex">éme</tspan>
                <tspan x="10" y="0">Circonscription</tspan>
              </text>
            </a>
          </g>
          <!-- les vignettes -->
          <g id="vignette">
            <g>
              <image xlink:href="http://www2.assemblee-nationale.fr/static/tribun/15/photos/718720.jpg" width="150" height="192" />
              <text transform="translate( 0, 750) scale(1.5)">
                <tspan x="0" y="0">Jean-Paul Dufrègne,</tspan>
                <tspan x="0" dy="2ex">député GDR de la 1ère circonscription de l'Allier</tspan>
              </text>
            </g>
            <g>
              <image xlink:href="http://www2.assemblee-nationale.fr/static/tribun/15/photos/718728.jpg" width="150" height="192" />
              <text transform="translate( 0, 750) scale(1.5)">
                <tspan x="0" y="0">Laurence Vanceunebrock-Mialon</tspan>
                <tspan x="0" dy="2ex">députée LREM de la 2ème circonscription de l'Allier</tspan>
              </text>
            </g>
            <g>
              <image xlink:href="http://www2.assemblee-nationale.fr/static/tribun/15/photos/718736.jpg" width="150" height="192" />
              <text transform="translate( 0, 750) scale(1.5)">
                <tspan x="0" y="0">Bénédicte Peyrol</tspan>
                <tspan x="0" dy="2ex">députée LREM de la 3ème circonscription de l'Allier</tspan>
              </text>
            </g>
          </g>
        </svg>
      </section>
    </main>
    <script>
    // récup. des éléments concernés
    var oLIs = $("#liste li");
    var oPaths = $("[id^='path']");
    var oVignettes = $("#vignette g");
    /**
     * fonction appliquée au survol in/out
     * Attention : les différents éléments doivent être dans le même ordre
     * @param {Object} event - mouse event
     */
    function handleShowHide(event) {
      var action = event.type === "mouseenter" ? "addClass" : "removeClass";
      // get position élément
      var tagName = this.tagName;
      var index = $(this).index(tagName);
      // affiche la vignette correspondante
      oVignettes.eq(index)[action]("mouse-enter");
      // colorise le path correspondant
      oPaths.eq(index)[action]("mouse-enter");
    }
    // affectation des événements
    oLIs.on("mouseenter mouseleave", handleShowHide);
    oPaths.on("mouseenter mouseleave", handleShowHide);
    </script>
    </body>
    </html>

  5. #25
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Tout a été dit au post #17
    Citation Envoyé par jreaux62
    Les <li> avec la classe "mouse-enter" (ajoutée/supprimée via le code JS) et le <li> survolé (:hover) prennent un fond gris.
    en gros on cible les <li> pas les <a> qui sont à l'intérieur.

    Si tu veux cibler les <a> il te faut les prendre en compte dans le sélecteur de ta règle, c'est la base du CSS
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #liste li.mouse-enter a,
    #liste li:hover a{
        /* tu mets ici ce que tu veux */
    }
    Ceci étant c'est un pur soucis de CSS à poster dans le forum qui va bien la prochaine fois pour ne pas obscurcir un peu plus ta discussion.

    Nota : au passage je note que tu n'as pas intégrer la modification de la fonction pour que le changement dans la liste soit effectif.

    @jreaux62 :
    Pour ma part, je n'ai pas tout compris...
    n'hésite pas à poser ta propre question c'est avec grand plaisir que j'y répondrais.

  6. #26
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    n'hésite pas à poser ta propre question c'est avec grand plaisir que j'y répondrais.
    J'ai surtout dit ça pour l'inciter à poser ses questions * (et ça me rendais presque humain... )
    (* en croyant que ce serait une question sur le code JS)

    Cela dit, je ne savais pas qu'on pouvais définir l'action ainsi :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      var action = event.type === "mouseenter" ? "addClass" : "removeClass";
    ...
      oVignettes.eq(index)[action]("mouse-enter");
    (ce n'est pas trop "niveau débutant"...)

    J'ai au moins appris quelque chose ! :cool:

  7. #27
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Salut NoSmoking

    Je te remercie je vais continuer avec cette configuration.

    Sa me fait rire (et ça me rendais presque humain... ) de la part jreaux62

    Mais je suppose qu'il avoir un caractère comme le climat de sa région.

    Bonne soirée

    Max

  8. #28
    Invité
    Invité(e)
    Par défaut
    On voit bien que tu ne connais pas ma région, ni ses habitants.

    Climat froid, coeurs chauds.


    "Un étringer qui vient ichi, y braie deux fois.
    Quind il arrive et quind y r'part."

  9. #29
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Si j'ai bien compris tu es du pas de calais et si cela est le cas ma femme et de Lens sa fait 50 ans que je mis rend au moins deux fois part ans

    Alors tu vois que je connais bien ta région......

  10. #30
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    NoSmoking

    Peut tu me dire comment bouger l'image "Vignette" parce-que j'essaye de mettre position: absolute; top et left rien ni fait;

    @+

    Max

  11. #31
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Citation Envoyé par apdf1 Voir le message
    je ne veut pas que le <li> survolé (:hover) prennent un fond gris je veut que le texte change de couleur au passage de la souris sur la carte
    Ah tu précises bien "au passage de la souris sur la carte" et non "sur le <li>"...

    Sinon pour bien comprendre :

    - De quel texte parles-tu ?
    1-Est-ce celui du <li> correspondant à la partie de la carte survolée par la souris ?
    2-Ou bien celui qui se trouve dans la partie de la carte survolée par la souris ?

    Si c'est le 2 eh bien actuellement ce texte est mis en bleu (#00F) par ce CSS :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    path.mouse-enter~text {
          fill: #00F;
    }

    Il suffit juste de changer la couleur par celle que tu souhaites (#f80a0a)...

    Et le fond est mis en couleur #ABC par ce CSS :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    path.mouse-enter {
                fill: #ABC;
                fill-opacity: 1;
    }
    Là aussi tu peux changer si besoin...

    - Si c'est le 1 alors je ne sais pas si on peut le faire seulement avec du CSS (c'est à réfléchir...) alors pour l'instant je l'ai fait avec un peu de JS que j'ai ajouté à la fonction de NoSmoking... Tu peux tester ici*** : https://jsbin.com/cusuhazido/edit?html,output...

    Par contre c'est du JS pur alors il y a peut-être mieux avec JQuery...

    ***EDIT : Voici le code tenant compte de la remarque faite dans mon message suivant : https://jsbin.com/navidireno/edit?html,output, c'est presque le même...

    Citation Envoyé par jreaux62 Voir le message
    C'est une modification très basique, qui ne présente aucune difficulté :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #liste li.mouse-enter /* prise en compte avec la class */
    {
      background: #DDD;
    }
    Ce n'est peut-être pas aussi simple finalement...

    En plus ce n'est pas juste un problème de CSS car il faut comprendre le code JS pour savoir quel CSS il faudrait modifier (dans le cas 2) et dans le cas 1 je ne sais pas si on peut le faire seulement avec du CSS...

    Et j'ai remarqué que si on ajoute une couleur au <li> ça ne passe pas, il faut l'ajouter à sa balise <a>... A moins que quelque chose m'aies échappé ???

    PS : En tous cas c'est un joli code de NoSmoking !

  12. #32
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Ah oui au fait j'ai remarqué que lorsque la souris survole n'importe lequel des liens qui se trouvent à l'intérieur de la carte eh bien la vignette correspondante disparait, la couleur du texte du lien correspondant et la couleur du fond de la partie correspondante de la carte reviennent à leur couleur par défaut...

    La raison c'est que dans ce cas la fonction handleShowHide(event) n'est pas exécutée alors pour l'instant pour résoudre cela j'ai ajouté cette ligne de code : $("path~text").on("mouseenter mouseleave", handleShowHide); ...

    Pour tenir compte de cela j'ai aussi modifiè* le code que j'ai ajouté dans le message précédent : https://jsbin.com/navidireno/edit?html,output...

    *J'ai remplacé if (tagName === "path") par if (tagName === "path" || tagName === "text")...

  13. #33
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Salut Beginner,

    Je te remercie. Oui c'est un super code de NoSmoking il est clair et court et surtout de bon conseil comme toujours.

    Mon problème depuis hier je veut déplacer la vignette "photo" je n'arrive pas ni en Html ni Css ?

    Je pense que des qu'il vas passé par la il vas me le dire et sa seras résolu.

    Aller bon WE à tous

    Max

  14. #34
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    @jreaux62 :
    Cela dit, je ne savais pas qu'on pouvais définir l'action ainsi :
    (...)
    (ce n'est pas trop "niveau débutant"...)
    Pour moi l'utilisation de jQuery n'est pas « niveau débutant » et je te concède que pour comprendre à première lecture ce code il faut se rappeler que cela existe sous le nom Accesseurs de propriétés.

    Cela peut s’avérer pratique, comme dans le cas présent et de façon plus générale pour simplifier le codage.
    Exemple :
    soit le HTML suivant
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <p>
      <button id="cde-fct_1">Action #1</button>
      <button id="cde-fct_2">Action #2</button>
      <button id="cde-fct_3">Action #3</button>
    </p>
    et la déclaration des fonctions
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function fct_1() {
      // code de la fonction
    }
    function fct_2() {
      // code de la fonction
    }
    function fct_3() {
      // code de la fonction
    }
    il devient tout à fait trivial d'affecter les actions à chaque bouton comme suit par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    // initialisation des boutons
    var oBtns = document.querySelectorAll("button");
    [].forEach.call(oBtns, function(elem) {
      var cde = elem.id.replace("cde-", "");
      elem.onclick = window[cde] || null;
    });

    @apdf1 :
    Peut tu me dire comment bouger l'image "Vignette" parce-que j'essaye de mettre position: absolute; top et left rien ni fait;
    je te conseillerais plutôt de gérer la position directement dans les éléments SVG, surtout si tu as besoin de compatibilité IE.

    Pour se faire le plus simple est de mettre ton code SVG dans un fichier à part et de regarder ce que cela donne dans ton navigateur et ensuite d'ajuster pour obtenir ce que tu souhaites en jouant par exemple avec l'attribut transform.

    Exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <g>
      <image transform="translate( 100, 50)" xlink:href="http://www2.assemblee-nationale.fr/static/tribun/15/photos/718720.jpg" width="150" height="192" />
      <text transform="translate( 0, 750) scale(1.5)">
        <tspan x="0" y="0">Jean-Paul Auchon,</tspan>
        <tspan x="0" dy="2ex">député ABC de la 1ère circonscription de l'Allier</tspan>
      </text>
    </g>
    le positionnement ici est défini via le transform="translate( 100, 50)".


    @Beginner. :
    Concernant le changement de couleur là je pense qu'il est préférable de le gérer via le CSS comme indiqué au post #25, le changement se faisant automatiquement par l'adjonction d'une class, ici "mouse-enter", et son retrait sur les éléments concernés.

    J'espère ne rien avoir oublié

  15. #35
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Salut NoSmoking

    Je te remercie, effectivement avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    transform="translate( 100, 50)"
    sa définie bien la position à partir du moment que tu sorte pas du cadre sinon l'image n'est plus visible.
    Y a t-il un moyen de sortir du cadre?

    Je te remercie pour tous

    Max

  16. #36
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Citation Envoyé par apdf1 Voir le message
    Salut Beginner,
    ...
    Mon problème depuis hier je veut déplacer la vignette "photo" je n'arrive pas ni en Html ni Css ?
    Ok mais qu'en est-il du problème que tu as évoqué juste avant :
    Citation Envoyé par apdf1 Voir le message
    je ne veut pas que le <li> survolé (:hover) prennent un fond gris je veut que le texte change de couleur au passage de la souris sur la carte
    ? Est-ce que c'est bon ou pas ? Et tu n'as pas répondu à ma question : "De quel texte parles-tu ?"...

    Citation Envoyé par NoSmoking Voir le message
    @Beginner. :
    Concernant le changement de couleur là je pense qu'il est préférable de le gérer via le CSS comme indiqué au post #25, le changement se faisant automatiquement par l'adjonction d'une class, ici "mouse-enter", et son retrait sur les éléments concernés.
    Alors je viens de revoir le post mais si j'a bien compris cela concerne le style CSS appliqué aux <li> lorsqu'ils sont survolés par la souris... Mais les deux cas que j'ai traités sont différents :

    1- Le cas 1 c'est appliquer un style CSS (ici mettre le texte en rouge (#f80a0a)) au <li> non pas quand la souris survol ce <li> mais lorsqu’elle survole la partie de la carte correspondant à ce <li>.
    Pour ce cas comme déjà dit : "alors je ne sais pas si on peut le faire seulement avec du CSS (c'est à réfléchir...) alors pour l'instant je l'ai fait avec un peu de JS que j'ai ajouté à la fonction de NoSmoking... Tu peux tester ici*** : https://jsbin.com/cusuhazido/edit?html,output...".

    On voit bien qu'avec ce code lorsque la souris survole la carte (la carte et non un <li> de la liste) eh bien le texte du <li> correspondant à la partie survolée se met en rouge...

    2- Le cas 2 c'est appliquer un style CSS (ici mettre le texte en rouge (#f80a0a)) non pas au texte du <li> mais au texte qui se trouve dans la partie de la carte survolée par la souris. Et là effectivement on peut le faire en changeant le CSS mais ce n'est pas le CSS évoqué par jreaux62 que tu reprends dans ton post #25 mais il me semble que c'est celui que j'ai mentionné à savoir :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    path.mouse-enter~text {
          fill: #00F;
    }

    Si on veut changer cette couleur par celle que souhaite apdf1 (#f80a0a) il suffit de remplacer le CSS ci-dessus par :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    path.mouse-enter~text {
          fill: #f80a0a;
    }

    En tous c'est ce que j'ai compris des posts de apdf1 qui précise bien "...je veut que le texte change de couleur au passage de la souris sur la carte"... Mais par contre je ne suis pas sûr de comprendre de quel texte il parle d'où ma demande de précision et le fait que j'ai traité les deux cas ci-dessus.

    PS : Sinon as-tu remarqué le "problème" que je mentionne au message #32 ?

  17. #37
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Salut Beginner.

    Pour les problèmes que j'ai évoqué au dessus tous ou presque sont régler. Reste que je cherche à mettre l'image en dehors du cadre?

  18. #38
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Tu as fait comment pour le régler ? Je ne sais toujours pas de quel texte tu parlais ni si j'ai bien compris ta demande :

    Citation Envoyé par apdf1 Voir le message
    je ne veut pas que le <li> survolé (:hover) prennent un fond gris je veut que le texte change de couleur au passage de la souris sur la carte
    Mystère...

  19. #39
    Membre du Club
    Inscrit en
    Septembre 2008
    Messages
    629
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 629
    Points : 47
    Points
    47
    Par défaut
    Re,

    J'ai fait comme ma indiqué NoSmoking
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
       #liste li.mouse-enter a,
       #liste li:hover a{
        /* tu mets ici ce que tu veux */
       color: #f21515;
       background: #a39d9d;
    }
    @+

  20. #40
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Ah ok donc rien à voir avec ce que tu demandais car là cela concerne le style CSS appliqué aux <li> lorsqu'ils sont survolés par la souris alors que toi tu demandais "...je veut que le texte change de couleur au passage de la souris sur la carte"...

    Ce n'est pas pareil...
    Ce n'est pas grave cela m'a fait un exercice...

    Il reste à savoir si vous avez remarqué le "problème" que je mentionne au message #32 ?

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 3 PremièrePremière 123 DernièreDernière

Discussions similaires

  1. [XL-2007] Modifier mon code
    Par capi81 dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 04/08/2014, 11h20
  2. [MySQL] aider moi a modifier mon code
    Par tapoza dans le forum PHP & Base de données
    Réponses: 7
    Dernier message: 11/06/2011, 18h59
  3. [Tableaux] comment doit-je modifier mon code
    Par teen6517 dans le forum Langage
    Réponses: 10
    Dernier message: 27/02/2007, 14h22
  4. Qui modifie mon code PL?
    Par flonardi dans le forum Oracle
    Réponses: 3
    Dernier message: 31/05/2006, 11h44
  5. CSS comment puis-je modifier mon code pr avoir un bord blanc
    Par pierrot10 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 30/09/2005, 21h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo