Intégrer <marquee> dans <table>

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

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

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

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)

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

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

**NoSmoking** · 05/07/2011, 16h17

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 :

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

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

**eillon** · 06/07/2011, 08h57

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

**skeud** · 06/07/2011, 09h11

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 :

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

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

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

Code :

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

style="cursor:pointer"

**eillon** · 06/07/2011, 09h27

j'ai rajouté sur la première image

Code :

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

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

**skeud** · 06/07/2011, 09h47

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

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

Code :

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

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

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

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 :

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

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

**skeud** · 06/07/2011, 11h17

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

**eillon** · 06/07/2011, 11h21

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.

**NoSmoking** · 06/07/2011, 18h45

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 css :

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
 /* 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 html :

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

**skeud** · 07/07/2011, 08h32

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

**NoSmoking** · 07/07/2011, 13h29

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

**skeud** · 07/07/2011, 13h33

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

Intégrer <marquee> dans <table>

HTML

Discussions similaires

Partager

Partager