Comment réaliser une mousse over sur les photo des déclinaisons

[bhsland]

Bonjour à tous

 

je souhaiterais pouvoir faire agrandir au survol de la souris la photo de la déclinaison.

Pas l'image associé à la déclinaison mais juste la photo de la déclinaison.

 

Dans des site internet marchand vous avez besoin des fois de choisir une multitude de choix de couleurs associés a un produit.

Le survol de la déclinaison permet de montrer au internaute la texture, ou tissu, échantillon de couleur en grand.

J ai fait un petit montage photo ci dessous pour mieux comprendre.

 

Merci à tous d'avance

 

 

[Freet]

Bonjour,

 

Avez-vous trouvé la solution pour réaliser cette modification ?

Je suis dans le même cas et serais intéressé par cette fonctionnalité.

 

Ma solution à court terme était d'agrandir les miniatures de ces déclinaisons.

[webpulser]

Bonjour,

Cette fonctionnalité est très facile à réaliser avec Jquery.

Il suffit d'ajouter dans le fichier product.js de votre thème (dans themes/default/js/product.js) à la ligne 509 juste après

 

$(document).ready(function()

{

 

Insérer :

 

//Texture hover on product page

 

//Popup distance

xOffset = 10;

yOffset = 30;

 

 

$("a.color_pick").hover(

function(e){

if($(this).find('img').length){

$("body").append("<p id='preview'><img src='"+ $(this).find('img').attr('src') +"' /></p>");

$("#preview")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px")

.css("position", "absolute")

.css("z-index", '5')

.fadeIn("fast");

}

},

function(){

$("#preview").remove();

});

 

$("a.color_pick").mousemove(function(e){

$("#preview")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px");

});

[Freet]

Bonjour,

 

Je vous remercie pour votre réponse, cela m'a beaucoup aidé

 

Bon weekend !