Bannière défilante avec photos des membres sur la page d'accueil

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Bannière défilante avec photos des membres sur la page d'accueil

Message par Caidonessy le Jeu 4 Oct 2012 - 15:06

Bonjour à tous,

Je suis nouvelle sur le forum et j'espère poster dans la bonne rubrique !

Malgré mes recherches, je n'ai pas trouvé de réponse à ma question, sauf ce tuto qui ne correspond pas exactement à ce que je veux faire (à moins que je l'ai mal compris !) :

http://forum.forumactif.com/t301577-creer-une-banniere-aleatoire-ou-defilante-pour-son-forum

Voici donc ma question :

J'ai créé un forum consacré aux chiens et j'aimerai mettre en page d'accueil (dans la partie "généralité"), une bannière défilante avec les photos des toutous des membres.

Voici un exemple de ce que j'aimerai faire :

http://compagniepretexteandco.com/

Quelqu'un peut-il m'expliquer comment procéder s'il vous plait ? Ce serait très gentil de votre part !

Merci d'avance et bonne fin de journée à tous Laughing



Dernière édition par Caidonessy le Ven 5 Oct 2012 - 15:20, édité 1 fois

Caidonessy
Nouveau membre

Féminin
Messages : 27
Inscrit(e) le : 04/10/2012

http://mon-chien-mon-amour.lebonforum.com
Caidonessy a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bannière défilante avec photos des membres sur la page d'accueil

Message par Milouze14 le Jeu 4 Oct 2012 - 17:52

Salut Caidonessy,
je vais tâcher de t'expliquer le plus simplement possible Wink .

Dans :
Affichage/Page d'acceuil/Généralités/Message sur la page d'accueil

Colle ceci:
Code:
<marquee onmouseover="this.stop();" onmouseout="this.start();"><div class="M14_pa"><a href="LIEN du site de l image 1"><img src="http://i33.servimg.com/u/f33/16/03/32/63/tuxpi_10.jpg"width="100" height="72"title="Texte au survol de l image 1"></a> <a href="LIEN du site de l image 2"><img src="http://i33.servimg.com/u/f33/16/03/32/63/tuxpi_10.jpg"width="100" height="72"title="Texte au survol de l image 2"></a>  <a href="LIEN du site de l image 3"><img src="http://i33.servimg.com/u/f33/16/03/32/63/tuxpi_10.jpg"width="100" height="72"title="Texte au survol de l image 3"></a>  <a href="LIEN du site de l image 4"><img src="http://i33.servimg.com/u/f33/16/03/32/63/tuxpi_10.jpg"width="100" height="72"title="Texte au survol de l image 4"></a></div></marquee>

Code:
<div class="M14_pa">
On va donner une class sur le menu ou seront positionnées les images Wink .
Le code pour une image

Code:

<a href="LIEN du site de l image 1"><img src="http://i33.servimg.com/u/f33/16/03/32/63/tuxpi_10.jpg"width="100" height="72"title="Texte au survol de l image 1"></a>

Explications sur la première image (tu en as quatre si besoin):

La première partie correspond au lien qui va te mener à un endroit précis
Code:
<a href="LIEN du site de l image 1">

La partie de l'image (la plus importante ):

Code:

<img src="http://i33.servimg.com/u/f33/16/03/32/63/tuxpi_10.jpg"width="100" height="72"title="Texte au survol de l image 1">
Le lien de ton image 150px par 108px pour l'exemple (je me suis permi de prendre la photo présente et de la redimensionner pour le tuto Wink
Code:
http://i33.servimg.com/u/f33/16/03/32/63/tuxpi_10.jpg
On redimensionne l'image sur sa largeur puis sa hauteur afin d'avoir un effet grossissant au survol Wink .
j'ai ôté le tiers de sa taille originale
150 px = 100px
108 px = 72px
Code:
width="100" height="72"

Code:
title="Texte au survol de l image 1"
On donne un titre au survol de l'image .

Voilà pour le code html.

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Colle ceci:
Code:

/*Hauteur du menu*/
.M14_pa { height:108px;background:#ta couleur;}
/*Position des images dans le menu*/
.M14_pa img{padding-top:30px;padding-left:10px;cursor:pointer;}
/*Effet au survol des images avec reprise des tailles originales*/
.M14_pa img:hover{padding-top:0;width:150px; height:104px;}
Pour la couleur du background choisis celle que tu veux ici:
http://www.code-couleur.com/

Pensez bien à valider les modifications en cliquant sur le bouton "Valider".

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4561
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière défilante avec photos des membres sur la page d'accueil

Message par Caidonessy le Jeu 4 Oct 2012 - 19:51

Oh la vache !!! Shocked Shocked Shocked ça m'a l'air un brin compliqué pour la novice que je suis !!!

Bon... je vais relire tout ça et essayer demain à tête reposée !

Merci pour tes explications Milouze et surtout MERCI d'avoir pris le temps de me répondre "le plus simplement possible" ! Wink j'espère ne pas être trop empotée et réussir à faire quelque chose de ces précieuses formules magiques ! Laughing

Bonne soirée ! Very Happy

Caidonessy
Nouveau membre

Féminin
Messages : 27
Inscrit(e) le : 04/10/2012

http://mon-chien-mon-amour.lebonforum.com
Caidonessy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bannière défilante avec photos des membres sur la page d'accueil

Message par Caidonessy le Ven 5 Oct 2012 - 15:22

Fantastique ! Ton tuto fonctionne à merveille ! Les photos défilent désormais en page d'accueil et mes membres sont ravis !

Mille merci pour ton aide Milouze14 ! Je suis très contente ! Laughing Laughing Laughing

Caidonessy
Nouveau membre

Féminin
Messages : 27
Inscrit(e) le : 04/10/2012

http://mon-chien-mon-amour.lebonforum.com
Caidonessy a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum