Élément qui se déplace verticalement dans une certaine zone

**ThufirHawat** · 05/05/2008, 02h50

Bonjour à tous,

Je travail actuellement à ce site internet : http://www.sciencesforensiques.com qui contiendra des articles relatifs aux sciences forensiques (comme son nom l'indique). J'aimerai que les articles contiennent un espace pour une pub Google AdSense, et que cette pub reste constamment visible.

Par exemple : http://www.sciencesforensiques.com/a...cle=polygraphe

L'image du mec à la hache représente l'emplacement de la futur pub et se trouve dans une cellule de tableau allant du haut jusqu'au bas de l'article. J'aimerai que cette image se "ballade" au fur et à mesure que l'on descend dans la page, tout en restant dans les limites de la cellule.

J'ai trouvé un script javascript permettant de fixer la position d'une image dans une page : http://www.jejavascript.net/imagefix.php. Mais cela ne correspond pas tout à fait à ce que je désire et je ne sais pas comment l'adapter.

Il faudrait donc que la "PUB" soit au sommet de la cellule lorsqu'on arrive sur la page et qu'elle suive le mouvement de la page vers le bas une fois qu'elle est centrée. J'espère que ma description du problème est claire et que vous pourrez m'aider.

D'avance merci et très bonne semaine à tous

ThufirHawat

**SpaceFrog** · 05/05/2008, 09h24

Juste un petit code pour te familiariser avec le mouvement

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script language="Javascript">
var timer;
var position= new Array(2);
var MyWay;
 
function movearound(thisway)
{ 
position[0] = parseInt(document.getElementById('MyDiv').style.top);
position[1] = parseInt(document.getElementById('MyDiv').style.left); 
 
switch(thisway)
{
case "up":
   position[0] -= 2;
   break;
 
case "do":
   position[0] += +2;
   break;
 
case "le":
   position[1] -= 2;
   break;
case "ri":
   position[1] += +2;
   break;
}
 
 
document.getElementById('MyDiv').style.top = Number(position[0])+"px"; 
document.getElementById('MyDiv').style.left = Number(position[1])+"px";
} 
 
</script> 
<style >
input {font-family: 'symbol';}
</style>
</head>
 
 
<body>
<div id="MyDiv" style="width: 39; height: 20; top:0; left:0; background-color: blue; position: absolute; z-index:-1;" ></div> 
 
 
  <table border="0" style="cellpadding:0; cellspacing:0; " width="90">
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="up" width=this.height value="Ý" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" ; / / / /></td>
      <td width="34%"></td>
    </tr>
    <tr>
      <td width="33%"><input type="button" name="le" width="100" value="Ü" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="33%"><input type="button" width="100" value="&#128;" onClick="clearInterval(timer);" /></td>
      <td width="34%"><input type="button" name="ri" width="100" value="Þ" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
    </tr>
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="do" width="100" value="ß" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="34%"></td>
    </tr>
  </table>
 
</html>

**ThufirHawat** · 05/05/2008, 21h57

Merci pour ce bout de code amusant et intéressant. Mais j'avoue que cela ne m'aide pas vraiment à résoudre mon problème

Ou alors, je ne vois pas bien en quoi cela m'aide.

Est-ce que le Javascript est la bonne direction pour le résoudre ? Où devrais-je me pencher sur le CSS plutôt ?

Merci

Thufir Hawat

**Sacha999** · 05/05/2008, 23h57

Apparemment sur le site ca fonctionne, ou bien c'est pas ca que tu cherches a faire?

**ThufirHawat** · 06/05/2008, 23h06

Dépend du navigateur

Mais j'aimerai que la "pub" ne commence à descendre qu'à partir du moment où elle est au centre de l'écran et non pas dès le départ à sa position initiale.

Actuellement sous IE rien ne bouge, sur Firefox ça bouge mais "trop tôt" et l'image ne reste pas dans sa colonne.

**Sacha999** · 06/05/2008, 23h38

capturer l'evenement OnScroll sur le <body>, qui calcul la position de la pub et à partir de tel position tu met le css en "fixed" et tel position tu enleve le "fixed" pitetre

Élément qui se déplace verticalement dans une certaine zone

JavaScript

Discussions similaires

Partager

Partager