Discussion :

[Drakyll]

Bonjour !

Voilà j'ai créé sur mon forum un script html basique me permettant d'afficher aléatoirement (à chaque réactualisation de la page) l'une des deux bannières que j'y ai installé.

Voici le code.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var banner = new Array();
 
banner.push('http://nsa30.casimages.com/img/2012/06/11/120611083451806236.png');
banner.push('http://nsa30.casimages.com/img/2012/06/11/120611083414717103.png');
 
document.getElementById('i_logo').src= banner[Math.floor(Math.random()*banner.length)];

Cependant, je vais devoir y rajouter d'autres bannières, que je souhaite voir moins souvent. (Notamment l'une qui n'aura environ que 1% de chance d'être affichée par rapport aux autres.) Alors excepté la méthode barbare consistant à rajouter une centaine de fois les bannières principales, est-ce qu'il existerait un code en html pour donner tel pourcentage d'apparition à une image, ou encore dire que si le nombre aléatoire tombe entre tant et tant, alors telle image s'affichera.. ?

J'ai créé un code php qui, je pense, fonctionne. Cependant je ne sais pas où trouver un site externe où l'intégrer, car mon forum n'accepte pas le php. Pour info le voici :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
#
### Le nombre aléatoire est entre 1 et 100 000. Si c'est 1, ce sera l'image 1. Si c'est entre 2 et 50 000, ce sera l'image 2. Sinon, ce sera l'image 3.
#
 
$affimage=rand(1,100000);
if($affimage=1)
echo("<img>http://nsa29.casimages.com/img/2012/06/11/12061110553668841.png</img>");
}else if($affimage>1 && $affimage<50000) {
echo("<img>http://nsa30.casimages.com/img/2012/06/11/120611083414717103.png</img>");
}else{
echo("<img>http://nsa30.casimages.com/img/2012/06/11/120611083451806236.png</img>");}
?>

Je vous avoue que si un code pareil existe bel et bien en HTML, je préférerais.

Je vous remercie d'avance !

Drakylla.

[Meloooo]

Salut,
Impossible de faire ca en HTML...
En javascript c'est possible avec Math.random() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var random = Math.floor(Math.random() * 100000);

et ensuite faire les mêmes conditions que tu as fais en PHP !

[Drakyll]

(Pardon au modérateur qui a du mettre les couleurs dans mes codes, j'avais oublié.)

Merci du temps de réponse !
Donc je laisse de côté le html et j'entame le javascript, malheureusement je m'y connais beaucoup moins dans ce langage.
Dois-je commencer et finir le code par une balise particulière ?
Je ne pose pas plus de questions, pour le reste je vais aller lire quelques tutoriels sur javascript. Merci encore !

[Meloooo]

Oui il te faut les balises script.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
 
$(document).ready(function(){
var random = Math.floor(Math.random() * 100000);
if(random == 1){
        $('.mon-image').html('<img src="images/image1.jpg">');
} else if (random > 1 && random < 50000){
        $('.mon-image').html('<img src="images/image2.jpg">');
} else {
        $('.mon-image').html('<img src="images/image3.jpg">');
}
});
</script>

J'ai utilisé du Jquery, il te faut donc importer la libraire dans ton code, comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<script language="javascript" type="text/javascript" src="jquery.js"></script>

Ca devrait ressembler à quelque chose...

[Drakyll]

Je crois que je me suis un peu perdu dans le code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript" src="jquery.js">
 
$(document).ready(function(){
var random = Math.floor(Math.random() * 100000);
if(random == 1){
	$('.mon-image').html('<img src="http://nsa29.casimages.com/img/2012/06/11/12061110553668841.png">');
} else if (random > 1 && random < 50000){
	$('.mon-image').html('<img src="http://nsa30.casimages.com/img/2012/06/11/120611083414717103.png">');
} else {
	$('.mon-image').html('<img src="http://nsa30.casimages.com/img/2012/06/11/120611083451806236.png">');
}
</script>

Que représente le "document" entre parenthèses ?

Et si je veux rajouter des bannières plus tard, en plus de modifier les nombres actuels j'aurais la possibilité de rajouter plusieurs else sans problème ?

[Meloooo]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
// permet de lancer le code, une fois que ta page a fini de charger entièrement
$(document).ready(function(){
 
// permet d'avoir un chiffre alétoire entre 0 et 100000
var random = Math.floor(Math.random() * 100000);
 
// si ton chiffre aléatoire (random) est = 1
if(random == 1){
	$('.mon-image').html('<img src="images/image1.jpg">');
} 
// si ton chiffre aléatoire est compris entre 2 et 50000
else if (random > 1 && random < 50000){
	$('.mon-image').html('<img src="images/image2.jpg">');
} 
// si ton chiffre aléatoire est supérieur ou égal à 50000
else {
	$('.mon-image').html('<img src="images/image3.jpg">');
}
});

Ensuite pour intégrer ce code dans ta page tu dois faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-1" />
	<title>Ton titre</title>
// lien vers la librairie Jquery qu'il te faudra télécharger auparavant
	<script language="javascript" type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
var random = Math.floor(Math.random() * 100000);
if(random == 1){
        $('.mon-image').html('<img src="images/image1.jpg">');
} else if (random > 1 && random < 50000){
        $('.mon-image').html('<img src="images/image2.jpg">');
} else {
        $('.mon-image').html('<img src="images/image3.jpg">');
}
});
</script>
<body>
 
Mon contenu
 
</body>
</html>

Et si tu veux rajouter d'autre image, tu n'a qu'a améliorer tes if comme il te semble

[FirePrawn]

Bonjour,

Tu devrais aller faire un tour sur ce cours.

[Drakyll]

Merci beaucoup, je pense pouvoir me débrouiller avec ça !

Oui j'avais ce cours en parallèle justement ^^

[Meloooo]

N'hésite pas à revenir, si tu as un souci.
Passe la discussion en résolue

[Federico_muy_bien]

Bonjour,

par contre il y aura moins de 1% de chances d’apparaître...
il faudrait mettre le chiffre aléatoire entre 1 et 100 pour avoir 1%...

Mais bon c'est du détail !!