[Apprenti] Jimdo - Créer une bannière défilante

Bonjour à tous !

Aujourd'hui nous allons voir comment rajouter une bannière défilante sur Jimdo.
Pour l'exemple nous allons y mettre plusieurs boutons correspondant à des partenaires, mais sachez que cela fonctionne avec du texte également.

Pour faire cela, vous devez bien sûr vous connecter via votre interface d'administration

1. Installation sur Jimdo :

Tout d'abord nous allons créer un nouvel élément, ici, j'ai choisi de le mettre sur la partie latérale, à vous de voir ce que vous désirez faire.


Ensuite nous allons choisir le type d'élément : widget/html


Et pour finir coller le morceau de code qui nous intéresse puis enregistrer


Pour ce qui est du code, nous allons à présent voir ensemble ce que c'est en détail

2. Comprendre le code :

Code:

<marquee scrolldelay="150"><a style="display: inline-block;" href="http://simsartists.com/"><img src="http://simsartists.free.fr/images/logotype/bouton.jpg" alt="Sims Artists" title="Sims Artists" /></a></marquee>

Code:

<marquee scrolldelay="150"></marquee>

C'est cette balise qui créé l'effet de défilement. Le chiffre indiqué "150" correspond à la vitesse de défilement, en mettant un chiffre plus petit vous ralentissez le rythme et en mettant un chiffre plus grand vous l'augmentez.

Code:

<a style="display: inline-block;" href="http://simsartists.com/"></a>

C'est la balise qui fait que l'image va être un lien cliquable.
On rajoute une indication quant au style du lien : ici on lui indique que les liens doivent se placer les un à côté des autres.

Code:

<img src="http://simsartists.free.fr/images/logotype/bouton.jpg" alt="Sims Artists" title="Sims Artists"/>

C'est la balise qui correspond à l'image qui doit apparaitre.

Pour l'exemple j'ai utilisé l'image qui est visible sur le Sims Artists. Je vous rappelle que le Hotlinking nuit au trafic des sites, donc si vous souhaitez afficher une image, pensez à l'enregistrer sur votre ordinateur et ensuite à l'héberger sur votre site ou sur un site d’hébergement d'image.

Pour en savoir plus lisez ceci :Vous avez posté dans ce sujet. Le Hotlinking c'est mal, pourquoi? Comment faire pour montrer une image?  

Dans le tuto de présentation de Jimdo vous trouverez également le moyen d'héberger vos images :
Vous avez posté dans ce sujet. [Debutant] Jimdo - Site clef en main  

3. Modifier le code :

Bien voyons en pratique comment faire pour rajouter un nouveau bouton à votre barre de défilement !
Pour fêter le retour d'Urbania, prenons les en exemple.

Voici ce dont on a besoin :
1. L'adresse URL du site (car l'image sera un lien)
2. L'adresse URL de l'image

Voici ce que donne le code :

Code:

<a style="display: inline-block;" href="http://urbania-sims.com/forum/"><img src="http://i20.servimg.com/u/f20/15/80/51/92/bouton10.jpg" alt="Urbania" title="Urbania le forum"/></a>

Maintenant je vous l'explique :
Dans le href="" de la balise de lien, je mets l'adresse URL du site, ici c'est l'adresse du forum
On a bien mis l'indication de style qui commande que les liens se placent les uns à côté des autres, autrement ils se placeront les uns en dessous des autres

Dans le href="" de la balise d'image, je mets le lien de l'image
Dans le alt="" de la balise image, je mets le texte par défaut de l'image qui s'affichera si un jour l'image n'est plus disponible
Dans le title="" de la balise image, je mets le texte qui s'affichera au survol de la souris

Merci beaucoup Fu c'est vraiment super de nous avoir fait un tuto ^^
Y a plus qu'à maintenant ^^

Merci pour le tuto Fu' !

Merci Fuyaya pour ce tuto très intéressant et fort utile!

merci ^^

Merci pour le tuto!

Juste pour te dire que j'y suis arrivée et en plus grâce à toi, je vais enfin pouvoir classer les bannières les unes à côté des autres!!! Merkiii.

Fu,
merci pour tout !