Discussion :

[patpierre]

Bonjour,

J'ai un code pour afficher une image au survol d'un texte avec la souris :

Code :

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
<style type="text/css">
a.viewpic {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none;
}
a:hover.viewpic {
  text-decoration: none;
  background: none;
}
a.viewpic span {display: none;}
 
a:hover.viewpic span {
  display: inline;
  position: absolute; 
  top: -20px;
  left: 10px;
  z-index: 20;
  width:100%;
  padding:2px 4px;
}
</style>
 
<a class="viewpic" href="#" style="text-decoration:none;">Deux options sont possibles : laisser libre l'ouverture des narines, ou bien y insérer deux grosses pailles.<span><img src="event_alginate.jpg" alt=""/></span></a>

Voir ce que cela donne sur mon site :

Je rencontre 2 problèmes que je n'arrive pas à corriger :
1/ le texte est surligné en pointillé...
2/ Lorsque je clique sur le texte (ce que risque de faire les visiteurs...) j'ai un renvoi en haut de page, alors que je souhaiterais qu'elle reste en place.

Merci d'avance pour votre aide
PATPIERRE

[Jacques Beauregard]

Bonjour,

pour les pointillés, ce code CSS les génère :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border-bottom:1px dashed #808080;

Donc si tu n'en veux pas : enlève ce bout de code.
Ensuite tu as mis une ancre sur le lien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

href="#"

. Donc au clique tu es redirigé sur ce lien qui est en haut de page

[patpierre]

Ok, un grand merci

J'ai corrigé mon code et j'en ai profité pour recentrer au mieux l'image au survol. Voici le code corrigé pour ceux que ça intéresse :

Code :

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
a.viewpic {
  position:relative;
  border-bottom:1px #808080;
  text-decoration: none;
}
a:hover.viewpic {
  text-decoration: none;
  background: none;
}
a.viewpic span {display: none;}
 
a:hover.viewpic span {
  display: block;
  position: absolute; 
  left: auto;
  right: auto;
  z-index: 20;
  width:100%;
  padding:2px 4px;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a class="viewpic" ><font face="garamond" color="black"> Deux options sont possibles : laisser libre l'ouverture des narines,
 ou bien y insérer deux grosses pailles.<span><img src="event_alginate.jpg" alt=""/></span></a>

Tout est parfait, affaire résolue... Encore merci
PATPIERRE

[NoSmoking]

Bonjour,

Tout est parfait

euh!!!! quand même

• <a class="viewpic" > une balise <a> sans href cela se remplace

• <font face="garamond" color="black"> balise obsolète et de plus non fermée, continu dans le sens de mettre cela dans la partie style.

• a:hover.viewpic même si cela peux fonctionner je te conseille d'écrire cela a.viewpic:hover plus lisible d'un coup d'oeil.

[patpierre]

OK Nosmoking
Merci pour tes conseils, voici le code corrigé (plus que parfait ?...) :

Code :

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
<style type="text/css">
a.viewpic {
  position:relative;
  border-bottom:1px #808080;  
  text-decoration: none;
  font: 16px garamond;
  color:#3E1F00;
}
a.viewpic:hover {
  text-decoration: none;
  background: none;
}
a.viewpic span {display: none;}
 
a.viewpic:hover span {
  display: block;
  position: absolute; 
  left: auto;
  right: auto;
  z-index: 20;
  width:100%;
  padding:2px 4px;
}
</style>
 
<a class="viewpic">Deux options sont possibles : laisser libre l ouverture des narines, ou bien y insérer deux grosses pailles.<span><img src="event_alginate.jpg" alt=""/></span></a>

Voilà voilà
Sinon pour te citer "<a class="viewpic" > une balise <a> sans href cela se remplace" Tu veux dire quoi par là ?... Et si je peux encore améliorer mon code cela m'intéresse...

Merci pour ta réponse
PATPIERRE

[NoSmoking]

J'aurais fait un truc dans le style

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<span class="viewpic">
  Deux options sont possibles : laisser libre l'ouverture des narines, ou bien y insérer deux grosses pailles.
  <span class="vignette">
    <img src="event_alginate.jpg" alt="">
  </span>
</span>

avec le CSS minimum suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.viewpic {
  position:relative;
  font: 16px garamond;
  color:#3E1F00;
  cursor:pointer;
}
.vignette {
  position:absolute;
  display:none;
}
.viewpic:hover .vignette {
  display:block;
}

ensuite à toi de voir où tu veux positionner ta vignette par rapport au texte survolé.

Il peut être aussi intéressant que le visiteur puisse avoir un visuel sur ce qui peut amener un changement dans la page, le pourquoi du soulignement des liens par exemple.