[Problème] Mettre l'image d'un article en hover sur le titre

[isatis]

Bonjour,

Après des jours et des jours de prise de tête je viens enfin chercher de l'aide sur le forum.

Que je vous explique, je fais actuellement un site sous joomla 1.7 avec K2.
Pour ce dernier j'ai un menu déroulant vertical qui affiche la liste de tous les articles d'une catégorie donnée. Jusque là je n'ai aucun problème, mais je souhaiterai qu'au passage de la souris sur le titre d'un article, l'image de "couverture" définie avec K2 s'affiche en hover.

Malheureusement je ne sais pas du tout comment m'y prendre, si ça se gère en css ou js ou bien même dans le php.

Si quelqu'un ici avait la moindre idée pour me faire avancer ça serait génial.

J'espère que le problème est assez bien détaillé.

Bonne journée.
Merci par avance.

[lefabdu51]

Re : Mettre l'image d'un article en hover sur le titre

tu as regarde sur leJED si tu n avais pas une exension qui te convenais?

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

Oui j'ai regarde même encore en ce moment.
Il y a tellement de trucs que je ne sais même pas spécialement où chercher.

[lefabdu51]

Re : Mettre l'image d'un article en hover sur le titre

si c est un menu tu peut toujours associer les classes a:hover avec les images de ce dossier /media/k2/items/cache. C est la ou K2 stockes les images que tu met via l'onglet images de l'editeur.

Si tu as besoin du nom reel, alors il faut savoir que c est un codage md5.

Ne vides pas ce dossier cache, sinon tu supprimes toutes les images associées à tes éléments K2

apres tout depend de la structure de ton menu pour typer chaque élément.

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

Oui c'est un menu qui comprend 2 catégories avec chacune 2 sous-catégories:

Categ1
-sous-categ1
-sous-categ2
Categ2
-sous-categ1
-sous-categ2

Du coup il faudrait que je lie le :hover du titre au dossier cache ?
Mais est-ce que dans ce cas le :hover va trouver de lui même la bonne image ou ne faut-il pas passer par quelque chose comme elementid ?

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

Ca ne semble malheureusement pas fonctionner en mettant le lien du dossier cache sur la classe :hover de mon titre dans le K2.css

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

Après encore un après-midi de recherche je suis définitivement bloqué.

En fait le résultat recherché est celui-ci :

http://www.gallarddidierarchitecte.fr/spip.php?page=accueil&lang=fr

[lefabdu51]

Re : Mettre l'image d'un article en hover sur le titre

ok je vais voir ca et chercher de mon coté. Ca peut m etre utile aussi....

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

Merci c'est cool.
Je continue à chercher de mon côté, j'ai vu que quelqu'un cherchait la même chose sur le forum de RocketTheme, malheureusement c'est dans la partie club, et j'avoue que payer 50$ pour accéder à un post pour lequel il n'y a peut-être pas de réponse ça me refroidit pas mal.

http://www.rockettheme.com/forum/index.php?f=175&t=141232&rb_v=viewtopic

[lefabdu51]

Re : Mettre l'image d'un article en hover sur le titre

je continues mes recherches j ai pas oublié.....

[ghazal]

Re : Mettre l'image d'un article en hover sur le titre

Salut,
je ne sais pas si cela servira à grand chose car je pense que l'implémentation de ce code dans K2 n'est pas évidente, mais voici une solution pure CSS pour cette demande.
Les CSS sont de Soh Tanaka (qui s'est fait piquer son nom de domaine, ie, j'ai collé l'exemple dans jsfiddle)
Pour voir :

http://jsfiddle.net/ghazal/SyqJC/show/

Pour jouer avec :

http://jsfiddle.net/ghazal/SyqJC/

Mais c'était fun.

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

Merci beaucoup pour cette aide. En effet c'est pas super évident à intégrer, surtout que ce n'est pas la partie que je maitrise le plus.

Si ça peut aider, voilà le bout de code CSS du module_K2_content que je cherche à modifier.

/*----------------------------------------------------------------------
	Modules: mod_k2_content
----------------------------------------------------------------------*/

div.k2ItemsBlock {}

div.k2ItemsBlock p.modulePretext {}

div.k2ItemsBlock ul {}
div.k2ItemsBlock ul li {}
div.k2ItemsBlock ul li a {}
div.k2ItemsBlock ul li a:hover {}
div.k2ItemsBlock ul li.lastItem {}

div.k2ItemsBlock ul li a.moduleItemTitle {}
div.k2ItemsBlock ul li a.moduleItemTitle {}

div.k2ItemsBlock ul li div.moduleItemAuthor {}
div.k2ItemsBlock ul li div.moduleItemAuthor a {}
div.k2ItemsBlock ul li div.moduleItemAuthor a:hover {}

div.k2ItemsBlock ul li a.moduleItemAuthorAvatar img {}

div.k2ItemsBlock ul li div.moduleItemIntrotext {display:block;padding:4px 0;line-height:120%;}
div.k2ItemsBlock ul li div.moduleItemIntrotext a.moduleItemImage img {float:right;margin:2px 0 4px 4px;padding:0;border:2px solid #ddd;}

div.k2ItemsBlock ul li div.moduleItemExtraFields {}
	div.moduleItemExtraFields ul {}
	div.moduleItemExtraFields ul li {}
	div.moduleItemExtraFields ul li span.moduleItemExtraFieldsLabel {display:block;float:left;font-weight:bold;margin:0 4px 0 0;width:30%;}
	div.moduleItemExtraFields ul li span.moduleItemExtraFieldsValue {}

div.k2ItemsBlock ul li div.moduleItemVideo {}
div.k2ItemsBlock ul li div.moduleItemVideo span.moduleItemVideoCaption {}
div.k2ItemsBlock ul li div.moduleItemVideo span.moduleItemVideoCredits {}

div.k2ItemsBlock ul li span.moduleItemDateCreated {}

div.k2ItemsBlock ul li a.moduleItemCategory {}

div.k2ItemsBlock ul li div.moduleItemTags {}
div.k2ItemsBlock ul li div.moduleItemTags b {}
div.k2ItemsBlock ul li div.moduleItemTags a {padding:0 2px;}
div.k2ItemsBlock ul li div.moduleItemTags a:hover {}

div.k2ItemsBlock ul li div.moduleAttachments {}

div.k2ItemsBlock ul li a.moduleItemComments {border-right:1px solid #ccc;padding:0 4px 0 0;margin:0 8px 0 0;}
div.k2ItemsBlock ul li a.moduleItemComments:hover {}
div.k2ItemsBlock ul li span.moduleItemHits {border-right:1px solid #ccc;padding:0 4px 0 0;margin:0 8px 0 0;}
div.k2ItemsBlock ul li a.moduleItemReadMore {}
div.k2ItemsBlock ul li a.moduleItemReadMore:hover {}

div.k2ItemsBlock a.moduleCustomLink {}
div.k2ItemsBlock a.moduleCustomLink:hover {}

Dites-moi si je me trompe mais à mon avis c'est bien le

div.k2ItemsBlock ul li a.moduleItemTitle {}

qui gère l'affiche du titre et le

a.moduleItemImage img {float:right;margin:2px 0 4px 4px;padding:0;border:2px solid #ddd;}

qui gère l'affichage de l'image liée à l'article. Maintenant, là ou je bloque, qu ça soit par CSS ou PHP, c'est comment faire s'afficher en hover l'image par rapport au titre.

Merci

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

De mon côté ça avance pas mal puisque qu'avec l'aide d'un ami, j'y suis presque arrivé grâce à ce bout de code :

div.modulehover
			.even{				/**.even est la classe appliquée par le module à chaque élément de liste du dernier niveau**/
				height: 20px;
			}
			
			.even > div{		/**on masque le ou les div directement enfant(s) de l'élément sur lequel .even est appliquée**/
				display: none;
			}
			
			.even > a{			/**on fixe la position Z du lien (titre de l'article)*//
				position: relative;
				z-index: 0;
			}
			
			div.k2ItemsBlock ul li div.moduleItemIntrotext {display:none;padding:4px 0;line-height:120%;}

			
			.even a:hover{		
				color: #313131;
			}
			.even > a:hover + .moduleItemIntrotext{	/** lorsque le lien est survolé, le div sur lequel **/
				display: inline-block;				/** .moduleItemIntrotext est appliquée (bloc suivant la **/
				position: relative;					/** balise <a> dans le code) est affiché par dessus les **/
				width: 60px;						/** titres des articles, à la suite **/
				height: 40px;
				background-color: rgb(200,50,50);
				z-index: 1;
			}

Malheureusement, il subsiste un bug puisque le hover ne s'effectue que sur un titre sur deux.
Là aucune idée du problème ; une nouvelle fois...

[lefabdu51]

Re : Mettre l'image d'un article en hover sur le titre

even = impaire odd = paire, tu doit copier ton code avec la classe odd....

[isatis]

Re : Mettre l'image d'un article en hover sur le titre

Merci,

Je l'ai bêtement vu quelques minutes après. On cherche parfois tellement loin alors que c'est sous nos yeux...