High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Javascript

Dernière réponse le 13 jui 2009 à 17:04:09 Fetide68, le 8 jui 2009 à 21:04:59 
 Signaler ce message aux modérateurs

Bonjour, j'ai adapté un javscript qui permet de faire une sorte de "règle coulissante" sur laquelle se déplace un objet (une div, une image,...) en fonction des déplacements de la souris. L'objectif est de placer un menu avec des onglets juste en dessous et que lorsque l'on rentre dans la zone des onglets, le pointeur se déplace.

Actuellement, le pointeur dépasse la zone (border-top rouge dans mon exemple) et le scripte s'exécute en permanence et non pas seulement quand je rentre dans la zone des onglets (qui n'est pas encore créée - j'ai mis un div vide à la place).

Testez plutôt ce scripte, vous verrz mieux ou je veux en venir... (Si possible, mettez des commentaires dans vos suggestions. Je fais ça pour m'entraîner et non pour des fins commerciaux) :

<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/

var x = 0;
var dist=-0
var vit=5
var total=0
var mess
var posX = 0;
var posY = 0;
var animate = true;

var imag1 = "illus/fleche.gif";

if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = depl_img;
}
function Pos_Souris(p)
{
x = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
}

function depl_img()
{
if (document.getElementById && animate)
{
document.getElementById("idjoe").style.left = posX+dist;
vitess = setTimeout("depl_img()",10)
posX = posX+((x-(posX+200))/vit);
if(posX+dist!=0)
{
imag2='illus/fleche.gif';
dist=distg
}
else
{
imag2='illus/fleche2.gif';
dist=distd
}
if(imag2!=imag1)
{
document.joe.src=imag2;
imag1=imag2;
}
}
}


if(document.getElementById)
{
document.write('<body style="margin-left: 20%; margin-right: 20%; margin-top: 0px;">');
document.write('<div style="width: 100%; border-top: red solid 2px;">');
document.write('<div id="grande" style="position: relative;">');
document.write('<div id="idjoe" style="position: relative; width:10px; height: 10px; background: red;"></div>');
// document.write('<img src="illus/fleche.gif" name="joe" border="0" hspace="0" vspace="0" >');
document.write('</div>');
document.write('</body>');
}

//-->
</script>

Configuration: Mac OS X
Safari 530.17

Meilleures réponses pour « Javascript » dans :
Javascript - Les événements Voir Qu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Les variables Voir Le concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - Introduction au langage Javascript Voir Qu'est-ce que le Javascript? Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des...
Javascript - Convertisseur d'unités de mesures scientifiques Voir
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
YouTube - Vous avez désactivé JavaScript VoirProblème Lorsque vous naviguez sur certains sites, tels que YouTube, ceux-ci affichent le message d'erreur suivant : Vous avez désactivé JavaScript ou bien vous possédez une ancienne version d'Adobe Flash Player. Téléchargez la dernière version...
Javascript - L'objet Date VoirLes particularités de l'objet Date L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. La...
Javascript - L'objet window VoirLes particularités de l'objet window L'objet window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web, il contient donc : l'objet document: la page en elle-même l'objet location: le lieu de...
Javascript - Les tableaux VoirIntroduction à la notion de tableau Les variables de Javascript ne permettent de stocker qu'une seule donnée à la fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses données, le concept de variable se révéle parfois...
Posez votre question Répondre

1

Fetide68, le 8 jui 2009 à 21:53:47

Help

   
Répondre à Fetide68

2

Judes-Emile Bornes IV, le 8 jui 2009 à 22:46:32

Il faudrait que tu utilises l'evenement onmouseover ciblé sur le div des onglets.

sinon pour moi sous firefox mac rien ne bouge, même en créant les fichiers de flèches et en les plaçant dans un dossier "illus"

ce que je ne comprends pas c'est tes dist=distg et dist=distd... tes variables distg et distd ne sont pas déclarées!!!

   
Répondre à Judes-Emile Bornes IV

3

Fetide68, le 8 jui 2009 à 23:54:38

Chez moi tout marche, sous FireFox, Safari et j'ai même pu tester sous IE.

J'ai supprimé toutes les variables dont je pouvais me passer.

Voilà le code d'origine. Je voudrais juste que ça bouge dans un sens et que ça ne dépasse pas une certaine limite (un cadre div dont les tailles sont définies) :

http://www.jejavascript.net/imagsouris1.php

   
Répondre à Fetide68

4

Fetide68, le 9 jui 2009 à 00:00:04

Voilà un bel exemble, sauf que l'évènement ici est au click : https://www.gandi.net/hosting/buy/static (comment ont-ils fait ?) -> On ne peut visualiser le code source (https).

   
Répondre à Fetide68

5

Fetide68, le 9 jui 2009 à 09:24:49

Pas d'idée ?

   
Répondre à Fetide68

6

Judes-Emile Bornes IV, le 9 jui 2009 à 10:14:57

Ils ont probablement fait ça avec jQuery, mais c'est plus sympa d'avoir un script comme celui que tu as trouvé.

donc si tu respectes mieux le script que tu as trouvé, et que tu encapsules le tout dans une fonction que tu appelles via l'évenement onmouseover tu devrais y arriver.

exemple

function bougercurseur () {
ton script
}

et entre body et /body

<div id="containeronglets" onmouseover="return bougercurseur();"></div>

je suis pas sur que ça marche sinon il faut déclarer l'event onmouseover dans le javascript.

   
Répondre à Judes-Emile Bornes IV

7

Fetide68, le 9 jui 2009 à 11:31:17

J'ai tout essayé, ça marche pas :

J'ai tout essayé, ça marche pas :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<script>

var x = 0;
var y = 0;
var dist=-0
var vit=10
var posX = 0;
var posY = 0;
var animate = true;
var imag1 = "illus/fleche.gif";


//function bouger()
//{
if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = depl_img;
}
//}

function Pos_Souris(p)
{
x = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? p.pageY : event.y+document.body.scrollTop;
}

function depl_img()
{
if (document.getElementById && animate)
{
document.getElementById("idjoe").style.top = 0;
document.getElementById("idjoe").style.left = posX+dist;
vitess = setTimeout("depl_img()",10)
posX = posX+(((x-posX)+10)/vit);
posY = posY+(((y-posY)+10)/vit);
}
}


</script>

<body style="width: 1024px; margin: auto; margin-top: 0px;">
<div style="position: relative; width: 1024px; height: 100px; background: blue;" onmouseover="bouger();">
<div id="idjoe" style="position: relative; width: 50px; height: 50px; color: blue;"><div id="joe" style="width: 20px; height: 20px; background-color: red;"></div></div>
</div>
</body>

   
Répondre à Fetide68

8

Judes-Emile Bornes IV, le 9 jui 2009 à 12:06:22

Essaye déjà d'écrire le div direct dans le html sans passer par javascript, et de lui donner un id

<div id="containercurseur" style="position: relative; width: 1024px; height: 100px; background: blue;">

ensuite tu rajoutes dans le javascript:

if (document.ready) {
var containercurseur = document.getElementById('containercurseur');
containercurseur.onmouseover = bouger();
}

function bouger() {
le code que tu as trouvé ici
}

je suis pas sûr de moi du tout là, j'y connais peu en javascript.

   
Répondre à Judes-Emile Bornes IV

9

Fetide68, le 10 jui 2009 à 10:45:23

Ca ne fonctionne toujours pas. Voilà le script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<script>

if (document.ready) {
var containercurseur = document.getElementById('containercurseur');
containercurseur.onmouseover = bouger();
}


function bouger()
{
var x = 0;
var y = 0;
var dist=-0
var vit=10
var posX = 0;
var posY = 0;
var animate = true;
var imag1 = "illus/fleche.gif";

if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = depl_img;
}

function Pos_Souris(p)
{
x = (navigator.appName.substring(0,3) == "Net") ? p.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? p.pageY : event.y+document.body.scrollTop;
}

function depl_img()
{
if (document.getElementById && animate)
{
document.getElementById("idjoe").style.top = 0;
document.getElementById("idjoe").style.left = posX+dist;
vitess = setTimeout("depl_img()",10)
posX = posX+(((x-posX)+10)/vit);
posY = posY+(((y-posY)+10)/vit);
}
}
}

</script>

<body style="width: 1024px; margin: auto; margin-top: 0px;">
<div id="containercurseur" style="position: relative; width: 1024px; height: 100px; background: blue;">
<div style="position: relative; width: 1024px; height: 100px; background: blue;" onmouseover="bouger();">
<div id="idjoe" style="position: relative; width: 50px; height: 50px; color: blue;">
<div id="joe" style="width: 20px; height: 20px; background-color: red;"></div>
</div>
</div>
</div>

</div>
</body>

   
Répondre à Fetide68

10

Fetide68, le 13 jui 2009 à 16:58:13

Voilà une solution, pas simple à mon goût vu que j'ai rien compris et que la moitié voire plus est inutile... Si quelqu'un a des suggestions pour améliorer le code (pour avoir le même résultat). J'attends donc une proposition avant de mettre le post en résolu...

   
Répondre à Fetide68

11

 Fetide68, le 13 jui 2009 à 17:04:09

Bon j'arrive pas à rajouter le code : c'est trop long.

Je vous mettrait le lien ce soir...

   
Répondre à Fetide68
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net