Intégrer <marquee> dans <table>

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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

05/07/2011, 10h16
skeud

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?
05/07/2011, 10h33
eillon

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
05/07/2011, 10h53
skeud

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 ;)
05/07/2011, 11h02
eillon

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.
05/07/2011, 11h24
skeud
Euh pour moi ça fonctionne nikel essaye d'inverser ton span et marquee:
Code:

1 2 3 4 <span style='width:100px'> <marquee> </marquee> </span>
Et dis moi si ça fonctionne :ccool:
05/07/2011, 11h29
eillon

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

Peux-tu mettre le code complet que tu utilises ?

Code:

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"> 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

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

Code:

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>

05/07/2011, 11h42
skeud

TROUVER: :ccool:

Rajoute ça:

Code:

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 :?
05/07/2011, 11h47
eillon

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...:cry:

Mon code en ligne
05/07/2011, 13h01
skeud

Erreur de ma part:

Code:

z-index:-1;

: et non pas =
05/07/2011, 13h35
Bovino

Citation:

Envoyé par eillon

mon onmouseover ne fonctionne pas sous mon tableau...

Code:

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

C'est un peu normal... getElementById() est uniquement une méthode de l'objet document :roll:
05/07/2011, 13h36
skeud

Citation:

Envoyé par Bovino

Code:

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

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

Beh je pensais aussi mais ça fonctionne quand tu testes le code comme ça 8O
05/07/2011, 13h41
Bovino

1 pièce(s) jointe(s)

Citation:

Envoyé par skeud

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

Ben pas de façon cross-browser alors :
Pièce jointe 79908
:whistle:

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

Code:

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>

05/07/2011, 13h50
skeud
Quand tu es dans un onclick, tu es dans un élément, ça change pas quelquechose? du genre si tu fais un:
Code:

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.
05/07/2011, 14h05
eillon

en gros je veux ça mais avec le cadre comme ça
http://eillon.free.fr/forumdeveloppe...bangesp_03.gif.

J'suis compliqué, mais je voie tellement de belles choses que je me dis pourquoi pas moi ?
05/07/2011, 14h11
skeud

Le cadre comme ça? :koi:

Tu as envoyer une image blanche j'ai l'impression
05/07/2011, 14h14
eillon

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

Voir 40 message(s) de cette discussion en une page