Incrémentation html

Signaler
-
 plocploac -
Bonjour,


J'ai une code assez simple qui me permet d'afficher des miniatures.

</article>
	  
	  <article id="0001" class="location-listing">

      <a class="location-title"  href="javascript: w=window.open('images/A01_A.jpg'); w.print(); w.close();">A01<br><h4>print</br></h4></a>
					
		</a>

      <div class="location-image">
        <a href="images/A01_A.jpg">
		<img width="100%" height="100%" src="images/A01_1.jpg" alt="A01">	
			</a>

      </div>

    </article>



Le problème est que j'ai beaucoup, beaucoup, et même beaucoup d'images à entrer


J'imagine qu'il y a de meilleure solution que d'écrire tout en html mais je suis là à mes limites.

Dès lors pourrais-je insérer un bout de code qui permettrait d'incrémenter mes images ?


genre ;-)

src="images/A01_n+1.jpg

Merci

5 réponses

Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
Bonjour,

Oui.
En Javascript, par exemple, tu pourrais....

Le tout est de savoir si tu veux créer autant de balises img que tu as d'images... ou si tu veux juste, comme tu le dis, incrémenter l'image à afficher lorsque tu cliques sur un bouton...

Il faudrait que tu détailles un peu plus comment tu envisages le fonctionnement de ce futur script...
A partir de là, tu pourras te renseigner sur le langage javascript et l'utilisation des boucles...

Merci Jordan,

En fait, je voudrais surtout pouvoir écrire mon code automatiquement.

Le code présenté ici, que j'ai adopté puis adapté me permet simplement de présenter des miniatures qu'on peut ensuite imprimer.
C'est rudimentaire mais il marche et mes compétences étant limitées, ça va.

Le problème c'est que j'ai beaucoup d'images à présenter et que faire des dizaines de copier/coller avec des changements de nombres risque d'être fastidieux.

Donc je voudrais surtout voir s'il est possible de faire un code qui puisse s'incrémenter automatiquement.
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
Ton but est donc de générer un fichier html avec X section "Article" .... ce bout de "code" devant se répéter X fois et "incrémenter" le N° de l'image ?
Donc, la réponse que je t'ai donné correspond à ton besoin
A partir de là, tu pourras te renseigner sur le langage javascript et l'utilisation des boucles...


par contre....soyons clairs ... ici on veut bien t'aider à réaliser ton code et à le corriger ... mais nous ne le ferons pas à ta place.

Pour les boucles
https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code

Concaténer du texte avec une variable
https://medium.com/@endubueze00/javascript-basics-string-concatenation-with-variables-and-interpolation-deba239debbe

Ajouter du contenu dans le body de ta page
https://thisinterestsme.com/add-html-body-javascript/
Merci.

Si je comprends bien les étapes, je dois

1/ voir comment intégrer du JavaScript dans ma page HTML

2/ déterminer la ou les variables que je souhaite incrémenter (le numéro d'image et sans doute aussi la balise article-?)

3/ intégrer ce code boucle dans mon html
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
yes
Jordane,

Je travaille vraiment pour comprendre mais j'ai quand même besoin d'être guidé parce que je suis plus que débutant et que mon utilisation est très ponctuelle (on ne peut pas tout apprendre).
Voici où j'en suis

1/
Dans mon code HTML
j'intègre un script (je le met à l'exterieur pour moins m'y perdre)
<script src="script.js" defer></script>

2/
J'essaie de faire un script qui permettent simplement d'incrémenter le numéro des images.
Evidemment je m'y perds complètement
Si je donne comme "id" les images avec un numero (let id = "A01_a") et que je cherche autour de
document.getElementById('img').innerHTML = 'id' + a++;

et qu'avant j'ai défini a commençant à 1

let id = A01_+"a";
document.getElementById('p1').innerHTML = 'id ' + a++;

Est-ce que ça fait sens ?

3/ après il faut que je trouve où le placer car j'ai déjà un javascript dans mon html [href="javascript: w=window.open]

Je sais bien qu'il faut s'accrocher mais je me dis que finalement je vais passer autant de temps à trouver ce script qu'à écrire manuellement mon incrémentation ;-)

Merci de me dire si je suis "chaud", "froid" ou carrément "polaire" !
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634
<!Doctype html>
<html>
<head>
  <title>Exemple</title>
  <meta charset="utf-8">
</head>
<body>

<script type="text/JavaScript">


function add(){
  
  
  for(var i=1;i<=10;i++){
  var D = document.createElement("div");
    var HTML="";
        HTML += "<article>";
        HTML += "<div class='Article'> N°" + i +"</div>";
        HTML += "<div class='image'><img src='img_0" + i + ".jpeg' alt='image produit'/></div>";
        HTML += "</article>";
    D.innerHTML = HTML;
   document.body.appendChild(D);
  }
}


//lancement du script add
add();
</script>
</body>
</html>
>
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021

Bonjour Jordane,

C'est vraiment chic de m'aider.

Je crois comprendre la logique

Une variable d'incrémentation "i"
une concaténation 'img_0" + i + ".jpeg'

Depuis ce matin, j'essaie de fusionner ce script "add" avec mon HTML initial (Element.innerHTML)

Mais je ne sais pas où placer les éléments. Si c'est après le script ou dedans...
C'est nul d'être aussi nul... Mais mes besoins sont rares alors mon autoformation complètement trop light...
Messages postés
33123
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juillet 2021
3 634 > plocploac
ça dépend de quels éléments ..... mais comme on ne sait rien de ton code actuel .. impossible de te répondre.
Le code est celui que j'avais posté en #1

Je vais y travailler autant que possible