Viewer HTML de panorama d'images
ChaniLaurent
Messages postés
1
Date d'inscription
mercredi 7 août 2019
Statut
Membre
Dernière intervention
7 août 2019
-
7 août 2019 à 10:06
pinballWizard - 14 nov. 2019 à 11:13
pinballWizard - 14 nov. 2019 à 11:13
1 réponse
Salut, HTML seul ne permet pas ça il faudrait du JavaScript et du PHP/SQL pour la base de données.
Un diaporama d'images tout fait n'est pas compliqué à trouver et utiliser(voir par exemple les lightbox).
Les images en grandes tailles et de poids/qualité importantes sont à éviter car parmi les priorités du web pour 2 raisons essentielles:
_afficher un contenu rapidement et toujours à privilégier, une image lourde à plus de chances de mettre du temps à charger (à fortiori plusieurs) et l'internaute à de grandes chances de partir et ne plus revenir sur le site si c'est long. C'est bien logique , ce qui est perdu en qualité d'image est gagné en convivialité ou plutôt accessibilité.
_Les sites web sont en majorité consultés avec des appareils mobiles(comme des 'smartphones'). Ce qui implique de plus petite résolution et une RAM nettement plus faible...des images grandes et lourdes c'est le contraire de 'user friendly' et ne pas optimiser son site pour un chargement rapide et les utilisateurs mobiles déclasse le site dans le positionnement de Google.
Toutefois si vous comptez le faire quand-même 2 considérations à prendre en compte:
_une bande passante élevée pour que côté téléchargement descendant(download) le contenu de la page soit le moins limité de ce côté là.
_un espace de stockage probablement plus important que le forfait de base si vous avez beaucoup d'images de qualité à diffuser.
Ces 2 aspects auront invariablement une répercussion sur le prix/forfait chez votre hébergeur tout en rendant votre site de moins bonne qualité(à cause du chargement important qui ralentira tout affichage).
Sinon c'est relativement basique et simple ce que vous voulez faire et tout CMS aura une extension pour cela, des scripts existent aussi si vous avez les connaissances pour les intégrer.
Vous pouvez tester cet exemple(certes rudimentaire) en copiant le code dans un fichier HTML et en indiquant des fichiers images existants(et avec le bon chemin d'accès/URL à partir du dossier racine ):
Un diaporama d'images tout fait n'est pas compliqué à trouver et utiliser(voir par exemple les lightbox).
Les images en grandes tailles et de poids/qualité importantes sont à éviter car parmi les priorités du web pour 2 raisons essentielles:
_afficher un contenu rapidement et toujours à privilégier, une image lourde à plus de chances de mettre du temps à charger (à fortiori plusieurs) et l'internaute à de grandes chances de partir et ne plus revenir sur le site si c'est long. C'est bien logique , ce qui est perdu en qualité d'image est gagné en convivialité ou plutôt accessibilité.
_Les sites web sont en majorité consultés avec des appareils mobiles(comme des 'smartphones'). Ce qui implique de plus petite résolution et une RAM nettement plus faible...des images grandes et lourdes c'est le contraire de 'user friendly' et ne pas optimiser son site pour un chargement rapide et les utilisateurs mobiles déclasse le site dans le positionnement de Google.
Toutefois si vous comptez le faire quand-même 2 considérations à prendre en compte:
_une bande passante élevée pour que côté téléchargement descendant(download) le contenu de la page soit le moins limité de ce côté là.
_un espace de stockage probablement plus important que le forfait de base si vous avez beaucoup d'images de qualité à diffuser.
Ces 2 aspects auront invariablement une répercussion sur le prix/forfait chez votre hébergeur tout en rendant votre site de moins bonne qualité(à cause du chargement important qui ralentira tout affichage).
Sinon c'est relativement basique et simple ce que vous voulez faire et tout CMS aura une extension pour cela, des scripts existent aussi si vous avez les connaissances pour les intégrer.
Vous pouvez tester cet exemple(certes rudimentaire) en copiant le code dans un fichier HTML et en indiquant des fichiers images existants(et avec le bon chemin d'accès/URL à partir du dossier racine ):
<!DOCTYPE html>
<html>
<img id='diaporama' src='' alt=''>
<a id='suivant' href='#'>suivant</a>
<script>
let listeImages=['image1.png', 'image2.png' ,'image3.png'];
let compteur=-1;
document.getElementById('suivant')addEventListener('click', function(){
compteur++;//-- ajoute un au compteur
if(compteur>listeImages.length-1){
/* remet à zéro(première image) si dernière image de la liste*/
compteur=0;
}
//-- change la "source" de l'image à afficher de la balise image
document.getElementById('diaporama').src=listeImages[compteur];
});
</script>
<html>
