J'ai 7 menus d'image de vignette. Lorsque l'utilisateur pointe (mouseover) à une vignette particulière, je veux changer l'image de fond de <div> à l'image concernant de cette vignette.comment changer l'image d'arrière-plan de div dans la souris?
images miniatures sont dans une diff div
Vous pouvez utiliser quelque chose comme jQuery:
$(function(){
$('div.someclass').hover(function(){
$(this).addClass('hover_class');
}, function(){
$(this).addClass('mouseout_class');
}
);
});
Si vous avez spécifié le hover_class et mouseout_class dans votre feuille de style avec des images correspondantes, par exemple
<style type="text/css">
.hover_class {
background-image: url(url 1);
}
.mouseout_class{
background-image: url(url 2);
}
</style>
Quel est le problème avec css pur?
div.thumbnail:hover {
background-image: url(image/in/question);
}
changer simplement le div.thumbnail pour refléter votre div et la classe ou le nom id (en cas d'id remplacer . avec #)
Cela ne fonctionnera pas dans IE6. – Sarfraz
Assurez-vous d'utiliser un Sprite CSS pour éviter un scintillement dans le survol causé par le chargement de l'image. Voici un bon point de départ: http://stackoverflow.com/questions/2932566/how-do-css-sprites-work –
@Sarfraz - Ce n'est peut-être pas un problème, ce n'est pour aucun de mes projets en cours, * j'espère que c'est le cas partout bientôt. –
do
$('#thumbnailimg').hover(function(){
$('#changeme').css('background-image', $(this).children('img').attr('src'));
}, function(){
$('#changeme').css('background-image', '');
});
mais 'url 1' est pas fixe, comme je l'ai dit j'ai 7 vignettes alors comment je peux afficher sept images diff? – nectar