Bon je suis allé voir le tutoriel j'ai compris au début, mais je me suis perdu en chemin... j'ai rien compris au reste.

Donc j'ai donc modifié le script :

<script type="text/javascript"> 
<!--
var dragged = null; //L'élément en cours de drag
//Lorsque dragged = null, il n'y a rien en cours de déplacement
 
 
function start_drag(objet)
{
  dragged = objet; //On le place comme objet en cours
  event.returnValue = false; //Pour Internet Explorer
  if( event.preventDefault ) event.preventDefault(); // Pour mozilla, chrome, opera etc...
}
 
function drag_onmousemove(event)  //Lorsque la souris se déplace
{
  if( dragged ) //si il n'y a pas d'élément en cours de déplacement, inutile de le déplacer  
  {
    var x = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
	var y = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
	x -= dragged.offsetWidth / 2; //On décale vers la gauche, donc -
	y -= dragged.offsetHeight / 2;
    dragged.style.position = 'absolute';
    dragged.style.left = x + 'px';
    dragged.style.top = y + 'px';
  }
}
 
function drag_onmouseup(event)  //Lorsque le bouton de la souris est relâché
{
  dragged = null; //On arrête le drag&drop
}
 
//Ma petite fonction "magique" pour ajouter des évènements
function addEvent(obj,event,fct)
{
  if( obj.attachEvent)
     obj.attachEvent('on' + event,fct);
  else
     obj.addEventListener(event,fct,true);
}
 
//On ajoute les deux évènements avec la méthode
addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);
--></script> 
<style type="text/css"> 
#fenetre
{
	position: absolute;
	width: 14px;
	height: 28px;
}
 
 
.barre
{
	width: 14px;
	height: 30px;
}
</style> 
	<script type="text/javascript"> 
 
	</script>

Voila mais mon curceur ce déplace sur toute la fenete. Ce que je veut est limité a 30px de hauteur et 100px de largeur.

Mais je n'y arrive pas, pouvez vous m'expliquer s'il vous plaît ? Merci !

Tu crées un div d'une certain taille (La taille de ta barre).
Tu le met en position relative.
Tu met une image à l'intérieur qui fera office de curseur en position absolute, avec:
si top=0 alors ça vaux "10" si top=(La longueur de ta barre) ça vaux 50.

En suite tu mets un événement onmousedown sur le curseur qui met "true" dans une variable.

Puis une fonction qui récupère les coords de la souris lorsqu'elle bouge, si la variable précédente est true, alors tu déplaces curseur de combien la souris bouge. En fixant les limites de zones

Dans une variable tu stocks la position actuelle du curseur, que t'incrémente, ou décrémente lorsque la souris bouge.

Et au fur et a mesure, t'écris la valeur obtenu dans un input en type="hidden"

Il y a un autre moyen : utiliser des barres de scroll. C'est peut-être moins esthétique, mais je le signale quand même car c'est beaucoup plus simple au niveau du code

Le code html :

Valeur de la jauge : <input type="text" id="value" style="width: 75px;" value="0" />
<div id="jauge" onmouseover="checkValue(this.id, true);" onmouseout="checkValue(false, true);">
	<div>&nbsp;</div>
</div>

Le CSS pour obtenir la barre de scroll :

div#jauge{
	width: 200px;
	overflow-x: scroll;
}
	div#jauge div{
		height: 1px;
		width: 700px;
		overflow-y: hidden;
	}

Et le code js :

var jauge = false;
function checkValue(id, start){
	if(start) jauge = document.getElementById(id);
	if(jauge){
		//Calcul de la valeur de la jauge (les valeurs brutes vont de 0 à 500, 500 étant la différence de largeur entre les deux div
		var value = Math.round(jauge.scrollLeft/5);
		document.getElementById('value').value = value;
		setTimeout('checkValue()', 10);
	}
}

Résultat en mettant l'input en hidden et en affichant le résultat dans une zone non éditable : http://twiip.ch/dev/jauge.php

C'est effectivement moins esthétique

Citation : Tiller

Tu crées un div d'une certain taille (La taille de ta barre).
Tu le met en position relative.
Tu met une image à l'intérieur qui fera office de curseur en position absolute, avec:
si top=0 alors ça vaux "10" si top=(La longueur de ta barre) ça vaux 50.

En suite tu mets un événement onmousedown sur le curseur qui met "true" dans une variable.

Puis une fonction qui récupère les coords de la souris lorsqu'elle bouge, si la variable précédente est true, alors tu déplaces curseur de combien la souris bouge. En fixant les limites de zones

Dans une variable tu stocks la position actuelle du curseur, que t'incrémente, ou décrémente lorsque la souris bouge.

Et au fur et a mesure, t'écris la valeur obtenu dans un input en type="hidden"

Merci d'avoir répondu !

Il y a un petit problème lol je ne connais strictement rien au javascript

Je connais le HTML et le PHP mais javascript ... trop compliqué ...

Y aurai t-il un tuto qui explique comment faire cela ?

Sinon pouvez vous me donné le code

Si ce n'est pas trop demandé.


Effectivement en HTML ... ce n'est pas très estétique, et je voudrais quand même un un site un minimum pro ...

Merci de votre aide !

J'avais bien compris que tu ne connaissais pas le javascript, c'est pour cela que j'ai tout de même poster la solution "simple"
Pour une solution plus esthétique avec un système de drag&drop sur un curseur, il va te falloir apprendre le javascript correctement, je crois qu'il y a un tuto js parmi les tutoriels non officiels.

ARG je veut pas de nouveau bouffer du tuto ... lol

De plus il n'est pas fait par matéo ... bon je vais quand même le faire... il est grand ...

Lol

Bon bah en tout cas je vous dit merci !

Si ce que tu veux, c'est un code tout prêt et sur mesure, c'est plutôt sur le forum de recrutement que tu devrais poster.

Bon je suis allé voir le tutoriel j'ai compris au début, mais je me suis perdu en chemin... j'ai rien compris au reste.

Donc j'ai donc modifié le script :

<script type="text/javascript"> 
<!--
var dragged = null; //L'élément en cours de drag
//Lorsque dragged = null, il n'y a rien en cours de déplacement
 
 
function start_drag(objet)
{
  dragged = objet; //On le place comme objet en cours
  event.returnValue = false; //Pour Internet Explorer
  if( event.preventDefault ) event.preventDefault(); // Pour mozilla, chrome, opera etc...
}
 
function drag_onmousemove(event)  //Lorsque la souris se déplace
{
  if( dragged ) //si il n'y a pas d'élément en cours de déplacement, inutile de le déplacer  
  {
    var x = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
	var y = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
	x -= dragged.offsetWidth / 2; //On décale vers la gauche, donc -
	y -= dragged.offsetHeight / 2;
    dragged.style.position = 'absolute';
    dragged.style.left = x + 'px';
    dragged.style.top = y + 'px';
  }
}
 
function drag_onmouseup(event)  //Lorsque le bouton de la souris est relâché
{
  dragged = null; //On arrête le drag&drop
}
 
//Ma petite fonction "magique" pour ajouter des évènements
function addEvent(obj,event,fct)
{
  if( obj.attachEvent)
     obj.attachEvent('on' + event,fct);
  else
     obj.addEventListener(event,fct,true);
}
 
//On ajoute les deux évènements avec la méthode
addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);
--></script> 
<style type="text/css"> 
#fenetre
{
	position: absolute;
	width: 14px;
	height: 28px;
}
 
 
.barre
{
	width: 14px;
	height: 30px;
}
</style> 
	<script type="text/javascript"> 
 
	</script>

Voila mais mon curceur ce déplace sur toute la fenete. Ce que je veut est limité a 30px de hauteur et 100px de largeur.

Mais je n'y arrive pas, pouvez vous m'expliquer s'il vous plaît ? Merci !

UP