Comment mettre une dimension fixe sur une image
bonjour a tous
j ai récupéré un morceau de code ,que je souhaiterais juste modifie très légèrement
Lors du survol de la souris sur le lien une image apparait je souhaiterais que cette image sois de dimension de 100*100 par exemple , mais que cela soit effectuer dans le css du code
car j aurais beaucoup d image a traiter
merci de reponses
j ai récupéré un morceau de code ,que je souhaiterais juste modifie très légèrement
Lors du survol de la souris sur le lien une image apparait je souhaiterais que cette image sois de dimension de 100*100 par exemple , mais que cela soit effectuer dans le css du code
car j aurais beaucoup d image a traiter
<head>
<style type="text/css">
.vignette span
{
display: none; /* On masque le span par défaut */
}
a.vignette:hover
{
border: 0; /* Pour que ce soit fonctionnel sous IE */
}
a.vignette:hover span /* On définit où va s'afficher l'image au passage de la souris */
{
display: block;
position: absolute;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<p>
<a href="http://www.lenco.eu/fr/p/xemio-858-6/" class="vignette" title="Image 3"><img src="image1.jpg" alt="ecran1.jpg" /><span><img src="ecran1.jpg" alt="Image 2" /></span></a>
</p>
</body>
</html>
merci de reponses
3 réponses
-
bonjour
en ajoutant :
a.vignette:hover span /* On définit où va s'afficher l'image au passage de la souris */
{
display: block;
position: absolute;
top: 150px;
left: 150px;
width:100px;
height:100px;
}
-
Bonjour
merci pour la reponse
j ai essayer mais cela ne fonctionne pas , j ai toujours une grande image -
de cette facon cela fonctionne mais je desire que cette dimension sois dans un css height="100" width="100"
<head> <style type="text/css"> .vignette span { display: none; /* On masque le span par défaut */ } a.vignette:hover { border: 0; /* Pour que ce soit fonctionnel sous IE */ } a.vignette:hover span /* On définit où va s'afficher l'image au passage de la souris */ { display: block; position: absolute; top: 15px; left: 150px; } </style> </head> <body> <p> <a href="http://www.lenco.eu/fr/p/xemio-858-6/" class="vignette" title="Image 3"><img src="image1.jpg" alt="ecran1.jpg" /><span><img src="ecran1.jpg"height="100" width="100" alt="Image 2" /></span></a> </p> </body> </html>
