Finalisation et correction d'un code image au survol d'un texte

Résolu/Fermé
Signaler
Messages postés
10
Date d'inscription
mercredi 22 janvier 2014
Statut
Membre
Dernière intervention
10 mars 2019
-
Messages postés
10
Date d'inscription
mercredi 22 janvier 2014
Statut
Membre
Dernière intervention
10 mars 2019
-
Bonjour,

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

<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>


Voilà 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

2 réponses

Messages postés
15
Date d'inscription
vendredi 6 novembre 2015
Statut
Membre
Dernière intervention
24 mars 2016
2
Dans ton code css, dans le
a.viewpic
enlève la ligne
border-bottom: 1px dashed #808080
.
Ensuite dans ta balise
 <a <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>
enlève le "#" et ça devrait être bon
0
Messages postés
10
Date d'inscription
mercredi 22 janvier 2014
Statut
Membre
Dernière intervention
10 mars 2019

Super et merci cela fonctionne parfaitement
Patpierre
0