PB défilement page avec boutons dans une iframe

Bonsoir,

Je sais pas si l'intitulé de mon message est vraiment clair mais de toute façon, je vais essayer d'être plus précis.

Déjà, afin que vous vous rendiez compte de ce que je veux, je vous donne l'url de mon site (qui est en construction), il s'agit du site web d'une radio associative :
http://balistiq.free.fr/test/index2.htm

Il y a à droite sous le dessin qui se trouve sous le logo "balistiq" un bouton à partir duquel je suis censé faire défiler les contenus des rubriques, pour l'instant, celle qui me sert à faire des tests est accessible via le bouton "La radio". Si vous cliquez dessus, elle apparaitra au centre.

Mon problème est que la portion de script qui correspond à mes boutons était autrefois partie intégrante de chaque rubrique, et là, je voudrai qu'il fasse partie de la page principale (index2.htm) et que lorsqu'on clique dessus, ça fasse défiler les contenus des rubriques.

<div id="Layer1" style="position:absolute; width:18px; height:127px; z-index:0; left: 1102px; top: 415px;"><a href="javascript:movedown()"><img src="http://balistiq.free.fr/boutons.gif" width="18" height="100" border="0" usemap="#MapMap">
  <map name="MapMap">
    <area shape="poly" coords="0,17,16,21,9,0" href="javascript:moveup()">
    <area shape="poly" coords="16,24,0,20,0,35,7,35,7,44,9,46,9,36,16,35" href="javascript:stopscroll()">
    <area shape="poly" coords="1,38,1,61,5,61,5,52,12,52,12,61,16,61,16,38,13,38,12,47,5,48,5,37" href="javascript:movetop()">
    <area shape="poly" coords="7,53,9,53,9,64,16,64,16,74,1,79,1,64,6,63" href="javascript:stopscroll()">
    <area shape="poly" coords="1,82,16,78,9,100" href="javascript:movedown()">
  </map>
  <br>
  </a></div>

Comment faire ?

Vous aurez également remarqué que la partie centrale du site n'est pas alignée avec l'interface sauf si on met le tout en plein écran, ce n'est peut-être pas le sujet principal mais si ça pouvait être réglé au même temps, vous comprendrez que ça m'arrangerai bien.

En attendant une aide providentielle, je remercie d'avance toute les âmes charitables qui viendront à mon secours.

B onjour...

dans l'exemple ci dessous L'IFRAME  à une ID="IFRAME"...

les fonctions pouvant être utilisées...

var ScrollTimer = null;
//----------------------
function INC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, 1);
  ScrollTimer = setTimeout( " INC_Scroll( ' " +id_ + " ' ) " , 1);
}
//----------------------
function DEC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, -1);
  ScrollTimer = setTimeout("DEC_Scroll(' " +id_ + " ' ) " , 1);
}
//-------------------
function Stop_Scroll(){
  clearTimeout( ScrollTimer);
}


pour l'image faisant remonter le contenu de l'iframe on place les événements suivant...
onmouseout= "Stop_Scroll();" Onmouseover="DEC_Scroll( 'IFRAME');"

pour l'image faisant decendre le contenu de l'iframe on place les événements suivant...
onmouseout= "Stop_Scroll();" Onmouseover="INC_Scroll( 'IFRAME');"

Nota : Juste bien faire attention au guillemets

;0)

J'ai bien essayé plusieurs possibilités, mais ça reste abstrait, voilà la portion de mon code relative à l'iframe et au bouton ascensseur, je ne sais pas comment adapter tes explications à mon code.
Tu memarquera que j'ai bêtement ajouté ton code au dessus du DIV correspondant au bouton ascensseur et que j'ai modifié la zone du bouton qui permet de faire défiler vers le bas, mais bon, ça va pas plus loin, avant ça, j'ai essayé quantité de choses mais ça n'a mené à rien.

[code]
//--------------------------------------
// Changement de la SRC d'une IFRAME...
//--------------------------------------
function Charge_Fichier( where_, url_){
window.frames[where_].location.href=url_
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>

<BODY background="fond.jpg">

<iframe src="contenu.htm" frameborder="0" style="position:absolute; top:123px; left:305px; width:788px; height:638px; id="la_frame" name="la_frame"></iframe>
<a id="site"><img src="space.gif" border="0" id="image_lien"></a>

var ScrollTimer = null;
//----------------------
function INC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, 1);
  ScrollTimer = setTimeout( " INC_Scroll( ' " +id_ + " ' ) " , 1);
}
//----------------------
function DEC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, -1);
  ScrollTimer = setTimeout("DEC_Scroll(' " +id_ + " ' ) " , 1);
}
//-------------------
function Stop_Scroll(){
  clearTimeout( ScrollTimer);
}

<div id="Layer1" style="position:absolute; width:18px; height:127px; z-index:0; left: 1102px; top: 415px;"><a href="javascript:movedown()"><img src=" [ Lien ]" width="18" height="100" border="0" usemap="#MapMap">
  <map name="MapMap">
    <area shape="poly" coords="0,17,16,21,9,0" href="javascript:moveup('la_frame');">
    <area shape="poly" coords="16,24,0,20,0,35,7,35,7,44,9,46,9,36,16,35" href="javascript:stopscroll()">
    <area shape="poly" coords="1,38,1,61,5,61,5,52,12,52,12,61,16,61,16,38,13,38,12,47,5,48,5,37" href="javascript:movetop()">
    <area shape="poly" coords="7,53,9,53,9,64,16,64,16,74,1,79,1,64,6,63" href="javascript:stopscroll()">
    <area shape="poly" coords="1,82,16,78,9,100" href="javascript:onmouseout= "Stop_Scroll();" Onmouseover="INC_Scroll( 'IFRAME');"
>
  </map>
  <br>
  </a></div>[/code]

B onjour...

Les functions doivent être ajoutées dans la partie...
<SCRIPT TYPE="text/javascript">
var ScrollTimer = null;
//----------------------
function INC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, 1);
  ScrollTimer = setTimeout( "INC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets
}
//----------------------
function DEC_Scroll( id_){
  var Obj = frames[ id_];
  Obj.scrollBy( 0, -1);
  ScrollTimer = setTimeout("DEC_Scroll('" +id_ + "')", 1); // attention pas d'espace entre les guillemets
}
//-------------------
function Stop_Scroll(){
  clearTimeout( ScrollTimer);
}
</SCRIPT>

Quant aux appels ils deviennent...

<div id="Layer1" style="position:absolute; width:18px; height:127px; z-index:0; left: 1102px; top: 415px;">
<img src=" [ Lien ]" width="18" height="100" border="0" usemap="#MapMap">
</div>

<map name="MapMap">
  <area shape="poly" coords="0,17,16,21,9,0" href="javascript:void(0);" onmouseover="DEC_Scroll('IFRAME');" onmouseout="Stop_Scroll();">
  <area shape="poly" coords="16,24,0,20,0,35,7,35,7,44,9,46,9,36,16,35" href="javascript:void(0);">
  <area shape="poly" coords="1,38,1,61,5,61,5,52,12,52,12,61,16,61,16,38,13,38,12,47,5,48,5,37" href="javascript:void(0);">
  <area shape="poly" coords="7,53,9,53,9,64,16,64,16,74,1,79,1,64,6,63" href="javascript:void(0);">
  <area shape="poly" coords="1,82,16,78,9,100" href="javascript:void(0);" onmouseover="INC_Scroll('IFRAME');" onmouseout="Stop_Scroll();">
</map>

Nota :
 1 - la function MM_reloadPage(init) peut être supprmiée réfèrence à NetScape 4
 2 - les areas 2,3 et 4 ne servent pas...

;0)

Les areas 2, 3 et 4 serviront dans le futur, faut juste que je fasse un bouton plus simple d'utilisation car leur fonction est la pause et le retour en haut de la page.

Par contre, en suivant ton exemple, si je clique sur l'area 5, logiquement, je suis censé faire défiler vers le bas, or, à la pace, ça m'ouvre une nouvelle page, mais ça, c'est logique, dans la fonction "href="void(0);", faut que je mette autre chose, mais j'ignore quoi.
Etant donné que mon système de défilement est sur la page index2.htm, et étant donné qu'il y a plein de pages à faire défiler, est-ce qu'il faudra que je déclare toutes les pages ? Car si c'est le cas, j'aime autant en revenir à ce que j'avais fais avant mais ça occasionnera un autre problème bien plus complexe à résoudre.

1000 excuses mais à la relecture il y a effectivement faute...
l'area 5 est régit comme les autres à savoir...
<area shape="poly" coords="1,82,16,78,9,100" href="javascript:void(0);" onmouseover="INC_Scroll('IFRAME');" onmouseout="Stop_Scroll();">

Les areas 2, 3 et 4 serviront dans le futur, faut juste que je fasse un bouton plus simple d'utilisation car leur fonction est la pause et le retour en haut de la page.
la pause est prise en compte par les onmouseout...

Par contre, en suivant ton exemple, si je clique sur l'area 5, logiquement, je suis censé faire défiler vers le bas,
dans ce cas il faut ajouter l'événement onclick="INC_Scroll('IFRAME');"

Etant donné que mon système de défilement est sur la page index2.htm, et étant donné qu'il y a plein de pages à faire défiler, est-ce qu'il faudra que je déclare toutes les pages
non c'est le contenu de l'iframe qui défile et ce qu'elque soit la source contenu...

;0)

Effectivement, tel que tu l'indique, le défilement devrait se faire, mais ce n'est pas le cas, il s'avère que le bouton ascensseur fait partie intégrante du fichier index2.html et ce sont les rubriques que je souhaite faire défiler qui elles, sont des fichiers à part qui apparaisse dans la partie centrale.
Ton système fonctionne très bien dans le cas ou le bouton ascensseur fait partie intégrante de chaque fichiers de chaque rubrique.

Si j'ai décidé de le mettre dans index2.html, c'est que j'ai un soucis avec les calques et que j'ai pas trouvé de solution, mais si vraiment le fait d'avoir mis le bouton en dehors de chaque fichier pose problème, je reverrai mon problème de calque plus au calme.

Mais bon, je crois que t'a bien cerné mon problème, décidément, je t'en demande beaucoup. :-)

Je t'encourage à examiner le code d'une des rubriques, à savoir : [ Lien ]

Le bouton ascensseur était greffé dessus à la base, ça pourra sûrement t'éclairer davanatge.

B onjour...

je pense que tu n'as bien saisi ou il fallait tout placer, c'est dans ton fichier index2.html que tout doit se retrouver...
je t'engage à aller voir ICI pour récupérer le fichier modifié....

;0)

Tu vas dire que je suis très bête pour ne pas dire pire mais j'ai comparé ton code avec le mien à la virgule près et j'exagère à peine, le résultat est le même, alors, j'ai pris bêtement ton code et j'ai remplacé le mien par celui-ci et là encore, c'est pareil, mon pc doit être possédé par une force démoniaque, ça à se demander.

Dans l'état actuelle des choses, le lien que tu as plus haut a été modifié avec ton code exactement comme il est dans ton exemple.

C'est de la science fiction.

J'ai repéré d'où vient le problème mais là encore, c'est de l'ébreu ancien, il s'agit du fichier "radio.html qui se trouve ici :
[ Lien ]

Le soucis se trouve dans cette portion de code :

<p align="left"><font color="#FFFFFF"><br>
  </font><br>
  &nbsp;</p>
<p>&nbsp;</p>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>