agrandir image sous catégories au survol souris

[bris]

Bonjour,

 

Je suis nouveau sur ce site et je remercie d'avance la communauté pour la création de ce forum d'entre aide.

Je ne connais pas grand chose a la création d'un site et je me débrouille comme je peux depuis que je me suis mis sur prestashop.

 

je suis aujourd hui face a un problème.

 

mes sous catégories affiche la miniature "médium", jusque la pas de problème, mais je voudrais au passage de la souris sur les différentes images, afficher l'image "large" soit faire un agrandissement.

 

par pur déduction, je pense qu'il faut renseigner dans le category.tpl quand le subcategories appel l'image médium a la ligne 68 (prestashop 1.4)

 

<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}"

 

comment créer l'effet d'agrandissement image en appelant l'image large au survol de la miniature?

 

merci d'avance

 

bris

[edwett]

Bonjour,

 

Avec les css peut-être, mieux du css3 du genre:

 

img {

height:100px;

-moz-transition:1s ease-in-out 0.2s;

}

img:hover {

height:200px

}

 

Pas de transition dans IE mais on aura les deux états de l'image.

[bris]

merci

 

j ai essayer dans le catégorie css.

j ai juste rentré

 

img:hover {

height:200px

}

 

le principe fonctionne mais l image est déformé et surtout, mon logo aussi est soumis a l'effet d'agrandissement

comment appeler la miniature large image au lieu de height 200px, uniquement pour les images de catégories?

[Thierryh]

sur la ligne suivante

 

<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}"

 

remplacez 'medium' par 'large', et conservez les 2 $mediumSize. L'image affichée aura donc la taille medium, mais lors du survol de la souris, l'image agrandie ne devrait pas être déformée (mais à condition que sur le hover, vous ayez width et height tous les 2 à la bonne valeur).

 

Thierry

[edwett]

Bonjour,

 

Dans category.tpl changez la taille medium par large (il y a 3 occurences ligne 76)

 

dans le css :

 

#subcategories img {
height: 80px;
-moz-transition: 1s ease-in-out 0.2s;
}
#subcategories img:hover {
height:300px;
width:300px;
}

 

Il faudra aussi jouer avec les margin et z-index

[Thierryh]

superbe bel exemple sur http://www.alsacreations.com/xmedia/tuto/exemples/transitions/images1.htm

[edwett]

Ou ici

[bris]

Bonjour et merci a tous,

 

j'ai pu me débrouiller avec vos messages,

 

merci encore

 

bris

[bvannu]

Bonjour,

 

Dans category.tpl changez la taille medium par large (il y a 3 occurences ligne 76)

 

dans le css :

 

#subcategories img {
height: 80px;
-moz-transition: 1s ease-in-out 0.2s;
}
#subcategories img:hover {
height:300px;
width:300px;
}

 

Il faudra aussi jouer avec les margin et z-index

Bonjour,

j'ai vu que vous touchiez pas mal en css. J'ai le même soucis que celui cité plus haut.

Je voudrais afficher mes img de sous catégories en large plutot que medium.

Vous parlez de toucher au css. (je suis novice) de quel fichier parlez vous svp.

Merci de votre réponse.

Br