18041 sujets

Questions générales et questions de débutants

Relier un bouton pour afficher des photos aléatoirement

Bonjour et d'avance merci de votre aide.
J'ai beau chercher , je ne trouve pas.( en même temps je suis un novice)
Je souhaite sur ma page HTML faire en sorte que lorsque je clique sur le bouton "click me" m'affiche aléatoirement une des 118 photo qui se trouve dans le bouton slide. Photos numéroté de 1 a 118.
J'espère que vous m'avez compris.

Mon code: 

             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="shortcut icon" href="favicon.ico" />
  <title>Mimes Bruno</title>
  <SCRIPT LANGUAGE="JavaScript">

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

var rotate_delay = 1000;
current = 0;
function next()

 {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
   
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
   
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}

function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}

function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}

function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}

function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
   
}
//  End -->

</script>
  </head>  
    <body>
    <center>

<button onclick="document.getElementById('demo').innerHTML = getRndInteger(1,118)">Click Me</button>

<p id="demo"></p>

     <center>  
  <form name=slideform>

<FONT size="8pt"><div style="text-align:center">

<balise style="background : #C0C0C0 ; display : inline ;">Photos-<i>Mimes</i><b>"Papy Nono"</b></balise></div>
  
<table cellspacing=0 cellpadding=0 bgcolor="#C0C0C0">

<td align=center bgcolor="#C0C0C0" width=300 height=300>

<table border="13" bordercolor="#C0C0C0" bgcolor="#C0C0C0" width="50%" <b>

<div style="text-align:center">

<tr>

<td align=center bgcolor="#C0C0C0">

</td>
</tr>

<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="JPEG/logo.gif" name="show" alt="" />
</td>
</tr>
<tr>

<td align=center bgcolor="#C0C0C0" width=0 height=0>

<select name="slide" onChange="change();">
<option value="JPEG/logo.gif" selected> 0

<option value="JPEG/	accoucher.jpg"	>1
<option value="JPEG/	acheterquelqueschose.jpg"	>2
<option value="JPEG/	acteur.jpg"	>3
<option value="JPEG/	agriculteur.jpg"	>4
<option value="JPEG/	alpiniste.jpg"	>5
<option value="JPEG/	animateur.jpg"	>6
<option value="JPEG/	arraignee.jpg"	>7
<option value="JPEG/	avion.jpg"	>8
<option value="JPEG/	badminton.jpg"	>9
<option value="JPEG/	baleine.jpg"	>10
<option value="JPEG/	ballon.jpg"	>11
<option value="JPEG/	baseball.jpg"	>12
<option value="JPEG/	bateau.jpg"	>13
<option value="JPEG/	billard.jpg"	>14
<option value="JPEG/	bison.jpg"	>15
<option value="JPEG/	boucher.jpg"	>16
<option value="JPEG/	boulanger.jpg"	>17
<option value="JPEG/	bowling.jpg"	>18
<option value="JPEG/	boxe.jpg"	>19
<option value="JPEG/	bronzer.jpg"	>20
<option value="JPEG/	brosseadents.jpg"	>21
<option value="JPEG/	cameraman.jpg"	>22
<option value="JPEG/	camion.jpg"	>23
<option value="JPEG/	camionpompiers.jpg"	>24
<option value="JPEG/	canape.jpg"	>25
<option value="JPEG/	canard.jpg"	>26
<option value="JPEG/	carrossier.jpg"	>27
<option value="JPEG/	cascadeur.jpg"	>28
<option value="JPEG/	castor.jpg"	>29
<option value="JPEG/	ceinture.jpg"	>30
<option value="JPEG/	cerf.jpg"	>31
<option value="JPEG/	chaise.jpg"	>32
<option value="JPEG/	changerunbebe.jpg"	>33
<option value="JPEG/	chanteur.jpg"	>34
<option value="JPEG/	chat.jpg"	>35
<option value="JPEG/	chauffeur.jpg"	>36
<option value="JPEG/	chaussette.jpg"	>37
<option value="JPEG/	chefdorchestre.jpg"	>38
<option value="JPEG/	cheval.jpg"	>39
<option value="JPEG/	chevre.jpg"	>40
<option value="JPEG/	chien.jpg"	>41
<option value="JPEG/	clouer.jpg"	>42
<option value="JPEG/	coiffeur.jpg"	>43
<option value="JPEG/	compter.jpg"	>44
<option value="JPEG/	course.jpg"	>45
<option value="JPEG/	couturier.jpg"	>46
<option value="JPEG/	crabe.jpg"	>47
<option value="JPEG/	cueillirdescerises.jpg"	>48
<option value="JPEG/	cuisinier.jpg"	>49
<option value="JPEG/	cyclisme.jpg"	>50
<option value="JPEG/	danserunslow.jpg"	>51
<option value="JPEG/	deltaplane.jpg"	>52
<option value="JPEG/	docteur.jpg"	>53
<option value="JPEG/	dormir.jpg"	>54
<option value="JPEG/	draguer.jpg"	>55
<option value="JPEG/	elephant.jpg"	>56
<option value="JPEG/	embrasser.jpg"	>57
<option value="JPEG/	eplucherdespatates.jpg"	>58
<option value="JPEG/	espionner.jpg"	>59
<option value="JPEG/	etendredulinge.jpg"	>60
<option value="JPEG/	etremalade.jpg"	>61
<option value="JPEG/	fairelavaisselle.jpg"	>62
<option value="JPEG/	fleuriste.jpg"	>63
<option value="JPEG/	flipper.jpg"	>64
<option value="JPEG/	fourmi.jpg"	>65
<option value="JPEG/	girafe.jpg"	>66
<option value="JPEG/	golf.jpg"	>67
<option value="JPEG/	grenouille.jpg"	>68
<option value="JPEG/	heron.jpg"	>69
<option value="JPEG/	hyene.jpg"	>70
<option value="JPEG/	infirmiere.jpg"	>71
<option value="JPEG/	jongleur.jpg"	>72
<option value="JPEG/	kangourou.jpg"	>73
<option value="JPEG/	kayak.jpg"	>74
<option value="JPEG/	koala.jpg"	>75
<option value="JPEG/	lapin.jpg"	>76
<option value="JPEG/	limace.jpg"	>77
<option value="JPEG/	macon.jpg"	>78
<option value="JPEG/	mangerdesspaghettis.jpg"	>79
<option value="JPEG/	menuisier.jpg"	>80
<option value="JPEG/	monteedecorde.jpg"	>81
<option value="JPEG/	nager.jpg"	>82
<option value="JPEG/	orthophoniste.jpg"	>83
<option value="JPEG/	otarie.jpg"	>84
<option value="JPEG/	ouvriruneboite.jpg"	>85
<option value="JPEG/	petanque.jpg"	>86
<option value="JPEG/	photographe.jpg"	>87
<option value="JPEG/	pingouin.jpg"	>88
<option value="JPEG/	pingpong.jpg"	>89
<option value="JPEG/	pleurer.jpg"	>90
<option value="JPEG/	plombier.jpg"	>91
<option value="JPEG/	poissonnier.jpg"	>92
<option value="JPEG/	poule.jpg"	>93
<option value="JPEG/	queue.jpg"	>94
<option value="JPEG/	regarderlatele.jpg"	>95
<option value="JPEG/	repasser.jpg"	>96
<option value="JPEG/	rhinoceros.jpg"	>97
<option value="JPEG/	sedeshabiller.jpg"	>98
<option value="JPEG/	semaquiller.jpg"	>99
<option value="JPEG/	serpent.jpg"	>100
<option value="JPEG/	sifler.jpg"	>101
<option value="JPEG/	signer.jpg"	>102
<option value="JPEG/	singe.jpg"	>103
<option value="JPEG/	soldat.jpg"	>104
<option value="JPEG/	telephone.jpg"	>105
<option value="JPEG/	tiralarc.jpg"	>106
<option value="JPEG/	tomberdanslespommes.jpg"	>107
<option value="JPEG/	tondrelapelouse.jpg"	>108
<option value="JPEG/	tortue.jpg"	>109
<option value="JPEG/	tricoteuse.jpg"	>110
<option value="JPEG/	valise.jpg"	>111
<option value="JPEG/	versdeterre.jpg"	>112
<option value="JPEG/	veterinaire.jpg"	>113
<option value="JPEG/	webmaster.jpg"	>114
<option value="JPEG/	yannicknoah.jpg"	>115
<option value="JPEG/	yoyo.jpg"	>116
<option value="JPEG/	zebre.jpg"	>117
<option value="JPEG/	zorro.jpg"	>118

</td>
</tr>
    </center>
  </body>
</html>
</html>
Salut,

avant de passé au javascript il faudrait corriger le html , la tout ton code html est mal formé Smiley ohwell

Il faut fermer les options, les centers les div, pour la table il manque carrément le chevron fermant Smiley ohwell
Mathieuu a écrit :
Salut,

avant de passé au javascript il faudrait corriger le html , la tout ton code html est mal formé Smiley ohwell

Il faut fermer les options, les centers les div, pour la table il manque carrément le chevron fermant Smiley ohwell


Merci Mathieuu.
Si je demande de l'aide c'est pour toutes ces anomalie, sinon je ne poserai pas la question. Merci quand même Mathieuu.
Modérateur
bonjour,

@mathieuu : +1

@BruChri: Avant de passer à la vitesse supérieure (dynamiser un code HTML par le js ou un langage serveur tel que le Python/Ruby/php/etc.), le code HTML doit être propre est valide. Sinon, attends-toi à des bugs. Je veux dire par là que tant que tu n'as pas acquis des bases solides en HTML/CSS, comment veux-tu passer à l'étape suivante ?

ps : aide sur le forum
Modifié par niuxe (16 Feb 2023 - 20:27)
niuxe a écrit :
bonjour,

@mathieuu : +1

@BruChri: Avant de passer à la vitesse supérieure (dynamiser un code HTML par le js ou un langage serveur tel que le Python/Ruby/php/etc.), le code HTML doit être propre est valide. Sinon, attends-toi à des bugs. Je veux dire par là que tant que tu n'as pas acquis des bases solides en HTML/CSS, comment veux-tu passer à l'étape suivante ?

ps : aide sur le forum


Bonjour niuxe,
Pour faire ce j'ai à faire avec ce code il fonctionne bien, le click-me fonctionne (pour l'aléatoire), le slide fonctionne bien , sauf que je n'arrive pas à faire en sorte que le click-me fasse apparaitre les photos (par rapport à leurs numéros) . Enfin merci quand même niuxe.
Modifié par BruChri (17 Feb 2023 - 08:10)
Salut,

bon bah si tu t'en fou d'avoir un code tout crado, je bataille pas plus pour essayer de t'aider à t’améliorer ..

Cela devrait être ça le code que tu veux : 
<button onclick="document.images.show.src = document.slideform.slide[getRndInteger(1,118)].value;">Click Me</button>
Concernant ton HTML, c'est mal formé comme tout le monde le dit :

Utilise des guillemets doubles pour les attributs d'éléments HTML, conformément aux spécifications HTML5.

Déplace le code JavaScript dans un fichier séparé et inclue-le à l'aide d'un élément script. Cela facilitera la maintenance du code et améliorera les performances en permettant une mise en cache plus efficace.

Utilise des point-virgules pour terminer chaque instruction en JavaScript. Bien que cela ne soit pas absolument nécessaire, cela aide à éviter les erreurs de syntaxe.

Évite d'utiliser des attributs d'élément obsolètes comme bgcolor et bordercolor. Utilise plutôt des styles CSS pour définir l'apparence des éléments.

Évite d'utiliser des balises de mise en forme obsolètes comme FONT. Utilise plutôt des styles CSS pour définir la taille et le style de police.

Utilise des sélecteurs CSS plutôt que des attributs align, width, height et bgcolor sur les éléments HTML. Cela séparera la présentation du contenu et facilitera la maintenance.

Évite d'utiliser des tables pour la mise en page. Utilise plutôt des éléments div et des styles CSS pour la mise en page.

Utilise une fonction anonyme pour l'appel à setTimeout. Cela permettra d'éviter la création d'une fonction globale inutile.
Prévenir un modérateur
Répondre au sujet
Aller à