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.

23/11/2012, 14h55	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 102 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 102 Points : 8 818 Points : 8 818	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.
	00

26/11/2012, 18h08	#3
JEANAEJ Invité de passage Jean Prieur Inscription : novembre 2010 Messages : 9 Détails du profil Informations personnelles : Nom : Jean Prieur Informations forums : Inscription : novembre 2010 Messages : 9 Points : 0 Points : 0	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 !
	00

01/12/2012, 18h24	#6
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 102 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 102 Points : 8 818 Points : 8 818	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email