Sujet Précédent Sujet Suivant

Défilement image veticalement

cs_sAchAttouille Messages postés 2 Date d'inscription mercredi 10 janvier 2007 Statut Membre Dernière intervention 29 janvier 2007 - 28 janv. 2007 à 20:51
cs_sAchAttouille Messages postés 2 Date d'inscription mercredi 10 janvier 2007 Statut Membre Dernière intervention 29 janvier 2007 - 29 janv. 2007 à 22:46
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>

Veuillez patienter...

 
    En passant sur la boite a images, on decide du sens et de la vitesse de defilement;

    Il y a des les liens images;

    On peut alors afficher chaque image dans une fenetre independante (pas d'agrandissement ici,
    ce n'est pas le but);

   



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

</html>

2 réponses

Réponse 1 / 2
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
29 janv. 2007 à 12:34
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.

<hr />


Cordialement                                Bul                 [mon Site]         [M'écrire]<hr />
0
Réponse 2 / 2
cs_sAchAttouille Messages postés 2 Date d'inscription mercredi 10 janvier 2007 Statut Membre Dernière intervention 29 janvier 2007
29 janv. 2007 à 22:46
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

Merci pour les réponses futures !!!

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

MERCI !!!
0

Discussions similaires

Défilement automatique d'une page
cs_scls19fr -
DevDeb -

19 réponses
defilement automatique pdf en boucle
archerdu38 -
jordane45 -

3 réponses
image avec FPDF
cs_sebalex -
Franck -

12 réponses
vectoriser un logo sous photoshop
cs_babidou -
harleyman37 -

11 réponses
[Photoshop] : Image noir et blanc en image blanc et noir ?
kristoufiol -
titoine2000 -

4 réponses
Rejoignez-nous