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

Mise en page CSS Discussion :

Demande pour Rollover à distance en CSS et HTML


Sujet :

CSS

  1. #1
    Membre habitué
    Homme Profil pro
    Consultant SAP
    Inscrit en
    Octobre 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Consultant SAP
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2014
    Messages : 10
    Par défaut Demande pour Rollover à distance en CSS et HTML
    Bonjour, (Je suis ultra Débutant en codage)

    Après être passer par le forum java-script et n'ayant pas trouver de solutions (pas trop compris..), en ayant chercher sur google, j'ai trouvé un morceau de solution mais pas tout à fait ce que je voulais.

    Je voudrais un code pour un rollover à distance en CSS pour faire exactement le système en .gif ci-dessous.

    c'est à dire lorsque je met ma souris sur une ligne de texte, l'image d'en face change en fonction de la ligne ou je me trouve.

    http://www.weebly.com/editor/uploads...?1412239893019

    Pour le moment j'ai trouvé ça, ça fonctionne sur mon site mais c'est pas ce que je veux^^
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <style>
    a.rollover {
    background:url('http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn.jpg?1412238062060') no-repeat;
    width: 432px;
    height: 511px;
    display:block;
    }
    a.rollover:hover {
    background:url('http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asynchrone.gif?1412237738955')no-repeat;
    }
    </style><html>
    <a title="Mécanisme" href="#" class="rollover"></a></html>


    Je vous remercie par avance pour les solutions données.

  2. #2
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Modifier un élément depuis d'un autre, ça ne se fait pas (encore?) en CSS.

    Mais c'est typiquement le rôle du JS

  3. #3
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Bonjour,
    Citation Envoyé par Muchos Voir le message
    Mais c'est typiquement le rôle du JS
    dans le cas présent il ne s'agit pas de modifier un élément mais d'en faire apparaitre un sur le :hover.

    Pour peu que cet élément soit enfant de celui que l'on survol, le CSS est très largement suffisant, si ce n'est pas le cas il suffit de déplacer l'élément.
    Dans l'exemple qui nous est montré cela correspond bien à cela.

    Il suffit de mettre dans une DIV, que l'on place en position:relative afin qu'elle soit référant pour ses enfants, les éléments à afficher qui eux seront en position:absolute.

    Concernant le :hover, il suffit de mettre l'élément à afficher dans celui qui sera survolé. Pas sûr que cela soit clair pour tout le monde

    Un exemple valant plus qu'un long discours, je vous mets un exemple que j'avais déjà fourni sur ce forum (me semble t-il), à peu de chose prêt...cela devrait convenir.
    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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="Author" content="NoSmoking">
    <title>CSS hover</title>
    <style type="text/css">
    html, body {
      font: 1em/1.2 Verdana,Arial,sans-serif;
      height:100%;
      margin:0;
      padding:0;
      background:#DCE3E6;
    }
    #page {
      width:50em;
      height:100%;
      margin:auto;
      background-color:#FFF;
    }
    .header {
      padding:0.5em;
      background:#ABC;
      border:1px solid #FFF;
    }
    .header h1{
      margin:0.25em;
      color:#069;
      text-shadow:1px 1px 0 #fff;
    }
    #section {
      position:relative;
      width:40em;
      margin: 2em auto;
      padding:5px;
    }
    #section a {
      display:inline-block;
      width:10em;
      padding:0.5em;
      text-decoration:none;
      border-left:2px solid transparent;
    }
    #section img {
      position:absolute;
      top:0;
      right:0;
      border:0;
      padding:10px;
    }
    #liste li {
      list-style:none;
    }
    #liste li a:hover {
      background:#F0F0F0;
      border-left:2px solid #2371aa;
    }
    #liste img {
      display:none;
    }
    #liste a:hover img {
      display:block;
    }
    </style>
    </head>
    <body>
    <div id="page">
      <div class="header">
        <h1>:hover sur Developpez...</h1>
      </div>
      <div id="section">
        <img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_livres_web.gif" alt="">
        <ul id="liste">
          <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_livres_css.gif" alt="">Livres CSS</a></li>
          <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif" alt="">Outils CSS</a></li>
          <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_livres_xhtml.gif" alt="">Livres (X)HTML</a></li>
          <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_outils_xhtml.gif" alt="">Outils (X)HTML</a></li>
          <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_livres_js.gif" alt="">Livres JavaScript</a></li>
        </ul>
      </div>
    </div>
    </body>
    </html>

  4. #4
    Membre habitué
    Homme Profil pro
    Consultant SAP
    Inscrit en
    Octobre 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Consultant SAP
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2014
    Messages : 10
    Par défaut
    Merci tout le monde!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Dojo] Souci pour supprimer une regle css avec dojox.html.removeCssRule
    Par arasm dans le forum Bibliothèques & Frameworks
    Réponses: 5
    Dernier message: 16/12/2009, 18h54
  2. [HTML, CSS, JS] Clic sur une cellule d'un tableau pour changer sa class CSS
    Par Nyphel dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/08/2007, 13h18

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