Outils et ressources pour site web
Les javascripts

Défilement horizontal

DESCRIPTION :

Permet de faire défiler la page horizontalement .

EXEMPLE :

> Voir l'exemple

COMMENTAIRES :

Remplacez fleche.gif par vos images .

Vous pouvez changer la position des fleches dans :
item.moveTo((pageXOffset+w_x-180),(w_y+pageYOffset-40))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-180;
item.pixelTop=w_y+document.body.scrollTop-40;
x = position par rapport à la droite
y = position par rapport au bas

Auteur : Brian Gosselin - scriptasylum.com

CODE DU SCRIPT

-Insérer entre les balises <BODY> et </BODY> :

<script>
//-- Trouvé sur http://www.mandragore2.net --> 
// Author: Brian Gosselin at scriptasylum.com
var isNS=(navigator.appName=="Netscape");
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, goleft, scrollamount=5;

function init(){
  item=eval('document.'+_all+'item'+_style);
  getwindowsize();
  item.visibility=_visible;
  window.onresize=(isNS)? reloadNS : getwindowsize;
  scrollpage();
  }
  
function setscroll(ismore){
  if(ismore){
  if(scrollamount<30)scrollamount+=2;
  }else{
  if(scrollamount>=3)scrollamount+=-2;
  }}
  
function getwindowsize(){
  w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
  w_y=(isNS)? window.innerHeight : document.body.clientHeight;
  (isNS)? item.clip.width=200: item.width=200;
  (isNS)? item.clip.height=41 : item.height=33;
  moveitem();
  }
  
function moveitem(){
  if(isNS){
  item.moveTo((pageXOffset+w_x-180),(w_y+pageYOffset-40))
  }else{
  item.pixelLeft=document.body.scrollLeft+w_x-180;
  item.pixelTop=w_y+document.body.scrollTop-40;
  }}
  
function reloadNS(){
  setTimeout('window.location.reload()', 500);
  }
  
function scrollpage(){
  status='';
  if(okscroll){
  (goleft)? window.scrollBy(-scrollamount,0) : window.scrollBy(scrollamount,0) ;
  }
  moveitem();
  setTimeout('scrollpage()', 40);
  }
  
var txt=(isNS)? '<layer name="item" visibility="hidden" top="0" left="0">' : '<div id="item" style="position:absolute; visibility:hidden; left:0px; top:0px;">';
  txt+='<a href="javascript:setscroll(false)" onMouseover="okscroll=true; goleft=true" onMouseout="okscroll=false"><img src="fleche_gauche.gif" border=0 width="_" height="_"></a> <a href="javascript:setscroll(true)" onMouseover="okscroll=true; goleft=false" onMouseout="okscroll=false"><img src="fleche_droite.gif" border=0 width="_" height="_"></a>';
  txt+=(isNS)? '</layer>' : '</div>';
  document.write(txt);
  
window.onload=init;
</script>

Haut de la page

visiteurs depuis le : 02-04-2002 - Actuellement sur le site :

ACCUEIL

La construction du Mandragore 2

Les plans

L'histoire du Mandragore 1

Jonques et gréement de jonque

Projets

Utilisation et futures croisières du bateau

Encyclopédie de la mer

Le bois

Pavillonnerie

La construction amateur

Liens

Livre d'Or

Référencement

Nos bannières

Webmasters

Le site