Image et texte au passage de la souris sur photo. [Résolu/Fermé]

Signaler
Messages postés
28
Date d'inscription
mardi 9 avril 2013
Statut
Membre
Dernière intervention
19 juillet 2017
-
Messages postés
28
Date d'inscription
mardi 9 avril 2013
Statut
Membre
Dernière intervention
19 juillet 2017
-
Bonjour,

je désire modifier un code qui pour le moment permet d'ouvrir une petite fenêtre au passage de la souris sur un lien. Ce que j'aimerais, c'est savoir ce qu'il faut que je modifie pour que cela s'effectue non pas au dessus d'un lien mais au dessus d'une image.

Je vous colle le lien en vous remerciant par avance pour l'aide que vous pourrez m'apporter.



<STYLE type="text/css">
<!--
body{
margin:0px;
padding:0px;

}

h1 {
font-family:arial, verdana, sans-serif;
font-size:16px;
font-weight:bold;
color:#C0A745;
}

a.bulle {
position:relative;
color:#C0A745;
text-decoration:none;
font-family:arial, verdana, sans-serif;

font-size:11px;
}

a.bulle:hover {
background: none;
z-index: 50;
}

a.bulle span {
display: none;
}

a.bulle:hover span {
display: block;
position: absolute;
top: -10px;
left: 40px;
font-family:arial, verdana, sans-serif;
text-align:justify;
font-size:12px;
font-weight:normal;
width:400px;
background: white;
padding: 5px;
border: 1px solid #C0A745;
border-left: 50px solid #C0A745;
}

-->
</STYLE>





<br><br><br><br><br>

 <a href="#" class="bulle">passage souris <--- pour le moment, la petite fenêtre s'ouvre lorsque je passe la souris sur cette phrase "passage souris"

<span>
<img src="allagelena.jpg" align="right" style="margin-left:15px;">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit laoreet mollis, dolor. Suspendisse porta. amet, consectetuer adipiscing elit. Etiam consequat.
Nulla mattis faucibus nisi. Morbi pede nunc, laoreet non, rhoncus quis,
laoreet mollis, dolor. Suspendisse porta.
</span>

</a>




<text-align:center;>

4 réponses

Messages postés
1769
Date d'inscription
jeudi 20 décembre 2007
Statut
Membre
Dernière intervention
19 novembre 2016
238
Bonjour,

Laisse juste tes .bulle et applique cette classe sur ta balise img.
Messages postés
28
Date d'inscription
mardi 9 avril 2013
Statut
Membre
Dernière intervention
19 juillet 2017

Merci beaucoup, mais je n'ai pas très bien compris la manoeuvre. Pourrais-tu m'écrire la ligne à modifier s'il te plait?

Merci
Messages postés
1769
Date d'inscription
jeudi 20 décembre 2007
Statut
Membre
Dernière intervention
19 novembre 2016
238
Tu déclares une classe bulle donc ce n'est pas a.bulle surtout si tu veux l'appliquer sur différent élément.
ensuite il y a juste à faire
<img class="bulle" src="*"></img>
edit: donc .bulle

Merci de mettre "Résolu" quand le problème est réglé!
La connaissance c'est comme la confiture: moins on en a et plus on l'étale.
Messages postés
28
Date d'inscription
mardi 9 avril 2013
Statut
Membre
Dernière intervention
19 juillet 2017

Un grand merci à toi, ça marche parfaitement :-)