Random Image en fond de tableau [Résolu]

Goltar · 09/05/2011, 08h32

Bonjour à tous,
J'utilise la fonction suivante pour Randomiser une image au lancement d'une page. (Une image différente à chaque lancement.

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
<script type="text/javascript" language="JavaScript">
<!--
 
NumberOfImagesToRotate = 5;
 
 
FirstPart = '<img src="Images/Fondentete/fondentete0';
LastPart = '.png" >';
 
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
//-->
</script>

Là ou je veux afficher l'image j'utilise :

Code :

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

1
2
3
4
5
<script type="text/javascript" language="JavaScript">
 
printImage();
 
</script>

Cela fonctionnes très bien, mais je voudrais faire en sorte que cette image soit le fond d'un tableau. Quelqu'un pourrait-il m'aider ?

Goltar · 09/05/2011, 12h36

Rebonjour !
J'ai modifié le code comme ceci

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
<script type="text/javascript" language="JavaScript">
<!--
 
NumberOfImagesToRotate = 5;
 
 
FirstPart = '"Images/Fondentete/fondentete0';
LastPart = '.png"';
 
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
 
document.getElementById('Entete1').style.backgroundImage=(FirstPart + r + LastPart); }
//-->
 
</script>

Avec dans le body onload l'appel à la fonction

Code :

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

<body onload="PrintImage();">

et l'affichage du tableau

Code :

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

1
2
3
4
5
6
7
8
9
10
<table align="center" id="Entete1"  >
  <tr align="center">
    <td height="175px" >
</td>
  </tr>
  <tr align="center">
    <td height="25px">&nbsp;</td>
  </tr>
 
</table>

apparemment je me gourre quelque part, mais je suis bloqué !

SpaceFrog · 09/05/2011, 13h37

backgroundImage necessite une URL

Code :

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

objt.style.backgroundImage="url('"+ variable +"')";

Goltar · 09/05/2011, 13h43

soit

Code :

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

document.getElementById('Entete1').style.backgroundImage=url(FirstPart + r + LastPart); }

?
Mais cela ne fonctionnes toujours pas

SpaceFrog · 09/05/2011, 13h45

un string !

Goltar · 09/05/2011, 13h58

Code :

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

document.getElementById('Entete1').object.style.backgroundImage="url('"+FirstPart + r + LastPart+"')";

ceci est-il correct ?

SpaceFrog · 09/05/2011, 14h03

syntaxiquement oui
après faut voir ce que donne ta concaténation de variables et si ça pointe sur un fichier image existant avec le bon path

Goltar · 09/05/2011, 14h08

Le chemin est correct après avoir enlevé le double quote de mon FirstPart et de mon Lastpart.
Mais il s'obstine à ne pas afficher !

SpaceFrog · 09/05/2011, 14h11

Aucun souci chez moi avec ce code:

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
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
function foo(){
document.getElementById('tablo').style.backgroundImage="url('img/logo.gif')"
}
</script>
 
</head>
 
<body>
<input type="button" onclick="foo()" value="go" />
<table border="1" width="100%" id="tablo">
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
</table>
 
</body>
 
</html>

Goltar · 09/05/2011, 14h23

Mon script me semble pourtant correct, le chemin aussi et les images existent.

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
<script type="text/javascript" language="JavaScript">
<!--
 
NumberOfImagesToRotate = 5;
 
 
FirstPart = 'Images/Fondentete/fondentete0';
LastPart = '.png';
 
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
 
document.getElementById('Entete1').style.backgroundImage="url('"+ FirstPart + r + LastPart +"')"; }
//-->
 
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
 <table align="center" id="Entete1" width="700px" height="175px" >
  <tr align="center">
    <td height="150px" >
</td>
  </tr>
  <tr align="center">
    <td height="25px">&nbsp;</td>
  </tr>
 
</table>

et onload

Code :

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

<body onload="PrintImage();">

Goltar · 09/05/2011, 14h32

OK, j'ai trouvé
Probleme de casse

Dans mon onload j'appelais PrintImage() au lieu de printImage()

Merci pour ton aide
Problème résolu

SpaceFrog · 09/05/2011, 14h34

Toujours pareil, aucin souci avec ce code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript">
NOITR=5;
FirstPart="_";
LastPart=".png";
 
function foo(){
var r = Math.ceil(Math.random() * NOITR);
document.getElementById('tablo').style.backgroundImage="url('img/"+ FirstPart + r + LastPart +"')"
 
}
</script>
 
</head>
 
<body>
<input type="button" onclick="foo()" value="go" />
<table border="1" width="100%" id="tablo">
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
  <tr>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
  </tr>
</table>
 
</body>
 
</html>

Tu dois donc avoir un souci de path ...

[edit]
Bingo !
souci de cass=> path incorrect :yeah:
[/edit]

09/05/2011, 13h37	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 009 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 009 Points : 45 094 Points : 45 094	backgroundImage necessite une URL Code : Sélectionner tout - Visualiser dans une fenêtre à part objt.style.backgroundImage="url('"+ variable +"')"; __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

09/05/2011, 13h43	#4
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	soit Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('Entete1').style.backgroundImage=url(FirstPart + r + LastPart); } ? Mais cela ne fonctionnes toujours pas
	00

09/05/2011, 13h45	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 009 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 009 Points : 45 094 Points : 45 094	un string ! __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

09/05/2011, 13h58	#6
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('Entete1').object.style.backgroundImage="url('"+FirstPart + r + LastPart+"')"; ceci est-il correct ?
	00

09/05/2011, 14h03	#7
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 009 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 009 Points : 45 094 Points : 45 094	syntaxiquement oui après faut voir ce que donne ta concaténation de variables et si ça pointe sur un fichier image existant avec le bon path __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

09/05/2011, 14h08	#8
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	Le chemin est correct après avoir enlevé le double quote de mon FirstPart et de mon Lastpart. Mais il s'obstine à ne pas afficher !
	00

09/05/2011, 14h32	#11
Goltar Nouveau Membre du Club Patrick Algrain Développeur Web Débutant Inscription : mars 2011 Messages : 63 Détails du profil Informations personnelles : Nom : Patrick Algrain Localisation : Belgique Informations professionnelles : Activité : Développeur Web Débutant Secteur : Boutique - Magasin Informations forums : Inscription : mars 2011 Messages : 63 Points : 25 Points : 25	OK, j'ai trouvé Probleme de casse Dans mon onload j'appelais PrintImage() au lieu de printImage() Merci pour ton aide Problème résolu
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email