Module partenaires

**Rajoz** · 12/11/2014, 12h04

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

**Coco-72** · 12/11/2014, 22h50

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

**manu93fr** · 12/11/2014, 23h50

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

**Rajoz** · 13/11/2014, 12h43

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

**Coco-72** · 13/11/2014, 14h44

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 :

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");

**Rajoz** · 13/11/2014, 17h52

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

**Coco-72** · 13/11/2014, 18h37

Re : Module partenaires

Bonsoir,

Ci-dessous le code que j'ai actuellement dans mon module :

Pour les images je les ai télécharger dans "gestion des médias"

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

Merci d'avance.

**Rajoz** · 13/11/2014, 20h42

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

logos.zip (15,8 Ko, 177 affichage(s))

**Coco-72** · 17/11/2014, 13h21

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.

**Rajoz** · 17/11/2014, 17h06

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

**Coco-72** · 18/11/2014, 18h36

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

**Rajoz** · 19/11/2014, 00h04

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 :

Images Crawler : http://extensions.joomla.org/extensi...lideshow/21938
Unite Horizontal Carousel : http://extensions.joomla.org/extensi...lideshow/21938
Horizontal scrolling slideshow : http://extensions.joomla.org/extensi...lideshow/17694
Widgetkit Slideset : https://yootheme.com/widgetkit/examples/slideset

Je crois que cette fois j'ai fait le plein de solutions possibles, je vais aller me coucher

Amicalement,
Rajoz

**Coco-72** · 21/11/2014, 13h58

Re : Module partenaires

Bonjour Rajoz,

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

Merci encore !!

Module partenaires

[RÉGLÉ] Module partenaires

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association