begin process at 2012 05 29 04:52:21
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

défilement image veticalement


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

défilement image veticalement

dimanche 28 janvier 2007 à 20:51:26 | défilement image veticalement

sAchAttouille

Salut à tous,

bon dabord je suis pas un fort utilisateur de forum sauf cas extreme pour trouver des astuces bout de codes sinon Niet !
Je suis pas un fort en programmation j'ais de bes et je me met juste au javascript pour le plaisir et reprendre des réflexes : pour faire un site perso tranquille !!

Alors j'ais un peu modifié un code de défilement de vignettes, l'original est un défilement horizontal et comme je voulais verticale j'ais bien fait ce qu'il fallait
sauf que d'une je pense que il doit y avoir des problemes de compatibilité de Navigateur ce dont je ne métrise pas du tout ...
d'aute part il y a un principe de référencement par Id pour la mise en place du code
+ des parties de code qui sont des objet imbriqué, semble t'il, de type document.body.remouvechild () dont je ne maitrise pas la synthaxe.

Je suis ainsi bloqué car je n'arrive pas à déplacer ce scripte ( avec ses fonction ...) de la balise BODY !! Impossible de l'intégrer dans une balise DIV 

-Y aurais t'il une simplification a faire ?
-de quelle manière puis-je modifié le code pour le placer ou je veux !!!
genre créer une fonction globale pour le sripte qui peut être appelé par un simple onmouseover="fonction defile()"
-et si ma fois je trouvais le moyen d'ouvrir les liens dans un Id (emplacement) spécifique alors ce serais le mieux !

voila le code :
<html>
<head>
<title>...</title>

<style type="text/css">
body {margin:0px}
img {display:none;position:absolute}
// proprietes de la boite a images;"position" et "overflow" sont necessaires;
#c {display:none;margin-top:100px;background-color:#ffcc00;position:relative;overflow:hidden;}
</style>

</head>

<body>

<h1 id="mess" style="text-align:center">
Veuillez patienter...
</h1>

<div id="nul"></div>

<div style="margin-top:50px;margin-left:50px">
  <p><strong>
    En passant sur la boite a images, on decide du sens et de la vitesse de defilement;<br />
    Il y a des les liens images;<br/>
    On peut alors afficher chaque image dans une fenetre independante (pas d'agrandissement ici,
    ce n'est pas le but);<br />
    </strong></p>
</div>
<div id="GdImage"> </div>

<script type="text/javascript">

//||||||||||||||||||||||||||
//Nombre d'image a défiler|
//||||||||||||||||||||||||||

var NbImage=5



//||||||||||
//Variables|
//||||||||||
var timer,zero,w,lf,el;
var tab=new Array(NbImage);
var pos=0;
var val=0;
var oui=true;


//||||||||||||||||||||||||
//Variables parametrables|
//||||||||||||||||||||||||



var MG=100;// MARGE de GAUCHE de la boite a images;
var MH=100;// MARGE du HAUT de la boite a images;

var H=450;// HAUTEUR de la boite a images (forcement superieure a la somme des largeurs des images);

var L=150;// LARGEUR de la boite a images;

var delai=Math.round(H/4);// le delai initial est d'un quart de la hauteur de la boite;


//|||||||||||||||||||||
//Creation de la boite|
//|||||||||||||||||||||
var c=document.createElement('div');
c.id="c";
c.style.marginTop=MH+"px";
c.style.height=H+"px";
c.style.width=L+"px";

var dec=MH+H/4;// position verticale au centre de la boite;


//||||||||||||||||||||
//Creation des images|
//||||||||||||||||||||
for(i=0;i!=NbImage;i++){
   zero= i<9 ? 0 : "";
   tab[i]=new Image();
   tab[i].src="DSC"+zero+(i+1)+".JPG";
   c.appendChild(tab[i]);
}
document.body.replaceChild(c,document.getElementById('nul'));


//|||||||||||||||||||||||
//Deplacement des images|
//|||||||||||||||||||||||
function go(){
for(i in tab){
   lf=parseInt(tab[i].style.top);
   w=tab[i].height;
   tab[i].style.top=lf+val+"px";
   if(lf>pos-w){
      tab[i].style.top=lf-pos+"px"};
   if(lf<H-pos){
      tab[i].style.top=lf+pos+"px"};
}
timer=setTimeout("go()",delai)
}


//||||||||||||||||
//Vitesse et sens|
//||||||||||||||||
function speed(e){
el= (!e) ? event.clientY : e.pageY;

if(el>=dec){
   delai=H/2+2-(el-dec);val=-2}// val=deplacement
else{
   delai=H/2-2-(dec-el);val=2};// val=deplacement
}


//||||||||||||||||||||||||
//Gestionnaire de "speed"|
//||||||||||||||||||||||||
c.onmousemove=speed;

//||||||||||||||||||||
//Lancement des liens|
//||||||||||||||||||||
c.onclick=function(){
    for(i in tab){
       tab[i].onclick=function(){
         // if(this.style.cursor=="pointer"){
           
            if (i<=NbImage) {           
                 window.open(src="Neige_Bx_24-01-07/DSC"+zero+(i)+".JPG")}
                 }
       //   }
          ;
    }
}

 //;
 
//|||||||||||||||||||||||||||||||||||||||||||||||||
//Positionnement des images et lancement du script|
//|||||||||||||||||||||||||||||||||||||||||||||||||
onload=function(){
document.body.removeChild(document.getElementById("mess"));
c.style.display="block";
for(i in tab){
tab[i].style.top=pos+"px";
tab[i].style.left=(L-tab[i].width)/2+"px";
tab[i].style.display="inline";
pos+=tab[i].height;
}
go();
}

</script>

</body>
</html>
lundi 29 janvier 2007 à 12:34:55 | Re : défilement image veticalement

bultez

Membre Club




Bonjour,

    tu tiens à tout prix à mettre ce script au point, ou alors d'autres
       solutions ( plus simples ) t'intéressent ?
    parce que je n'ai pas réellement compris le problème ( il y en a
       plusieurs d'évoqués, non ? )
    si l'on s'en tient au titre : défilement d'images ( ou autres )
       verticalement ( ou autres )
, la balise <marquee> est là pour ça.


Cordialement                                Bul                 [mon Site]         [M'écrire]
lundi 29 janvier 2007 à 22:46:13 | défilement image veticalement

sAchAttouille

Salut !! merci pour la réponse !!

Ben je ne tiens pas forcément à ce scripte en paticulier !! bien que celui-ci répond en partie a ce que je veux faire !!
En plus je voudrais finalement quand même comprendre tout les détails de sa programation par curiosité et pour mon instruction personnelle !

Avec ce scripte je peut actionner le défilement avec la souris gérer la vitesse en fontion de sa position .... mais peut être c'est possible avec une balise <MARQUEE>

il y a plusieurs questions :

comment rendre le scripte compatible IE, FireFoxe et Netscape ?

Mais surtout comment me libérer de l'inbrication des objet du style document.body.remouvechild ()
pour pouvoir placer mon scrite dans des sous ensembles différent de <BODY>

Merci pour les réponses futures !!!

Sinon vous pouver poster d'autres exemples de défilement verticale fonctionnant avec la souris comme control !!

MERCI !!!





Cette discussion est classée dans : images, style, boite, var, tab


Répondre à ce message

Sujets en rapport avec ce message

aligner les images horizontalement [ par oceane751 ] bonjour à tous avec le code qui suit, mes images defilent de façon verticale mais je voudrais que ces images défilent horizontalement voici le c effet de rotation d'iamge avec script, et lien sur image [ par RomantikA ] Bonjour,je ne sais pas trop si c'est le bon endroit pour expoqer mon problème, mais il s'agit d'un code javascript, donc j'ai tenté le tout pour le to Porbleme de graphique et tableau avec JQUERY [ par nicoferra ] Bonjour,Voici mon problème :Je crée des tableaux en php que je transforme en suite en javascript (voir le code ci-dessous) pour les utiliser avec jque Compter nombre d'occurences avec regexp [ par alex166435 ] Bonjour,Je souhaiterais connaitre le nombre de mot de ma regexp contenus dans ma chaine. J'ai essayé de faire :var ma_regexp = new RegExp ("toto|tata" Nouvelle fenetre [ par ayoubpro ] Bonjour tout le monde J'ai un petit formulaire( avec des cases à cocher),on peut choisir les bonnes réponses et le script javascript c Menu de voiture avec le DOM [ par sonialand ] salut tout le monde,je suis entrain de developpe un menu de voiture (audi) avec le DOM.J'ai plein d'erreurs que j'arrive pas a corriger, je souhaite a Problème fluidité javascript déplacement d'une image [ par skydre ] Bonjour à tous,       J'espère déjà avoir posté mon message dans le bon forum.       J'ai développer un petit script java pour une page d'accueil de s Page de chargement après un formulaire [ par cubitus79 ] Bonjour, J'ai actuellement des problème pour mettre en place une animation de chargement a la suite de mon formulaire. J'explique mieux: j'ai un for IE8 > drag qui agrandit la zone affichable pourtant en overflow hidden [ par neiimad ] Bonjour. Ma zone affichable s'agrandit sous IE8 lorsque je tente de déplacer mon élément hors de celle ci, malgré l'overflow hidden. Je n'ai pourtan Deux javascripts identique dans une même page [ par guerrilleur ] Voila je voudrai avoir de fois le même javascript sur ma page. voici mon code actuel: [code=html] --> /***************


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,624 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales