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

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