Incrémentation html

Fermé
plocploac - 14 déc. 2020 à 16:18
 plocploac - 16 déc. 2020 à 13:32
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

jordane45 Messages postés 36609 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 décembre 2022 4 419
14 déc. 2020 à 22:37
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...

0
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.
0
jordane45 Messages postés 36609 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 décembre 2022 4 419
15 déc. 2020 à 10:45
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/
0
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
0
jordane45 Messages postés 36609 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 décembre 2022 4 419
15 déc. 2020 à 11:59
yes
0
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" !
0
jordane45 Messages postés 36609 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 décembre 2022 4 419
15 déc. 2020 à 22:20
<!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>
0
plocploac > jordane45 Messages postés 36609 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 décembre 2022
16 déc. 2020 à 11:58
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...
0
jordane45 Messages postés 36609 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 décembre 2022 4 419 > plocploac
16 déc. 2020 à 12:08
ça dépend de quels éléments ..... mais comme on ne sait rien de ton code actuel .. impossible de te répondre.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Le code est celui que j'avais posté en #1

Je vais y travailler autant que possible
0