p
u
b
l
i
c
i
t
é
publicité
  1. #1
    Invité de passage
    Inscrit en
    novembre 2010
    Messages
    9
    Détails du profil
    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
    8 972
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 8 972
    Points : 17 935
    Points
    17 935

    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
    Inscrit en
    novembre 2010
    Messages
    9
    Détails du profil
    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
    8 972
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 8 972
    Points : 17 935
    Points
    17 935

    Par défaut

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

    exemple :
    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
    <!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
    Inscrit en
    novembre 2010
    Messages
    9
    Détails du profil
    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
    8 972
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 8 972
    Points : 17 935
    Points
    17 935

    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.

Discussions similaires

  1. Ecrire un texte transparent sur une image.
    Par insane_80 dans le forum VB.NET
    Réponses: 2
    Dernier message: 28/02/2008, 13h10
  2. texte positionné sur une image, en bas
    Par poupouille dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/02/2008, 21h03
  3. Texte défilant sur une image
    Par Invité dans le forum Flash
    Réponses: 1
    Dernier message: 13/06/2007, 11h05
  4. Réponses: 3
    Dernier message: 14/04/2007, 21h30
  5. Ajouter un cadre noir sur une image
    Par Vinzius dans le forum Images
    Réponses: 4
    Dernier message: 30/05/2006, 00h35

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