Comment ajouter un texte actif sur une image ?

**JEANAEJ** · 22/11/2012, 11h32

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 !

**NoSmoking** · 23/11/2012, 14h55

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.

**JEANAEJ** · 26/11/2012, 18h08

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 !

**NoSmoking** · 26/11/2012, 22h41

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

.

**JEANAEJ** · 27/11/2012, 17h18

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

**NoSmoking** · 01/12/2012, 18h24

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.

Comment ajouter un texte actif sur une image ?

Dreamweaver

Discussions similaires

Partager

Partager