Image produit en hover

[rhombus]

Bonjour à tous,

 

Je chercherais à adapter mes bloc produit pour qu'il y ait une image en hover sur celle des produits.

J'ai essayer opacity en hover sur:

 

#product_list a.product_img_link img:hover {

opacity:0.60;

 

Et cela fonctionne ! Pourtant, impossible de faire de même avec un appel d'url, de background en

:link ou :hover...

 

Si quelqu'un à une astuce ou un code fonctionnel pour cette manipulation, ça ne serait pas de refus.

 

merci d'avance

[Szed]

Hello

 

ce n'est pas que cela ne marche pas, c'est que ton background sera derrière ton image.

Si tu veux remplacer un élément img HTML par un autre, il va te falloir un peu de javascript.

 

L'image en hover serait toujours la même pour chaque produit je suppose ?

[rhombus]

Exactement !

 

Et puis c'est vrai que je la voyais charger pendant le rafraichissement mais après plus de nouvelle...

Y a t-il déjà un script tout près de base que l'on peut trouver quelquepart ? et comment s'insère t-il ?

Autant le css et le html pourquoi pas, mais le script je préfère pas me lancer à corps perdu.

Edited March 19, 2013 by rhombus (see edit history)

[Szed]

Dans l'idée tu peux faire ça simplement.

Il faut déjà que tu prépare en HTML/CSS l'image qui sera positionné au dessus (au passage tu lui spécifie une classe particulière).

Quit a ne plus voir ton image produit.

 

Une fois bien positionné, tu cache l'image qui ne doit apparaître qu'en hover en CSS (a coup de display:none).

 

Ça pourrait ressembler à ça :

 

HTML

<div class="madivimage">
 <img class="monimageproduit" src... />
 <img class="monimagehover"  src.... />
</div>

 

JS

$('.madivimage').hover(function(){
   $(this).find('.monimagehover').show('fast');
});

 

== 'Au survol d'une div ayant la classe madivimage, on cherche dans cette div l'image ayant la classe monimagehover, et on l'affiche (grace a la fonction jquery "show"'.

 

Quand a comment et ou l'insérer, tu as plusieurs possibilité :

• Créer un nouveau fichier JS qui contiendra l'ensemble de tes petites retouches/scripts.

• Dans le header, avant le </head> sous réserve de mettre ca dans un :

$(document).ready(function() {
 // Handler for .ready() called.
});

Je crois que smarty demande d'encadrer le tout entre {literal} {/literal} si tu met ca dans un .tpl, mais la je ne suis pas sur !

 

Dis moi déja si c'est presque clair

Edited March 19, 2013 by Szed (see edit history)

[rhombus]

Merci beaucoup ! C'est effectivement casi presque clair pour moi.

 

Mmmmmh... j'ai essayer en local avec dreamwever (oui oui je sais... c'est le mal) pour voir comment ça marchait...

Et bien je n'y arrive pas !

 

Je ne sais pas où ça coince.

 

Merci beaucoup ! Je n'ai vraiment pas l'habitude du script.

Edited March 19, 2013 by rhombus (see edit history)

[rhombus]

Je ne sais pas si on peut faire suivre des fichier zip dans le forum d'ailleur. Je vais regarder.