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

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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.

  • #2
    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?

    Commentaire


    • #3
      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.

      Commentaire


      • #4
        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.

        Commentaire


        • #5
          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 ?

          Commentaire


          • #6
            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

            Commentaire


            • #7
              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 :

              Commentaire


              • #8
                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....

                Commentaire


                • #9
                  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.
                  RocketTheme offers cutting-edge templates and themes based on the Gantry 5 framework for Joomla, WordPress, and Grav.

                  Commentaire


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

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

                    Commentaire


                    • #11
                      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 :

                      Pour jouer avec :
                      Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.


                      Mais c'était fun.
                      Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                      Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                      Commentaire


                      • #12
                        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.

                        Code:
                        /*----------------------------------------------------------------------
                        	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
                        Code:
                        div.k2ItemsBlock ul li a.moduleItemTitle {}
                        qui gère l'affiche du titre et le
                        Code:
                        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

                        Commentaire


                        • #13
                          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 :

                          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...

                          Commentaire


                          • #14
                            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....

                            Commentaire


                            • #15
                              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...

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X