Random Image en fond de tableau

**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]

Random Image en fond de tableau

JavaScript

Discussions similaires

Partager

Partager