Défilement horizontal d'images

[Fred1208]

Détails techniques

Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.forseps.org

Description du problème

Bonjour,

J'aimerais faire défiler horizontalement 3 ou 4 images. Je me suis inspiré du site

http://www.william-voirol.ch/Prog/ImagesDefilantes/Ligne/horizontal.html

Il y a un lien 'Zip' qui permet de visualiser un fichier Zip dans lequel sont stockées les images.

J'ai modifié le code source de la page pour l'adapter à mon site et créer une page HTML que j'appelle via la page d'accueil. J'ai par exemple supprimé tout ce qui concerne le nom des images, dont je n'ai pas besoin, je veux faire défiler des images de voeux.

Jusqu'ici tout va bien, puisqu'on peut visualiser sur le forum sur la page d'accueil à droite des petits carrés qui représentent les images.

Ce qui m'échappe complètement, c'est la façon d'afficher mes propres images.
Dois-je aussi créer un Zip ?
Comment l'intégrer ensuite dans mon forum ?
Comment ensuite m'en servir, commande ?
Alternative, utiliser des adresses d'images déja stockées, mais comment faire ?

Merci de votre aide.

[Invité]

Hello Fred1208,

le code html et le script aurait été un plus.
Bref, tu as pour la première ligne quelque chose comme ceci:

Code:


<img id="im0" onclick="Clk(0)" title=" " style="position: absolute; left: -160px; top: 0px; cursor: pointer;" src="Img/ .jpg">


Il faut remplacer à la fin le "Img/ .jpg" par le lien d'une image hébergée comme par exemple le lien de ton avatar ici:
https://2img.net/u/2913/10/00/00/avatars/105319-6.jpg

Se servir de l'hébergeur du forum:
https://forum.forumactif.com/t124456-fonctionnement-de-servimg#1362868



La ligne deviendra alors:

Code:

<img id="im0" onclick="Clk(0)" title=" " style="position: absolute; left: -160px; top: 0px; cursor: pointer;" src="https://2img.net/u/2913/10/00/00/avatars/105319-6.jpg"/>

a++

[Fred1208]

Script page accueil :

Code:

<iframe allowtransparency="true" style="position: relative !important; z-index: 1; top: 0px !important; right !important: 0px; background-color: transparent ! important; height: 250px;  width: 550px; border: none !important; overflow: hidden ! important;" src="https://www.forseps.org/h17-defilement" frameborder="no" scrolling="no"></iframe>

HTML :

Voir source de : https://www.forseps.org/h17-defilement

On voit que les images proviennent d'un zip.
Dans votre réponse, comment faire si x images, pour que chaque image prenne la place d'un 'carré'
défilant ?

Merci.

Code:

[Invité]

Hello Fred1208,

tout est expliqué ici:
https://forum.forumactif.com/t404660-defilement-horizontal-d-images#3374697


a++

[Fred1208]

Bonjour Milouze

Cela ne fonctionne pas, j'ai essayé de placer les nouvelles lignes de code indiquées avec 1 image au début - voir page source HTML https://www.forseps.org/h17-defilement
ou en le plaçant plus bas, en remplacement, là où l'auteur conseille de modifier en indiquant ses propres actions.

Dans les 2 cas, les 'carrés défilants' disparaissent.

[Invité]

Hello Fred1208,

alors tu as supprimé cette partie essentiel au bon fonctionnement du script:

Code:

 
var pag=["Aihole","Badami","Belur","Halebid","Hampi","Haveri","Lakkundi","Pattadakal","Somnathpur"];


Tu retrouves tous ces "textes" pour chacune des images:

Code:

<img id="im0" onclick="Clk(0)" title="Aihole" style="position: absolute; left: -160px; top: 0px; cursor: pointer;" src="Img/Aihole.jpg">
<img id="im1" onclick="Clk(1)" title="Badami" style="position: absolute; left: -160px; top: 0px; cursor: pointer;" src="Img/Badami.jpg">
<img id="im2" onclick="Clk(2)" title="Belur" style="position: absolute; left: -160px; top: 0px; cursor: pointer;" src="Img/Belur.jpg">
<img id="im3" onclick="Clk(3)" title="Halebid" style="position: absolute; left: -56px; top: 0px; cursor: pointer;" src="Img/Halebid.jpg">
<img id="im4" onclick="Clk(4)" title="Hampi" style="position: absolute; left: 110px; top: 0px; cursor: pointer;" src="Img/Hampi.jpg">
<img id="im5" onclick="Clk(5)" title="Haveri" style="position: absolute; left: 276px; top: 0px; cursor: pointer;" src="Img/Haveri.jpg">
<img id="im6" onclick="Clk(6)" title="Lakkundi" style="position: absolute; left: 442px; top: 0px; cursor: pointer;" src="Img/Lakkundi.jpg">
<img id="im7" onclick="Clk(7)" title="Pattadakal" style="position: absolute; left: -160px; top: 0px; cursor: pointer;" src="Img/Pattadakal.jpg">
<img id="im8" onclick="Clk(8)" title="Somnathpur" style="position: absolute; left: -160px; top: 0px; cursor: pointer;" src="Img/Somnathpur.jpg">

Exemple pour la première:

Code:

title="Aihole"

a++

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.