Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 6 sur 6
  1. #1
    Invité de passage
    Profil pro Jean Prieur
    Inscrit en
    novembre 2010
    Messages
    9
    Détails du profil
    Informations personnelles :
    Nom : Jean Prieur

    Informations forums :
    Inscription : novembre 2010
    Messages : 9
    Points : 0
    Points
    0

    Par défaut Comment ajouter un texte actif sur une image ?

    Bonjour,

    Je possède Dreamweaver CS6 et je suis débutant en HTML. J'ai créé un objet PA (un calque) constitué d'une image en arrière plan et d'un texte (voir photo jointe).

    J'aimerai que le calque renvoit à un liens hypertexte et que lorsque la souris passe sur le calque le texte change de couleur.

    Merci pour votre aide !
    Images attachées Images attachées

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 496
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 496
    Points : 13 133
    Points
    13 133

    Par défaut

    Bonjour,
    il te faut mettre l'image en background et le lien à l'intérieur de la DIV, ce n'est pas que du HTML c'est également du CSS, mais rien à voir avec !Dreamweaver.

  3. #3
    Invité de passage
    Profil pro Jean Prieur
    Inscrit en
    novembre 2010
    Messages
    9
    Détails du profil
    Informations personnelles :
    Nom : Jean Prieur

    Informations forums :
    Inscription : novembre 2010
    Messages : 9
    Points : 0
    Points
    0

    Par défaut

    Bonjour,

    Est-il possible que tout le calque (avec son image en arrière plan) renvoie à un lien ? Lorsque je selectionne le DIV je n'ai pas d'options de link...

    De plus, comment fait-on pour que l'image change d'opacitée lorsque la sourie passe sur le claque (donc sur le lien) ?

    Merci !

  4. #4
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 496
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 496
    Points : 13 133
    Points
    13 133

    Par défaut

    Tout cela se gère avec un peu de CSS sur base de HTML.

    exemple :
    Code html :
    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
    <!DOCTYPE html>
    <html lang="fr"><head>
    <meta charset="UTF-8">
    <title>Lien HOVER</title>
    <style>
    #mon_lien{
      background:url('http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_cours_Web.gif');
      color:red;
      font-family:verdana;
      font-weight:bold;
      font-size:30px;
      text-decoration:none;
     
      display:block;
      width:270px;
      height:180px;
      margin:50px auto;
     
      line-height:180px;  /* centrage vertical */
      text-align:center;  /* centrage horizontal */
     
      border:1px solid #E0E0E0;
      box-shadow:1px 1px 20px #888;
      opacity:.6;
    }
    #mon_lien:hover{
      color:lightgreen;
      opacity:1;
    }
    </style>
    </head>
    <body>
      <a id="mon_lien" href="http://web.developpez.com/cours/">Developpez</a>
    </body>
    </html>
    Il va te falloir mettre le nez dans le code HTML .

  5. #5
    Invité de passage
    Profil pro Jean Prieur
    Inscrit en
    novembre 2010
    Messages
    9
    Détails du profil
    Informations personnelles :
    Nom : Jean Prieur

    Informations forums :
    Inscription : novembre 2010
    Messages : 9
    Points : 0
    Points
    0

    Par défaut

    Merci c'est exactement ce que je voulais faire !

    J'ai créé plusieurs blocs pour former plusieurs liens. J'ai un petit problème, dans dreamweaver, le mode "LIVE" affiche bel et bien ce que je veux, mais le mode "DESIGN" n'affiche pas les images (comme vous pouvez le voir dans la pièce jointe)

    Avez vous une solution ? Merci
    Images attachées Images attachées

  6. #6
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 496
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 496
    Points : 13 133
    Points
    13 133

    Par défaut

    Je ne connais pas Dreamweaver, mais est ce un problème ou le comportement normal?

    Je dirais que pour tester le résultat rien ne vaut un bon navigateur.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •