Effet "hover" sur les images des catégories

[pzmeyer]

Bonsoir à tous,

 

je ne sais pas si cela a déjà été demandé (je n'ai rien trouvé de tel...) mais je pose la question :

comment, et est-ce possible, de créer un effet "hover" sur les images des catégories ?

 

Je m'explique : j'utilise le module "Ultimate Home Categories" permettant d'afficher les catégories avec les sous-catégories sur la homepage. Les images des catégories sont cliquables, mais je voudrais ajouter un effet sur les images lorsqu'on passe la souris dessus (l'image change).

 

Je ne pense pas que ce soit au niveau du CSS qu'il faut intervenir (pas dans un premier temps), mais d'abord ajouter du code dans un fichier .php ou .tpl... mais lequel et quoi mettre ?... Je n'y suis pas encore arrivé.

 

Si quelqu'un a une idée ou a déjà tenté ce genre d'expérience ? Ça m'aiderait bien !

[pzmeyer]

Petit up...

 

Personne a une idée ?

 

Moi, je rame en tout cas.

[Jacques Biais]

L'effet le plus simple à réaliser serait à priori l'effet "opacity" en donnant aux images une légére transparence et au passage de la souris, l'image retrouve un affichage normal.

Cela se fait avec le css (du module) en rajoutant la propriété :hover .

Je ne peux t'apporter plus de précisions ne sachant pas comment est construit le css de ce module.

 

Par contre, pour faire un changement d'image, c'est une autre affaire!

[pzmeyer]

Oui, j'y ai bien pensé.

Mettre l'opacité à 60% par exemple sur les images des catégories en CSS et lorsqu'on fait un mouvehover l'opacité est à 100%.

 

Autrement j'ai mis ce scripte dans le fichier .tpl du module pour rendre l'effet d'opacité sur les images progressif, si ça intéresse quelqu'un :

 

<script type="text/javascript">
	$(document).ready(function(){
	$(".img").fadeTo("fast", 0.6); // Cela met l'opacite des images a 60% lorsque la page est chargee
	$(".img").hover(function(){
	 $(this).fadeTo("fast", 1.0); // Cela met l'opacite a 100% sur un hover
	},function(){
	 $(this).fadeTo("fast", 0.6); // Cela remet l'opacite a 60% sur un mouseout
	});
   });
  </script> -->

Mais ce n'est pas exactement ce que je veux faire.

 

Ce qui m'intéresse est de changer d'image, carrément !

 

Et comme tu dis : c'est une autre histoire.

 

Si je réussi, je vous tiens au courant.

[Atch]

Bonjour,

 

L'idéal est de travailler sur une image en background css ce qui vous permet de ne gérer qu'une seule image par catégorie.

 

vous composez votre image en deux parties (exemple image w=200 h=300px) :

 

partie supérieur : sans hover ( w=200 h=150px)

partie inférieur : avec hover ( w=200 h=150px)

 

 

Ensuite dans le css vous mettez un BG au lieu de votre img catégorie par défaut :

 

Dans le css vous aurez un truc du style:

 

a.catégorie {

display:block;

height: 150px

width: 200px

background-position : top left;

background-repeat: no-repeat;

background-color : transparent;

etc...}

 

a.catégorie:hover { background-position: left bottom}

 

 

Dans le tpl

<a url="" style="background-image=url( l'url de l'image)"}>

 

Voilà dans les grandes lignes...

 

V++

 

Atch