Intégrer <marquee> dans <table>

T'as essayer de le mettre en background de ton span?

Le problème va être le même, les images vont passer au dessus du background... je teste.

effectivement, les images passent au dessus... (normal)

Ah ok tu veux que les images passe en dessous.

J'ai ptetre une solution mais je suis pas sur:

Tu mets ton tableau en z-index:-2

Un span en z-index:0 sans rien dedans.
Le background avec ton image en png et blanc tu remplace par transparant.

Le span avec le marquee en z-index:-1.

Ce qui fait que tu as ton tableau, par dessus ton ton defilemment et par dessus ton image encadrante.

Je suis pas chez moi pour tester ça donc je peux pas te dire si ça marche ou pas. tiens moi au courant ;)

Bonjour,

La bonne vielle méthode
- un parent positionné en relative
- des enfants positionnés en absolute
- le 1st rencontré dans le code est celui qui est en dessous
- le 2nd vient se positionner par dessus le 1st...
...et ainsi de suite en suivant le flux.

ce qui peut donner...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<td> <div style="position:relative;height:112px;" onmouseover = "document.getElementById('id1').stop();" onmouseout = "document.getElementById('id1').start();"> <marquee scrolldelay="80" id="id1" style="position:absolute;"> <a href="http://www.grenadineetsespetits.com/tout-pour-sa-securite/115-localisateur-d-enfant-sarobaby.html"> <img title="" src="images/1.jpg" alt="" width="110px" border="0" height="110px"></a> <img title="" src="images/2.jpg" alt="" width="110px" border="0" height="110px"> <img title="" src="images/3.jpg" alt="" width="110px" border="0" height="110px"> <img title="" src="images/4.jpg" alt="" width="110px" border="0" height="110px"> <img title="" src="images/5.jpg" alt="" width="110px" border="0" height="110px"> </marquee> <img src = "images/bangesp_03.gif" style = "position:absolute;"> </div> </td>

---

Attention
- penser à reporter, dans ce cas, la gestion des événements au dessus de la pile ou sur le parent
- les liens de la couche inférieure ne sont plus accessibles, il y a la couche supérieure qui catch les événements

Citation:

---

Envoyé par NoSmoking

Bonjour,

La bonne vielle méthode
- un parent positionné en relative
- des enfants positionnés en absolute
- le 1st rencontré dans le code est celui qui est en dessous
- le 2nd vient se positionner par dessus le 1st...
...et ainsi de suite en suivant le flux.

---

ça va déjà mieux, les liens ne fonctionnent pas, mais les images s’arrêtent au passage de la souris...

Citation:

---

Envoyé par eillon

ça va déjà mieux, les liens ne fonctionnent pas, mais les images s’arrêtent au passage de la souris...

---

pour les liens, essaye de mettre un onlick sur tes images, comme ça:

Code:

---

onclick="window.location.href='tapage.php'"

---

Et si tu veux que ton curseur est une apparence comme sur les lien:

Code:

---

style="cursor:pointer"

---

:ccool:

j'ai rajouté sur la première image

Code:

---

<img onclick="window.location.href='http://www.grenadineetsespetits.com/pots-et-reducteurs/111-pot-portatif-etanche-my-carry-potty.html'" style="cursor:pointer" title="Pot portatif étanche. MY CARRY POTTY" src="images/1.jpg" alt="Pot étanche" height= 110px width= 110px border="0" />

---

Mais le curseur n'apparait pas, le cadre étant au dessus, il n'y a que lui qui est lu au passage de la souris.

Exact j'y avais plus pensé......

Hum hormis créer 4 div qui vont encadrer tes image pour former un trou:

Code:

---

1 2 3 4

|----------| | | |----------|

---

Comme ça ça laisse un trou pour laisser les évennement passer au travers de ton cadre, mais jepense pas que sa soit la solution idéale :?

Citation:

---

Envoyé par skeud

Exact j'y avais plus pensé......

Hum hormis créer 4 div qui vont encadrer tes image pour former un trou:

Code:

---

1 2 3 4

|----------| | | |----------|

---

Comme ça ça laisse un trou pour laisser les évennement passer au travers de ton cadre, mais jepense pas que sa soit la solution idéale :?

---

Excellente idée, le cadre est moins joli parce que je me retrouve soit avec les images au-dessus qui coupent le bas du cadre (si je le met z-index: -1, les liens ne fonctionnent pas), soit j'enlève le bas du cadre et ça passe...

Page test

Beh tu découpe ton image en 4 en mettant des div qui ne se chevauche pas, comme ça tu as ton cadre tout beau et les liens qui fonctionne ;)

Mais si cette solution te conviens, prends la ;)

Citation:

---

Envoyé par skeud

Beh tu découpe ton image en 4 en mettant des div qui ne se chevauche pas, comme ça tu as ton cadre tout beau et les liens qui fonctionne ;)

Mais si cette solution te conviens, prends la ;)

---

J'ai testé avec les 4 div, mais celle du bas pose problème, elle agrandi trop le cadre si je la baisse, c'est un peu disproportionné.

Merci à tous.

il y a au moins deux méthodes pour catcher les événements sur tes images
- mettre un écouteur sur l'élément parent et à réception d'une action l'analyser et la traiter fonction de la position de la balise MARQUEE afin de connaître l'image cliquée...c'est une usine à gaz
- faire un cadre autour , laissant apparaître l'image, solution proposée par skeud, mais il existe plusieurs façon d'y arriver, celle que tu as choisi me paraît la moins élégante.

Il est possible de créer 4 DIV avec comme background-image la même image mais placée différemment en jouant sur la propriété position du background.

le style pour ceux ci

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

/* les donnes communes */ .cadre { position : absolute; height : 100%; width : 100%; background-image:url(images/bangesp_03.gif); } /* les details de chacune */ #bord_haut { height : 12px; } #bord_bas { top : 95px; height : 15px; background-position : bottom; } #bord_gauche { width : 10px; background-position : left; } #bord_droit { left : 128px; width : 12px; background-position : right; }

---

maintenant la mise en place de la banière et des DIV

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div style="position:relative;height:110px;"> <!-- LES EVENEMENTS SONT DEPLACE SUR LA BALISE MARQUEE --> <marquee scrolldelay="80" id="id1" style="position:absolute;" onmouseover = "this.stop();" onmouseout = "this.start();">   <a href="http://www.grenadineetsespetits.com/tout-pour-sa-securite/115-localisateur-d-enfant-sarobaby.html"> <img title="" src="images/1.jpg" alt="" width="110px" border="0" height="110px"></a> <img title="" src="images/2.jpg" alt="" width="110px" border="0" height="110px"> <img title="" src="images/3.jpg" alt="" width="110px" border="0" height="110px"> <img title="" src="images/4.jpg" alt="" width="110px" border="0" height="110px"> <img title="" src="images/5.jpg" alt="" width="110px" border="0" height="110px"> </marquee> <!-- LES DIV DU CADRE --> <div class="cadre" id="bord_haut"></div> <div class="cadre" id="bord_bas"></div> <div class="cadre" id="bord_gauche"></div> <div class="cadre" id="bord_droit"></div> </div>

---

il est bien évident que les valeurs sont à affinées.

Je trouve cela plus classe quand même :mouarf:

ça ne posera pas de problème avec le fait que les background se supperposent?

Citation:

---

Envoyé par skeud

ça ne posera pas de problème avec le fait que les background se supperposent?

---

pas le moindre du monde attendu que l'on s'arrange pour que virtuellement l'image soit placé au même endroit par rapport au conteneur.

PS: pas forcément clair...

Citation:

---

Envoyé par NoSmoking

pas le moindre du monde attendu que l'on s'arrange pour que virtuellement l'image soit placé au même endroit par rapport au conteneur.

PS: pas forcément clair...

---

Ok je vois comment tu veux faire, ça reviens un peu au même que ma solutions, sans le redécoupage de l'image, qui sera fait avec la position du background :)