Intégrer <marquee> dans <table>

**eillon** · 05/07/2011, 10h00

Bonjour,

Après plusieurs tests de placement et déplacement de lignes de codes, je me tourne vers vous afin de trouver la solution à mon problème...
Je fais défiler des images dans un tableau pour une bannière.

Code :

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

1
2
3
4
5
6
7
8
9
<div style="height: 150px; width: 140px; padding-top: 5px;">
<marquee scrolldelay=80 id=id1><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">
<img title="" src="images/1.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/2.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/3.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/4.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/5.jpg" border="0" alt="" height= 110px width= 110px />
</span></marquee>
</div>

Si je passe le code dans la <table>, les images passe sur mon tableau et non dessous.
Si je passe le <marquee> après </table>, les images passes bien sous le tableau, mais je ne peux plus arrêter les images au passage de la souris.

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
44
45
46
<!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=utf-8" />
<title>Grenadine et ses petits</title>
<style type="text/css">
body {
 
}
</style>
</head>
 
<body>
 
<a href="http://www.grenadineetsespetits.com">
<table width="148" height="549" border="0" style="position: absolute; background-repeat: no-repeat; background-image: url(images/fond_bg.png); height: 545px;">
 
  <tr>  
		<td height="69" style="background-repeat: no-repeat; background-image: url(images/logo.png);">&nbsp;</td>	
  </tr>
  <tr>
		<td height="27" style="padding-left: 0px; background-repeat: no-repeat; background-image: url(images/texte.png);"></td>
  </tr>
		<div style="height: 150px; width: 140px; padding-top: 5px;">
<marquee scrolldelay=80 id=id1><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">
<img title="" src="images/1.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/2.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/3.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/4.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/5.jpg" border="0" alt="" height= 110px width= 110px />
</span></marquee>
</div>
 
  <tr>
		<td height="130" style="background-repeat: no-repeat; background-image: url(images/bebe5.png);">&nbsp;</td>	
  </tr>
  <tr>
		<td height="150" style="background-repeat: no-repeat; background-image: url(images/bebe3.png);">&nbsp;</td>
  </tr>
</table>
</a>
 
 
 
</body>
</html>

Je me tourne donc vers votre expérience afin de pouvoir améliorer ma bannière et ainsi au clic sur l'image choisi, diriger le visiteur vers la page produit.

Bannière : ICI

Merci par avance.

Eillon

**skeud** · 05/07/2011, 10h16

C'est normal que ta div ne soit pas encadré par une <tr>?

Tu voudrais mettre ce défilemment où en fait? Dans ton tableau ou en dessous?

**eillon** · 05/07/2011, 10h33

je veux que ça défile en dessous...
que je mette ou pas les <tr>
ça me décale tout le tableau vers le bas

**skeud** · 05/07/2011, 10h53

Bon déja tu doispas mettre tes balise marquee dans ton tableau mais en dessous de ta balise </table>comme ça tu auras ton défilement en dessous de ton tableau.

Petite info, les balise tr vont TOUJOURS avec les balise td au minimum (hormis les balise de titre ...)

Donc quand tu as un contenu dans un tableau, toujours TR+TD

**eillon** · 05/07/2011, 11h02

J'enregistre pour la suite, mais mon problème n'est toujours pas résolu...
mon onmouseover ne fonctionne pas sous mon tableau...

De plus, si j'intègre le lien du tableau autour de <table>, tout le tableau prend le lien (normal) si je veux mettre le lien sur <tr> particulier, le lien n'apparait pas.

**skeud** · 05/07/2011, 11h24

Euh pour moi ça fonctionne nikel essaye d'inverser ton span et marquee:

Code :

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

1
2
3
4
<span style='width:100px'>
  <marquee>
  </marquee>
</span>

Et dis moi si ça fonctionne

**eillon** · 05/07/2011, 11h29

Non toujours rien, j'ai testé sous deux navigateurs.

Peux-tu mettre le code complet que tu utilises ?

**skeud** · 05/07/2011, 11h32

Code :

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

1
2
3
4
5
6
<span onmouseover="getElementById('id1').stop();" style="width:100px;background-color:#AAAAAA" onmouseout="getElementById('id1').start();">
	<marquee scrolldelay=80 id=id1>
		<p style="display:inline">toto</p>
		<p style="display:inline">&nbsp;titi</p>
	</marquee>
</span>

tu mets ça en dessous de ta balise </table> et ça devrait fonctionner, je vois pas de raison pour que ça ne le fasse pas.Si ça ne marche pas, post tout le contenu de ton fichier de cette page stp

**eillon** · 05/07/2011, 11h34

Rien...
ça fonctionne si le tableau n'apparait pas.

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
44
45
46
47
48
49
50
51
52
53
<!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=utf-8" />
<title>Grenadine et ses petits</title>
<style type="text/css">
body {
 
}
</style>
</head>
 
<body>
 
 
<table width="148" height="549" border="0" style="position: absolute; background-repeat: no-repeat; background-image: url(images/fond_bg.png); height: 545px;">
 
 
  <tr>  
	<a href="http://www.grenadineetsespetits.com" target= _blank>
		<td height="69" style="background-repeat: no-repeat; background-image: url(images/logo.png);">&nbsp;</td>	
	</a>
  </tr>
 
  <tr>
		<td height="27" style="padding-left: 0px; background-repeat: no-repeat; background-image: url(images/texte.png);"></td>
  </tr>
  <tr>
<td>&nbsp;</td>	
</tr>
  <tr>
		<td height="130" style="background-repeat: no-repeat; background-image: url(images/bebe5.png);">&nbsp;</td>	
  </tr>
  <tr>
		<td height="150" style="background-repeat: no-repeat; background-image: url(images/bebe3.png);">&nbsp;</td>
  </tr>
</table>
 
 
  <td>
  <tr>
		<div style="height: 150px; width: 140px; padding-top: 140px;">
<span onmouseover="getElementById('id1').stop();" style="width:100px;background-color:#AAAAAA" onmouseout="getElementById('id1').start();">
	<marquee scrolldelay=80 id=id1>
		<p style="display:inline">toto</p>
		<p style="display:inline">&nbsp;titi</p>
	</marquee>
</span>
</div>
</tr>
</td>
 
</body>

**skeud** · 05/07/2011, 11h42

TROUVER:

Rajoute ça:

Code :

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

z-index=-1;

dans la balise style de ton tableau

Par contre je t'informe que ton code html n'est pas correct du tout à pas mal d'endroit

**eillon** · 05/07/2011, 11h47

En fait pour mon code, rien d'étonnant je pars sur une base déjà construite que je modifie, je suis 'encore' incapable de partir de zéro et de créer mon tableau...

Même après modif, ça ne marche pas...

Mon code en ligne

**skeud** · 05/07/2011, 13h01

Erreur de ma part:

Code :

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

z-index:-1;

: et non pas =

**Bovino** · 05/07/2011, 13h35

Envoyé par eillon

mon onmouseover ne fonctionne pas sous mon tableau...

Code :

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

onmouseover="getElementById('id1').stop();"

C'est un peu normal... getElementById() est uniquement une méthode de l'objet document

**skeud** · 05/07/2011, 13h36

Envoyé par Bovino

Code :

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

onmouseover="getElementById('id1').stop();"

C'est un peu normal... getElementById() est uniquement une méthode de l'objet document

Beh je pensais aussi mais ça fonctionne quand tu testes le code comme ça

**Bovino** · 05/07/2011, 13h41

Envoyé par skeud

Beh je pensais aussi mais ça fonctionne quand tu testes le code comme ça

Ben pas de façon cross-browser alors :
Nom : byId.jpg
Affichages : 122
Taille : 37,0 Ko

**eillon** · 05/07/2011, 13h49

J'ai trouvé une pseudo solution qui consiste a retiré le cadre de défilement, mais l'esthétique n'y est plus...

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
44
<!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=utf-8" />
<title>Grenadine et ses petits</title>
<style type="text/css">
 
</style>
</head>
 
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Tableau_01" width="140" height="530" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/bangesp_01.gif" width="140" height="72" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/bangesp_02.gif" width="140" height="59" alt=""></td>
	</tr>
	<tr>
		<td>
			<div style="height: 120px; width: 130px; margin-left: 10px;">
<marquee scrolldelay=80 id=id1><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">
<img title="" src="images/1.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/2.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/3.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/4.jpg" border="0" alt="" height= 110px width= 110px />
<img title="" src="images/5.jpg" border="0" alt="" height= 110px width= 110px />
</span></marquee>
</div>
</td>
	</tr>
	<tr>
		<td>
			<img src="images/bangesp_04.gif" width="140" height="146" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/bangesp_05.png" width="140" height="141" alt=""></td>
	</tr>
</table> 
</body>
</html>

**skeud** · 05/07/2011, 13h50

Quand tu es dans un onclick, tu es dans un élément, ça change pas quelquechose? du genre si tu fais un:

Code :

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

1
2
var div=document.getElementById('toto');
var sous_div=div.getElementById('sous-div');

ça fonctionne non? en récupérant la div avec "sous-div" comme id dans la div toto.

**eillon** · 05/07/2011, 14h05

en gros je veux ça mais avec le cadre comme ça

.

J'suis compliqué, mais je voie tellement de belles choses que je me dis pourquoi pas moi ?

**skeud** · 05/07/2011, 14h11

Le cadre comme ça?

Tu as envoyer une image blanche j'ai l'impression

**eillon** · 05/07/2011, 14h14

http://eillon.free.fr/forumdeveloppe...bangesp_03.gif

Intégrer <marquee> dans <table>

HTML

Discussions similaires

Partager

Partager