Sujet Précédent Sujet Suivant

Javascript

Fermé
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 - 8 juil. 2009 à 21:04
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 - 13 juil. 2009 à 17:04
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-https://twitter.com/ceosammassey

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>

11 réponses

Réponse 1 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
8 juil. 2009 à 21:53
help
0
Réponse 2 / 11
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
8 juil. 2009 à 22:46
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!!!
0
Réponse 3 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
8 juil. 2009 à 23:54
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) :

https://twitter.com/ceosammassey
0
Réponse 4 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
9 juil. 2009 à 00:00
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).
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
9 juil. 2009 à 09:24
Pas d'idée ?
0
Réponse 6 / 11
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
9 juil. 2009 à 10:14
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.
0
Réponse 7 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
9 juil. 2009 à 11:31
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>
0
Réponse 8 / 11
Judes-Emile Bornes IV Messages postés 123 Date d'inscription dimanche 6 avril 2008 Statut Membre Dernière intervention 23 février 2010 12
9 juil. 2009 à 12:06
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.
0
Réponse 9 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
10 juil. 2009 à 10:45
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>
0
Réponse 10 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
13 juil. 2009 à 16:58
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...
0
Réponse 11 / 11
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
13 juil. 2009 à 17:04
Bon j'arrive pas à rajouter le code : c'est trop long.

Je vous mettrait le lien ce soir...
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
java activée mais ne fonctionne pas !
chating -
chating -

4 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses