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

Version imprimable

05/05/2008, 02h50
ThufirHawat

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

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

Juste un petit code pour te familiariser avec le mouvement

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

05/05/2008, 21h57
ThufirHawat

Mais encore ?

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 :D 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
05/05/2008, 23h57
Sacha999

Apparemment sur le site ca fonctionne, ou bien c'est pas ca que tu cherches a faire?
06/05/2008, 23h06
ThufirHawat

Dépend du navigateur :D
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.
06/05/2008, 23h38
Sacha999

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