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 :

changement de couleur d'un lien au survol d'une image


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Nouveau candidat au Club
    Profil pro
    Inscrit en
    F�vrier 2006
    Messages
    1
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : F�vrier 2006
    Messages : 1
    Par d�faut changement de couleur d'un lien au survol d'une image
    Bonjour, voil� je vais essay� d'�tre clair.
    j' ai un menu qui permet de naviguer dans le site.
    au survole de ces liens il change de couleur.
    jusqu' � l� tous va bien.
    j'aimerai que lorsque que l'on survole les photos qui se trouve sur la page,(qui permettent elles aussi d'acceder � une page du site) que le lien correspondant du menu change de couleur au survole de cette image.

    voil� une partie du code qui ne marche pas :
    <div id="menu">
    <table border="0" cellpadding="0" cellspacing="0" id="table">
    <tr valign="top">
    <td id="ici"><a href="index.php" >home</a> </td>
    <td id="fashion"><a href="fashion.php">fashion</a></td>
    <td><a href="beauty.php">beauty</a> </td>
    <td><a href="portrait.php">portrait</a> </td>
    <td ><a href="personal.php">personal work</a> </td>
    <td><a href="contact.php">contact</a> </td>
    </tr>
    </table>
    </div>
    <table border=0 cellspacing=15 cellpadding=0 ><tr align=center><td><a href=fashion.php OnMouseOver=document.getElementById(fashion).style=document.getElementById(ici).style><img src=home/1/DSCN0168.jpg></a></td></tr></table>

    pour la feuille de style :

    #menu {
    font-family: Helvetica;
    font-size: 14px;
    position: relative;
    top: 10px;
    }
    td {
    text-align: center;
    margin: 0px;
    padding: 0px 35px;
    }
    #table a:link {
    text-decoration: none;
    color: #333333;
    }
    #table a:visited{
    color: #333333;
    text-decoration: none;
    }
    #table a:hover {
    color: #999999;
    text-decoration: none;
    }
    #ici {
    color: #999999;
    text-decoration: none;
    }
    #ici a:link {
    text-decoration: none;
    color: #999999;
    }
    #ici a:visited{
    color: #999999;
    text-decoration: none;
    }


    cet effet est possible mais je n'ai auccune id�e de la fa�ons de mis prendre.
    je suis partie en essayant avec du javascripte mais je suis ouvert a toutes les solutions
    qui me permtrais de changer la couleur d'un lien du menu au survole d'une photo.

    merci d'avance pour vos r�ponses

  2. #2
    Expert confirm�
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par d�faut
    bonsoir,

    voici quelque chose de simple :
    Code : 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
     
    <html>
    <head>
    <title></title>
     
    <style type="text/css">
    <!--
    #menu {
    font-family: Helvetica;
    font-size: 14px;
    position: relative;
    top: 10px;
    }
    td {
    text-align: center;
    margin: 0px;
    padding: 0px 35px;
    }
    #table a:link {
    text-decoration: none;
    color: #333333;
    }
    #table a:visited{
    color: #333333;
    text-decoration: none;
    }
    #table a:hover{
    color: #999999;
    text-decoration: none;
    }
    img{
    cursor: pointer;
    }
    //-->
    </style>
     
    <script type="text/javascript">
    <!--
    function LienOver(idLien)
    {
     var lien = document.getElementById(idLien);
     lien.style.color = "#999999";
    }
    function LienOut(idLien)
    {
     var lien = document.getElementById(idLien);
     lien.style.color = "";
    }
    //-->
    </script>
     
    </head>
     
    <body>
    <div id="menu">
    <table border="0" cellpadding="0" cellspacing="0" id="table">
    <tr valign="top">
    <td><a id="ici" href="index.php" >home</a> </td>
    <td><a id="fashion" href="fashion.php">fashion</a></td>
    <td><a href="beauty.php">beauty</a> </td>
    <td><a href="portrait.php">portrait</a> </td>
    <td><a href="personal.php">personal work</a> </td>
    <td><a href="contact.php">contact</a> </td>
    </tr>
    </table>
     
    <br><br><br><br>
     
    <img src="image1.jpg" onmouseover="LienOver('ici')" onmouseout="LienOut('ici')">
    <img src="image2.jpg" onmouseover="LienOver('fashion')" onmouseout="LienOut('fashion')">
     
    </body>
     
    </html>
    petite remarque : j'ai d�plac� les id="ici" et id="fashion" des td vers les balises a. La fonction LienOut permet de restaurer les styles par d�faut (d'o� le style.color="").

Discussions similaires

  1. [JavaScript] Image map et changement de couleur de l'area au survol
    Par SpaceFrog dans le forum Contribuez
    R�ponses: 25
    Dernier message: 20/08/2014, 05h23
  2. Changer la couleur d'un texte au survol d'une image
    Par asas-as dans le forum Mise en page CSS
    R�ponses: 11
    Dernier message: 20/07/2014, 10h02
  3. Effet survol d'un lien avec affichage d'une image
    Par apt dans le forum G�n�ral JavaScript
    R�ponses: 7
    Dernier message: 07/05/2011, 15h31
  4. Au survol d'une image, mon texte ne change pas de couleur
    Par L33loo dans le forum Mise en page CSS
    R�ponses: 4
    Dernier message: 08/01/2010, 10h21
  5. [CSS]lien survol� sur une image et d�claration doctype
    Par gwendal84 dans le forum Mise en page CSS
    R�ponses: 3
    Dernier message: 10/02/2006, 16h35

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