Module partenaires

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Module partenaires

    Bonjour, je voudrais savoir si vous connaissez le module des partenaires tous en bas utilisez sur ce site :

    http://www.msb.fr/

    Photo : Cliquez sur l'image pour l'afficher en taille normale

Nom : Partenaires.jpg 
Affichages : 1 
Taille : 10,7 Ko 
ID : 1820824

  • #2
    Re : Module partenaires

    Bonjour Coco-72,

    Il s'agit d'un module de type Contenu personnalisé avec un code html se servant des événements onmouseover et onmouseout pour obtenir une image normale et une autre image quand survolée par la souris.

    Si tu ne connais pas HTML, l'éditeur JCE (bouton Insérer/Modifier une image) permet de faire directement ce type de lien. Voici un exemple de code généré par JCE :
    Code HTML:
    <a href="http://www.monsite.fr/" target="_blank" title="Joomla.fr">
        <img onmouseover="this.src='images/image2.jpg';" onmouseout="this.src='images/image1.jpg';" src="images/image1.jpg" alt="image1" />
    </a>
    La balise a indique le lien.
    La balise img indique son image initiale par src="images/image1.png" avec :
    onmouseover="this.src='images/image2.jpg';" pour l'image quand la souris passe sur l'élément
    onmouseout="this.src='images/image1.jpg';" pour l'image quand la souris quitte l'élément

    Amicalement,
    Rajoz

    Commentaire


    • #3
      Re : Module partenaires

      Bonjour,

      Un grand merci pour t'a réponse, sa fonctionne parfaitement.

      Seul un problème, quand j'actualise mon site les logos ne s'affiche pas directement je suis obliger de passer dessus une fois pour voir le logo sinon ça donne sa :

      Merci d'avance

      Commentaire


      • #4
        Re : Module partenaires

        Bonsoir,
        tu passes par JCE ou tu as copier coller du code HTML dans un module ?

        Je te conseille de passer par l'editeur JCE ... il faut aussi "preparer" tes images avant, même dimension, une N&B et Une couleur
        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
        Cette année, le JoomlaDay FR a lieu à Bruxelles, les 20 et 21 mai 2022, plus d'infos et inscriptions : www.joomladay.fr

        Commentaire


        • #5
          Re : Module partenaires

          Bonjour Coco-72,

          Ton image ne marche pas. Sur ce forum pour mettre une image il faut être en "mode avancé".

          Dans ta réponse, en plus de l'image, ça m'aiderait à t'aider si tu mettais aussi le code source de ton module de type Contenu personnalisé.

          +1 avec manu93fr pour l'utilisation de JCE.

          Comme je l'ai indiqué dans mon précédent post, il y a trois images qui sont utilisées :
          • src : adresse de l'image initiale de la balise img
          • onmouseover : événement permettant ici de changer par une nouvelle image quand l'élément est survolé
          • onmouseout : événement permettant ici de revenir à l'image initiale quand la souris quitte l'élément


          Si l'image ne s'affiche pas initialement alors qu'elle s'affiche quand la souris est passée dessus, c'est qu'il y a probablement un souci dans le code src pour l'image initiale. C'est pour cela que je te demande de copier dans ton post le code source de ton module.

          Amicalement,
          Rajoz

          Commentaire


          • #6
            Re : Module partenaires

            Bonjour,

            J'ai copier/coller le code que Rajoz ma donner : <a href="http://www.monsite.fr/" target="_blank" title="Joomla.fr">
            <img onmouseover="this.src='images/image2.jpg';" onmouseout="this.src='images/image1.jpg';" src="images/image1.jpg" alt="image1" />
            </a>

            Ensuite j'ai inséré par JCE les 2 images une en noir et blanc l'autre en couleur.

            Ci-joint le logo que sa affiche : Cliquez sur l'image pour l'afficher en taille normale

Nom : Joomla partenaires.png 
Affichages : 1 
Taille : 2,0 Ko 
ID : 1803836

            Je ne m'y connais pas trop pour le code source, je pense que c'est ça qu'il te faut :

            orders[49] = new Array("footer","2","2. Partenaires");

            Commentaire


            • #7
              Re : Module partenaires

              Bonjour Coco-72,

              Le code que j'ai donné dans le post précédent n'était qu'un exemple. Il contenait déjà le lien vers le partenaire qu'il fallait adapter (www.monsite.fr) ainsi que les liens vers les deux images (images/image1.jpg et images/images2.jpg).

              Deux questions :
              • Comment as-tu fait le couper/coller de ce code (surtout que tu dis ne pas t'y connaître pour le code source) ?
              • Comment as-tu fait l'insertion des images par JCE (en plus de ce code) ?

              L'image du logo Cliquez sur l'image pour l'afficher en taille normale

Nom : Joomla partenaires.png 
Affichages : 1 
Taille : 2,0 Ko 
ID : 1803836 indique un problème d'adresse de l'image. Il faut que je puisse voir le code source pour pouvoir t'aider.

              Pour afficher le code source avec JCE, il faut cliquer sur le lien [Toggle Editor] qui se trouve à gauche au-dessus de la zone d'édition ou bien cliquer sur le bouton <> Cliquez sur l'image pour l'afficher en taille normale

Nom : icon-sourcecode.png 
Affichages : 1 
Taille : 462 octets 
ID : 1803837 "Editeur de code" dans la barre d'outils de JCE.

              Encore mieux, un lien sur le site me permettra de voir directement le code source.

              Si j'arrive à dégager un peu de temps, j'essayerai de te préparer demain un petit tuto pour faire ton module partenaires.

              Amicalement,
              Rajoz

              Commentaire


              • #8
                Re : Module partenaires

                Bonsoir,

                Ci-dessous le code que j'ai actuellement dans mon module :
                <p><a href="http://www.lemainelibre.fr/" target="_blank" title="Maine Libre">&nbsp;</a><a href="http://www.lemainelibre.fr/" target="_blank" title="Maine Libre"><img src="images/image1.jpg" alt="Maine Libre" /></a>
                </p>
                <p><a href="http://www.ouest-france.fr/" target="_blank" title="Ouest France"> <img onmouseover="this.src='images/ouest france.jpeg';" onmouseout="this.src='images/ouest france.jpg';" src="images/image1.jpg" alt="Ouest France" /> </a>&nbsp;</p>
                Pour les images je les ai télécharger dans "gestion des médias"

                Lien du site : http://mucistes.monespace.net/

                Merci d'avance.

                Commentaire


                • #9
                  Re : Module partenaires

                  Bonsoir,

                  C'est presque bon, mais il y a effectivement un souci avec ton code.

                  Je ne vais garder que la partie du logo "Ouest France" qui marche presque pour t'expliquer les petits points à améliorer.

                  En remettant en forme ton code voici ce que tu as actuellement :
                  Code HTML:
                  <p>
                      <a href="http://www.ouest-france.fr/" target="_blank" title="Ouest France">
                          <img onmouseover="this.src='images/ouest france.jpeg';" onmouseout="this.src='images/ouest france.jpg';" src="images/image1.jpg" alt="Ouest France" />
                      </a>
                      &nbsp;
                  </p>
                  Une première recommandation, tu ne devrais pas mettre d'espace (ni de caractère spéciaux, accentués, etc.) dans tes noms de fichiers. Tu devrais par exemple :
                  • renommer ouest france.jpeg en ouest-france_coul.jpg
                  • renommer ouest france.jpg en ouest-france_nb.jpg

                  A propos des images tu as dans le code :
                  • onmouseover = "images/ouest france.jpeg" : c'est bien l'image couleur qui doit s'afficher quand la souris passe sur le logo
                  • onmouseout = "images/ouest france.jpg" : c'est bien l'image n&b qui doit s'afficher quand la souris quitte le logo
                  • image initiale = "images/image1.jpg" : cette image n'existe pas c'est pour ça que l'image ne peut pas s'afficher, il devrait y avoir l'image en n&b c'est à dire "images/ouest france.jpg"

                  Après avoir renommé les images comme je l'ai indiqué et ajouté les deux images pour "Le Maine Libre", voilà le code complet que tu pourrais mettre en remplacement de celui que tu as :
                  Code HTML:
                  <p>
                      <a href="http://www.lemainelibre.fr/" target="_blank" title="Le Maine Libre">
                          <img onmouseover="this.src='images/le-maine-libre_coul.jpg';" onmouseout="this.src='images/le-maine-libre_nb.jpg';" src="images/le-maine-libre_nb.jpg" alt="Le Maine Libre" />
                      </a>
                      &nbsp;&nbsp;
                      <a href="http://www.ouest-france.fr/" target="_blank" title="Ouest France">
                          <img onmouseover="this.src='images/ouest-france_coul.jpg';" onmouseout="this.src='images/ouest-france_nb.jpg';" src="images/ouest-france_nb.jpg" alt="Ouest France" />
                      </a>
                      &nbsp;&nbsp;
                  </p>
                  Chaque &nbsp; correspond à un espace, il y a donc deux espaces entre chaque logo.
                  Les images que j'ai utilisées pour les logos sont dans le zip attaché à ce post.

                  C'est facile le code, n'est-ce pas ? Je suis sûr que tu pourrais maintenant ajouter toi-même le code d'un troisième logo.
                  Et bien avec JCE c'est encore plus facile, en deux coups de clic

                  Par exemple pour ajouter un logo "Le Maine Libre" en deux étapes :

                  1) Insérer l'image du logo
                  Cliquer sur le bouton "Insérer/Modifier une image" pour ouvrir le popup Gestionnaire d'images
                  Dans l'onglet "Image" sélectionner le fichier le-maine-libre_nb.jpg
                  c'est l'image en noir et blanc
                  l'url sélectionnée est images/le-maine-libre_nb.jpg
                  Dans l'onglet Rollover sélectionner le fichier le-maine-libre_coul.jpg
                  c'est l'image en couleur
                  l'url Mouseover est images/le-maine-libre_coul.jpg
                  l'url Mouseout est images/le-maine-libre_nb.jpg
                  Cliquer sur le bouton "Insérer" en bas pour insérer l'image du logo et revenir à l'éditeur

                  2) Insérer le lien du logo
                  Sélectionner l'image du logo dans la zone d'édition en cliquant dessus une fois
                  Cliquer sur le bouton "Insérer/Modifier un lien" pour ouvrir le popup Gestionnaire de liens
                  URL : saisir l'url du partenaire = http://www.lemainelibre.fr/
                  Cible : sélectionner "Afficher dans une nouvelle fenêtre"
                  Titre : saisir le nom du partenaire = Le Maine Libre
                  Cliquer sur le bouton "Insérer" en bas pour insérer le lien sur le logo et revenir à l'éditeur

                  Et voilà ! Maintenant que tu sais comment doit être le code, tu peux aller vérifier si l'ajout par JCE de ce troisième logo correspond au code auquel tu t'attends.

                  Allez, une dernière recommandation pour la route (pour la nuit) parce que j'aime les choses bien rangées. Tu n'es pas obligé de mettre toutes tes images des logos des partenaires dans le dossier images, tu peux les regrouper par exemple dans un sous-dossier partenaires. Dans ce cas le logo Le Maine Libre en couleur serait donc dans images/partenaires/le-maine-libre_coul.jpg.

                  Amicalement,
                  Rajoz
                  Fichiers joints

                  Commentaire


                  • #10
                    Re : Module partenaires

                    Bonjour,

                    Merci beaucoup ça fonctionne !!

                    Encore un truc à réglé car les images sont longues à charger surement le poids de l'image non ?

                    Merci encore c'est super gentil.

                    Je poste en réglé bientôt.

                    Commentaire


                    • #11
                      Re : Module partenaires

                      Bonjour Coco-72,

                      Le site GTmetrix te donnera beaucoup d'informations sur ce qui impacte les performances de ton site avec des recommandations et sur l'onglet Timeline le détail de temps pour chacune des étapes effectuées lors du chargement (y compris pour les images).

                      Amicalement,
                      Rajoz

                      Commentaire


                      • #12
                        Re : Module partenaires

                        Bonsoir Rajoz,

                        Merci pour le lien c'est top.

                        Le truc c'est que les images arrivent rapidement après un chargement, mais c'est une fois que l'ont passe la souris dessus que sa fais pas nette par moment.. ?

                        Merci d'avance encore

                        Commentaire


                        • #13
                          Re : Module partenaires

                          Bonsoir Coco-72,

                          Le choix et la retouche des deux images (simple et survolée) a énormément d'importance pour que la transition soit plus agréable à l'oeil.

                          Par exemple sur ton site l'image les images actuelles sont trop grandes par rapport à l'affichage :
                          cred.png : fait 483x122 pixels et est affichée en 150x43 pixels
                          hippo.png : fait 408x128 pixels et est affichée en 150x48 pixels
                          Il faut réduire ces images à la taille à laquelle tu vas les afficher, cela fera gagner sur le poids de l'image et sur la qualité de la réduction de la dimension, deux critères qui impactent l'affichage de la transition.

                          A propos de transition, tu peux aussi essayer d'utiliser la transition qui existe maintenant dans CSS3 et qui permet davantage d'effets, par exemple :

                          1) Ajouter à la fin du fichier templates/yoo_revista/css/custom.css le code suivant :
                          Code:
                          img.animated {
                              opacity: 0.4;
                              -webkit-transition: -webkit-transform 1s, opacity 1s;
                              -o-transition-property: -o-transform, opacity;
                              -o-transition-duration: 1s, 1s;
                              -moz-transition-property: -o-transform, opacity;
                              -moz-transition-duration: 1s, 1s;
                              transition-property: transform, opacity;
                              transition-duration: 1s, 1s;
                          }
                          img.animated:hover {
                              opacity: 1;
                              -moz-transform: rotate(360deg);
                              -webkit-transform: rotate(360deg);
                              -o-transform: rotate(360deg);
                              transform: rotate(360deg);
                          }
                          2) Ajouter la classe animated à l'image dans le module :
                          Code HTML:
                          <a href="http://www.ouest-france.fr/" target="_blank" title="Ouest France">
                              <img class="animated" src="images/ouest-france_coul.jpg" alt="Ouest France" />
                          </a>
                          Notes :
                          • Il n'y a cette fois qu'une seule image à laquelle on applique le style de la classe animated : pas besoin de faire deux images et le code html est plus simple.
                          • Avec JCE c'est très facile d'ajouter la classe à l'image : dans le gestionnaire d'images dans l'onglet "Avancé" dans le champ "Ajouter des styles" saisir la classe (animated).
                          • La rotation c'était juste pour rigoler un peu, tu pourrais ne garder que le changement d'opacité.

                          Comme tu as Widgetkit de YOOtheme sur ton site (vu dans le code source) tu peux aussi regarder l'exemple des possibilités d'utilisation de Spotlight sur https://yootheme.com/widgetkit/examples/spotlight

                          Il y a encore une autre méthode pour afficher les partenaires, c'est de faire "scroller" (défiler) les images. En cherchant "scrolling" sur le JED on trouve près de 400 extensions, alors j'en ai sélectionné trois parmi les gratuites, plus Widgetkit que tu as déjà sur ton site. Il y en a beaucoup d'autres (gratuites ou payantes) qui peuvent être "mieux" que ma sélection. Je voulais juste que tu regardes sur les démos ce que ça peut rendre :
                          Je crois que cette fois j'ai fait le plein de solutions possibles, je vais aller me coucher

                          Amicalement,
                          Rajoz

                          Commentaire


                          • #14
                            Re : Module partenaires

                            Bonjour Rajoz,

                            C'est bon problème réglé, j'ai réussi à mettre les partenaires sur mon site.

                            Merci encore !!

                            Commentaire

                            Annonce

                            Réduire
                            Aucune annonce pour le moment.

                            Partenaire de l'association

                            Réduire

                            Hébergeur Web PlanetHoster
                            Travaille ...
                            X