stop lorsque souris survol l'image

Question

Bonjour, je souhaite que mes images se chargent l une par-dessus les autres et chacune s'arrête au survol de la souris et passe à l image qui suit quand on retire la souris le code que j ai mis en place est le suivant: Entre balises head: Entre balises body :

que faut il rajouter?? merci pour votre attention a ce mss ama Configuration: Windows 7 / Firefox 3.6.12

coeus · Answer

Bonjour !

Mets ton setTimeout() dans un if() qui détecte si le survol de souris a lieu. Ainsi l'appel de la fonction a lieu uniquement si le survol est présent.

Pour détecter le mouseover :
element.onmouseover = doSomething;

http://www.quirksmode.org/js/events_mouse.html


Et après mets un autre événement onmouseout, de la même manière, pour passer à l'image suivante.

ama · Answer

bonsoir
et merci tout d abord de vos réponses
seulment je ne sais où mettre ces éléments / dans le body dans le head...ni comment
pouvez vous me préciser davantage les emplacements et leur contenu
 merci
je continue a chercher avec vos pistes

ama · Answer

je n ai toujours pas trouver pouvez vous m aider.
need help

ama · Answer

bonjour à vous 
 j en suis je crois toujours au même point.... 
comment est il possible d 'arrêter l image au survol de la souris et éviter aussi 
qu'au click de la souris  le diaporama revienne au départ?
 merci d avance pour vos reponses
ama

monkey_monk · Answer

Bonjour,

le mieux serait de créer une classe... ou de passer tes setTimeOut dans des variables "générales" histoire de pouvoir les détruire si besoin !

Il te faudrait bien abstractiser les fonctions "play" et "stop" qui doivent respectivement créer le timeout et le détruire.

Une variable de position (c-à-d. variable permettant de savoir sur qu'elle image nous somme) serait aussi la bienvenue.

En gros, tâche de bien diviser les rouages de ton script... ça sera tout de suite plus facile ! ;)

coeus · Answer

OK je vais essayer de préciser...
Je ne vais pas te marquer le code exact, mais ça devrait ressembler à ça :

Au lieu de 
setTimeout("defilimg()",4000);
mets :


e = document.getElementById("id_de_element_qui_detecte_le_mouseover");
e.onmouseover = "themouseover = true;"
if (themouseover == false) {
setTimeout("defilimg()",4000);
}

themouseover est une variable qui contient true ou false selon que le mouseover est en vigueur ou non.
Là je ne sais pas si ma ligne e.onmouseover = "themouseover = true;" va bien fonctionner, je n'ai pas les moyens de la tester. Au pire, essaie des syntaxes alternatives : avec ou sans guillemets, appelle une fonction qui contient l'instruction au lieu de passer l'instruction directement, etc. Tu devrais pouvoir te débrouiller.

Après, fais un e.onmouseout pour remettre le défilement en marche.

Pour éviter que la diapo revienne au départ, enregistre quelque part, hors de la fonction, le numéro d'image auquel le défilement est rendu ; ainsi quand il repartira, tu peux récupérer cette variable globale.

Je t'encourage à suivre les conseils de monkey_mink si tu peux, moi c'est sûr que je te donne la solution la plus facile mais un peu boboche aussi...

Est-ce que ça te paraît plus clair ? Il y a peut-être des détails que j'ai oubliés, mais ça te donne les grandes lignes...

ama · Answer

bon désolée mais je ne comprends pas décidément 
j ai effectivement remplacé 
settimeout.... et l image un apparait  mais rien d autre/ pas de diaporama
j ai tenté d'autres alternatives seulement /...échec et in compréhension
je ne sais si votre patience va être ....j
si je suis à la lettre les instructions ca donne cette formule qui me renvoie à une img fixe 

function defilimg()
	{
/*modif number*/if (a == 10)
{a = 0;}
if (version >= 3)
	{document.defil.src = imgPath[a];
tempo3 = e = document.getElementById("id_de_element_qui_detecte_le_mouseover");
e.onmouseover = themouseover = true;
if (themouseover == false) 
{
setTimeout("defilimg()",1000);
}
a++;}     /*je ne comprends pas bien l emplacement de cette donnée*/
	}

Peut on une nouvelle fois relever les erreurs ou m envoyer des indications suplémentaires
 désoleé mais je suis super mega débutante 
bye et merci de vos réponses

ama · Answer

bonjour j ai maintenant cette fonction / ca va un peu mieux seulement je souhaite arrêter sur l image survolée et non sur l image[ 3] peut on me donner une nouvelle m aider car là je me galère merci pour vos reponses ama

ama · Answer

bonsoir voici, où j en suis le diaporama s 'arrête sur une "img X " lors du survol de la souris grâce à ce new script je souhaiterais que le diaporama continue à partir de l' "img X " pointée auparavant Seulement lorsque je retire la souris, le diaporama recommence à partir de l img précisée en gras ci dessous entre entre balise body: aaabbb

autre part je souhaiterais que le diaporama s enclenche automatiquement merci pour votre aide ama

coeus · Answer

Salut !
Tu as bien progressé durant le weekend ! :-)

Pour que le diaporama reprenne à l'image X et non à la 5 comme dans ton exemple... Il faudrait que ta variable numero soit définie en-dehors des fonctions, en global. Ainsi tu pourrais dans ta balise img appeler la fonction par onmouseout="diaporama('imgx', promos, numero); .

Définis numero de telle sorte qu'elle égale à 0 ou 1 au chargement de la page, puis qu'elle évolue librement jusqu'au prochain "refresh".

Et pour que la diapo s'enclenche automatiquement, remplace <body> par

<body onload="diaporama('imgx', promos, numero);">

OU, alternative (que j'utilise mais on te dira peut-être que ça va à l'encontre des normes W3C, je n'en sais rien), entre ton </body> et ton </html>, mets un petit :

<script type="text/javascript">diaporama('imgx', promos, numero);</script>

Ça devrait faire l'affaire.
Donne m'en des nouvelles ! ;-)

ama · Answer

bonsoir merci pour tes réponses j y suis presque , non? Seulement encore des énigmes (en gras souligné): body: aaabbb

je ne sais sous quelle forme afficher la variable numéro avec fonction 'refresh(?)' je pense que le s changements sont a faire a ces niveaux je tente en vain.... peux u encore m éclairer? merci pour le diapo automatique ama

coeus · Answer

Ok en effet on y est presque ;-)

La variable numero, tu la déclares seulement une fois dans ton <head>, avant les appels de fonction, sous la forme :
var numero = 1;
Sans plus. Ça devrait suffire. Elle prendra la valeur que tu veux à chaque refresh ou chargement de page.

Le : if (numero == liste.length) { numero = 0; }
est très bien.

Sinon, je ne sais pas si tu as d'autres incertitudes ou questions ? N'hésite pas à me dire si quelque chose ne fonctionne pas comme tu voudrais ! ;-)

ama · Answer

salut Bon la une nouvelle fois ça bloque J ai bien tenté quelques alternatives seulement cela ne fonctionne pas L image revient toujours à la même image J ai noté les différents paramètres en les variants à tout hasard pour trouver !!!!......... en vain/// Voici le résultat , je pense mes erreurs en gras Balise head: balise : aaabbb

Je continue à chercher , et si as une solution je serais ravie Merci pour ton accompagnement en tous les cas ama

coeus · Answer

Je trouve ça un peu bizarre. J'ai voulu tester, alors j'ai essayé d'adapter ton script. Voici la page entière que ça me donne :

Hello

Et tout fonctionne. Note les choses mises en gras, ce sont les corrections majeures que j'ai apportées à ton script. Vois si tu ne peux pas trouver ce qui cloche à partir de ça... Je pense que le window.numero = numero; était le point majeur. J'espère que ça aide !

ama · Answer

merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci merci.......................................
comment dire
ça roule / 
bien à vous

ama · Answer

bonjour
 juste une dernière chose
Peut on protéger contre la copie les images /copie coller/
j ai tenté une fenêtre spam
 sans résultat.?
 ama

coeus · Answer

Tu veux dire empêcher les gens de télécharger tes images ?
Ou les empêcher de mettre des images en copier-coller dans les champs texte ?

Au premier, non. Tu n'empêcheras pas ça, toutes les méthodes "éprouvées" comme empêcher le right-click sont très facilement contournables.

Et au deuxième, je ne vois pas comment on peut faire ça, mais si c'est possible, je pense que ça doit être évitable assez facilement.

Peux-tu préciser ta question, que je sois sûr de comprendre ? ;-)

ama · Answer

bonjour
j avais introduit cette fonction sur un  autre site  js

function ejs_nodroit()
{alert('copyright verbotten');
return(false);}

document.oncontextmenu = ejs_nodroit;

afin q u'au click droit     une alerte s affiche 
Cette fonction  ne fonctionne pas sur ce site 
J e pense de toutes façons que je vais paramétrer à faible  résolution les'images et ce sera suffisant/
Aussi je vais chercher maintenant comment au click de l image, on peut passer  à la suivante plus rapidement.
si tu as une solution je suis tjs là 
et je vais chercher aussi
ama
bye

coeus · Answer

Tu peux ajouter à ton script :


function myClick() {
window.speed = 100;
}

function noClick() {
window.speed = 500;
}

var speed = 500;
document.getElementById("ton_image").onmousedown = "myClick()";
document.getElementById("ton_image").onmouseup = "noClick()";

et puis tu remplaces cette ligne :

timer = window.setTimeout("diaporama('"+id+"', '"+liste+"', "+numero+")", 500);

par celle-ci :


timer = window.setTimeout("diaporama('"+id+"', '"+liste+"', "+numero+")", speed);


Je n'ai pas testé le code, il se peut qu'il y ait des ajustemenst à apporter, mais ça te donne les grandes lignes. Tu devrais pouvoir l'adapter à tes besoins ;-)
N'oublie pas de passer la variable speed à ta fonction diaporama().

Je pense que ça fait le tour. Laisse-moi savoir si ça marche.

ama · Answer

bonsoir j ai tenté et échoué mon script est le suivant et le click sur l img ne permet pas de passer a img suivante Si tu veux encore me filer un coup de pouce _ cool _ si non , je ne t en vouidrais pas :

aaabbb

pour ma part je vais me coucher bonne nuit

ama · Answer

ok_ ça fonctionne comme sur des roulettes................////////////////
merci à toi  et pour tout 
bye

Stop lorsque souris survol l'image

21 réponses

Discussions similaires

Newsletters