Bandeau défilant 2

Pour cette proposition, j'ai fait le tour de ma maison et photographié des feuilles, pour disposer de 12 images.

Elles ont été dimensionnées en 800x600px et seront affichées en 200x150px; ainsi, le montage fera 800px de large, ce qui convient à beaucoup de blog.

Le montage affichera 4 images et en cachera 8 de plus + les 4 premières, en double pour assure la bouclage du montage.

Le survol arrêtera l"animation et un clic sur une vignette l'affichera en 800x600px.

Pour faire un lien sur une image, dans mon cas, pour l'afficher en grand mais ce peut être vers une adresse URL, j'ai survolé mon montage, en création et arrêté sur la première image; j'ai cliqué dessus, pour la sélectionner puis cliqué sur le maillon de chaine pour lui mettre, en lien, sur la même page (n/a), son adresse en 800x600px.

C'est la solution la plus sûre mais vous pouvez, une fois le premier code lien écrit, le recopier pour chacune des images et juste modifier l'adresse en lien ... sans oublier de fermer la balise <a href... par </a>

<div style="width: 800px; height: 150px; margin: 100px auto; border: 1px solid black; overflow: hidden;">
<p id="def"><a href="http://ekladata.com/6UFqmx_aTrtW8bNKHt8589rqjxc/DSCN6468.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/6UFqmx_aTrtW8bNKHt8589rqjxc/DSCN6468.jpg" alt="" /></a><a href="http://ekladata.com/0RRyZ_a7iKkdSA3GVDUgAumx07o/DSCN6469.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/0RRyZ_a7iKkdSA3GVDUgAumx07o/DSCN6469.jpg" alt="" /></a><a href="http://ekladata.com/KHYfqHejadPiCF_8rhP1HEiplqU/DSCN6470.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/KHYfqHejadPiCF_8rhP1HEiplqU/DSCN6470.jpg" alt="" /></a><a href="http://ekladata.com/zfJqrLMJNguMSXJSIlDLhDiV9OE/DSCN6472.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/zfJqrLMJNguMSXJSIlDLhDiV9OE/DSCN6472.jpg" alt="" /></a><a href="http://ekladata.com/Rj_wRze5V5c0yR1wAHtw1IiFv8Q/DSCN6473.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/Rj_wRze5V5c0yR1wAHtw1IiFv8Q/DSCN6473.jpg" alt="" /></a><a href="http://ekladata.com/skM3qyDeyFcyIYIzH2fM5ZmPN5k/DSCN6474.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/skM3qyDeyFcyIYIzH2fM5ZmPN5k/DSCN6474.jpg" alt="" /></a><a href="http://ekladata.com/vwEOauTE9XWzlWCZBzIR_Fb6NtA/DSCN6475.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/vwEOauTE9XWzlWCZBzIR_Fb6NtA/DSCN6475.jpg" alt="" /></a><a href="http://ekladata.com/ksLtR4_DUkg8bwcH3eD64vdW7E8/DSCN6477.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/ksLtR4_DUkg8bwcH3eD64vdW7E8/DSCN6477.jpg" alt="" /></a><a href="http://ekladata.com/HCitWBdmUeO0PiTVKDWKHWYd3-M/DSCN6478.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/HCitWBdmUeO0PiTVKDWKHWYd3-M/DSCN6478.jpg" alt="" /></a><a href="http://ekladata.com/7BjW_hfm6vq5dwhJSbGX7DbW6MA/DSCN6480.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/7BjW_hfm6vq5dwhJSbGX7DbW6MA/DSCN6480.jpg" alt="" /></a><a href="http://ekladata.com/cevTx8pJWw_tMJ5PlnYxwxODNQ8/DSCN6483.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/cevTx8pJWw_tMJ5PlnYxwxODNQ8/DSCN6483.jpg" alt="" /></a><a href="http://ekladata.com/6UFqmx_aTrtW8bNKHt8589rqjxc/DSCN6468.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/FpwKMcE_2QzzIhy_WpYWYGvKVBs/DSCN6484.jpg" alt="" /></a><a href="http://ekladata.com/6UFqmx_aTrtW8bNKHt8589rqjxc/DSCN6468.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/6UFqmx_aTrtW8bNKHt8589rqjxc/DSCN6468.jpg" alt="" /></a><a href="http://ekladata.com/0RRyZ_a7iKkdSA3GVDUgAumx07o/DSCN6469.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/0RRyZ_a7iKkdSA3GVDUgAumx07o/DSCN6469.jpg" alt="" /></a><a href="http://ekladata.com/KHYfqHejadPiCF_8rhP1HEiplqU/DSCN6470.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/KHYfqHejadPiCF_8rhP1HEiplqU/DSCN6470.jpg" alt="" /></a><a href="http://ekladata.com/zfJqrLMJNguMSXJSIlDLhDiV9OE/DSCN6472.jpg"><img style="width: 200px; height: 150px;" src="http://ekladata.com/zfJqrLMJNguMSXJSIlDLhDiV9OE/DSCN6472.jpg" alt="" /></a></p>
</div>

<style type="text/css"><!--
#def{animation:henri 20s linear infinite ; width:3200px; height:150px; animation-play-state: running;}
#def:hover{animation-play-state: paused;}
@keyframes henri{
from {transform:translate(0px,0px);}
to {transform:translate(-2400px,0px);}}
--></style>

Nous affichons 4 images de 200px de large, soit 800px de cadre; nous publions 12 images + 4 de recouvrement soit 16 images de 200px= 3200px; les 8 images cachées + les 4 de boucle font 12x200px=2400px; les liens sont placés sur chaque image. La vitesse est réglable : ici 20 secondes et fonction du nombre et de la taille des images.