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

[Caidonessy]

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 !) :

https://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

[Invité]

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

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

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

[Caidonessy]

Oh la vache !!! ç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" ! j'espère ne pas être trop empotée et réussir à faire quelque chose de ces précieuses formules magiques !

Bonne soirée !

[Caidonessy]

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 !