Bonjour,

J'ai un soucis sur mon code. J'ai mis en place une liste d'images assez grande sur un site, et comme l'on ne peut pas tout voir d'un coup, j'aimerai que lors du clic sur un bouton, la div contenant toutes les images se déplace, laissant apparaitre les images jusqu'alors cachées.

En gros, c'est comme si la div contenant les images devait glisser.
J'ai pensé faire un "bouton" qui, au clic, modifierait la valeur "top" dans les proprietés de la div. J'ai commencé ca en javascript mais je me heurte à quelques soucis, notamment une fois le calcul effectué, de quelle manière renvoyer le résultat a l'argument "top".

Si il vous faut du code, je vous le donnerai bien entendu.

Sinon, si quelqu'un a une idée je suis preneur. Ou ne serait ce qu'un lien a éplucher.

function changertop(id,o)
{
var top=document.getElementById(id).style.top;
top=top.replace('px','');
top=int(top);
top=top+o;
top=top+'px';
document.getElementById(id).style.top=top;
}

Merci !

Je pense que ca peut marcher, mais je suis bloqué sur une seule chose je pense. A quoi correspond "o" dans les valeur que recoit la fonction?

Bon sinon je vais tripatouiller avec ca mais je pense que je devrais y arriver.

Le "o", c'est la valeur de l'incrémentation je crois...

Par contre, la fonction int() n'existe pas xavier...

C'est :

top=parseInt(top,10);

Bon, merci de la précision

En revanche, je n'arrive toujours pas a faire marcher ce fichu code.
Je vous le file tant qu'a faire.
Alors le css de la div a faire bouger:

#list {
	position: absolute;
	height: 800px;
	width: 98px;
	left: 1px;
        top: 1px;
	z-index: 2;
	overflow: hidden;
	padding-bottom: 5px;
	padding-top: 5px;
	background-image: url(../image/jpg-gif-png/8.8vertfonce_blanc.gif);
}

Le script pour faire bouger la div fourni par xavier:

function changertop(deplacement, list)
{
var top=document.getElementById("list").style.top;
top=top.replace('px','');
top=parseInt(top,10);
top=top+deplacement;
top=top+'px';
document.getElementById("list").style.top=top;
}

Et le bout du code html concernant la div "list" que je dois faire bouger a chaque clic sur le contenu de la div "bas". (A savoir, le blablabla sera remplacé par une image.)

<div id="listcontent">
  	<div id="list">
    	<div id="miniature1"><a href="#" onmouseover="emmeler() , changeMessage(1)" ><img src="../image/miniature/emmeler.png" /></a></div>
        <div id="miniature2"><a href="#" onmouseover="bonsplans() , changeMessage(2)" ><img src="../image/miniature/bonplan.png" /></a></div>
        <div id="miniature3"><a href="#" onmouseover="traverse() , changeMessage(3)" ><img src="../image/miniature/traverse.png" /></a></div>
        <div id="miniature4"><a href="#" onmouseover="porteouverte() , changeMessage(4)" ><img src="../image/miniature/porteouverte.png" /></a></div>
        <div id="miniature5"></div>
        <div id="miniature6"></div>
	<div id="miniature7"></div>
	<div id="miniature8"></div>
	<div id="miniature9"></div>
	<div id="miniature10"></div>
	<div id="miniature11"></div>
    </div>
	<div id="bas"><a href="#" onclick="changertop(70, list)">blablablabla</a></div>
  </div>

list n'est pas une variable... donc il faut l'entourer d'apostrophes.



d'ailleurs, vu que tu as changé cette ligne ça devrait marche quand même...

Ca n'est pas comme ça que tu dois utiliser son script, tu dois faire changertop('list',70) et laisser la fonction telle qu'il l'a faite.

Une autre version :

function spx(t)
{
    t=t.substring(0,t.length-2);
    t*=1;
    return t;
}
function bouge(id,o)
{
    var elt=document.getElementById(id);
    elt.style.top=(1+spx(elt.style.top))+'px';
}

<a href="#" onclick="bouge('list',70)">blablablabla</a>

Alors, Kyle Katarn, ton code marche ! Et j'en suis bigrement content ^^. Bon par contre j'ai pas forcément tout compris pourquoi ca marche, mais je vais m'y pencher de manière plus approfondie.
Edit: Rectfié ! Donc tout marche nickel. D'ailleurs je me suis rendu compte qu'on pouvait virer la variable "o" et l'argument 70 dans le html, la valeur du déplacement étant donnée dans la fonction bouge.
En revanche...pourrait tu m'expliquer a quoi sert la fonction spx ? Parce que sans, ca marche pas, bien entendu, mais avec, je vois pas vraiment a quoi ca sert ^^...Et je préfère comprendre plutot que d'appliquer bêtement.

Quand a ton code Xavier, soit je suis une tache de grande ampleur, soit il me manque des bouts de cerveau parce que j'y arrive pas. Je sais pas à quel niveau ca foire, mais ca marche pas...m'enfin, je vais de la même manière que pour le code de Kyle, l'éplucher et faire marcher cette connerie bon dieu.

C'est marrant parce que je me suis planté dans mon code (1 au lieu de o qui aurait permis de régler avec un paramètre l'incrément). Et spx enlève px. C'est comme .replace('px','') mais en utilisant substring() plus rapide, ensuite t*=1; transforme le texte t en nombre.

Est-ce qu'un parseInt() ne serait pas plus rapide Kyle ?

Hem, merci des précisions et désolé d'abuser de vous... Je cherche maintenant a "bloquer" mon code pour qu'il ne descende pas trop bas, et je pensais faire ca avec un if else, mais bon, je dois pas me servir de ce qu'il faut parce que ca n'a pas l'air de marcher...

Si vous êtes encore motivé merci d'avance.

Golmote > A écrire, oui c'est plus rapide
Sinon, il faut vraiment que ce soit un sacré code pour que j'optimise mon javascript. Après tout, on parle d'une action onclick...

Higanbana > Tu veux rajouter un maximum ?

var maximum=100;
function bouge(id)
{
    var elt=document.getElementById(id);
    elt.style.top=Math.min(maximum,1+spx(elt.style.top))+'px';
}

Citation : Kyle Katarn

Golmote > A écrire, oui c'est plus rapide

Mais pas à l'exécution ?

Tu comptes en créant des 'time' d'objets Date. Alors, moi je chronomètre entre 230 et 310 milliardièmes de secondes pour n*=1; et entre 240 et 340 milliardièmes de secondes our n=parseInt(n);

Donc, dans la moyenne, n*=1 est plus rapide mais les fourchettes se mêlent et on est en dessous de la microseconde, je pense qu'on peut se passer de ce détail de performances.

Ok. Merci pour l'info.