Comment ajouter un texte actif sur une image ?

Version imprimable

22/11/2012, 11h32
JEANAEJ

1 pièce(s) jointe(s)

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 !
23/11/2012, 14h55
NoSmoking

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.
26/11/2012, 18h08
JEANAEJ

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 !

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

exemple :

Code:

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 ;).

27/11/2012, 17h18
JEANAEJ

1 pièce(s) jointe(s)

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
01/12/2012, 18h24
NoSmoking

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.