Je souhaite afficher une image agrandie (au survol de la souris) au-dessus de certaines images pour indiquer «cliquez ici pour agrandir». Je ne veux pas utiliser un curseur.Afficher l'image au-dessus d'une autre image au survol
Je suis sûr qu'il y a un bon moyen de le faire avec javascript jQuery mais je ne le sais pas.
Quelqu'un a-t-il de bonnes idées?
HTML:
<a href='big.jpg'>
<img src='mini.jpg' alt='a kitten'>
<span>Click to view larger</span>
</a>
CSS:
a > img + span {display: none}
a:hover > img + span {display: inline}
puis le style comme bon vous semble.
This jQuery plugin semble faire ce que vous voulez, et vous pouvez facilement le personnaliser pour l'adapter à vos besoins (c'est-à-dire cliquer sur l'outil).
+1 pour jQuery :) –
Un homme Kiwi du Tron. Salutations :) – Marko
Cela fonctionnerait, sauf que j'ai besoin de la possibilité pour l'utilisateur de cliquer pour ouvrir une version plus grande de l'image. Ce script utilise une balise pour afficher le petit mag. image de verre. Est-ce que je manque quelque chose? – talkingD0G
Voulez-vous utiliser une icône de zoom au lieu du curseur du pointeur? Mozilla prend en charge un zoom-curseur (http://www.worldtimzone.com/mozilla/testcase/css3cursors.html) mais vous devrez faire face au problème sur IE. Peut-être que vous pouvez avoir un div caché avec votre zoom icône personnalisée comme: <div style="display:none" id="zoomcursor">yourcursor</div> alors vous pouvez jouer avec les images et jquery:
$('img.zoomthis').mouseover(function(){
var pos = $(this).position();
$('#zoomcursor').css("position","absolute");
$('#zoomcursor').css("top",pos.top+18);//You have to change this in order to place it right over your image
$('#zoomcursor').css("left",$(obj).width()-30); //this too
$('#zoomcursor').show();
}).mouseout(function(){
$('#zoomcursor').hide();
})
Fonctionne parfaitement! – talkingD0G
Une mise en garde mineure: IE5 n'est pas pris en charge. –