Votre question

onMouseOver / onMouseOut

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
17 Mai 2006 14:07:44

Bonjour tout le monde ! Voilà je vous expose le petit soucis auquel je suis confronté... J'ai une fonction onMouseOver / onMouseOut avec "image.jpg" et "image-over.jpg". Jusque là pas d'ennui. Seulement je cherche à faire en sorte que "l'image-over.jpg" chargée au passage de la souris reste visible après que le visiteur ai cliqué dessus. Comment faire ? ...

Merci de votre écoute :-D

Autres pages sur : onmouseover onmouseout

17 Mai 2006 18:57:46

Pourquoi ne faittu pas cela en CSS ? c'est tout de même plus simple. Bon oki pour que ca passe bien sous IE il faut qu'il y ai un lien mais bon c'est bien plus simple que du javascript.
a c 232 L Programmation
17 Mai 2006 19:00:10

onclick="la meme fonction que t'as mis pour onmouseover"

nan ?
Contenus similaires
17 Mai 2006 23:02:31

Tu penses que l'on peux combiner les deux fonctions ? Je vais essayer ca semble pas bête ... Pour ce qui est de la css, je m'en tient aux couleurs, style de texte, scrool barre et voilà mais si tu peux m'en dire un peut plus pourquoi pas ? si le résultat est le même !

En tout cas merci pour vos idées : ca m'éclaire déja un peu plus !! Je vous tient au courant !
17 Mai 2006 23:12:42

Nan, la faut faire un peu d'algo.

-au chargement tu créé une variable globale que tu fou à false
-onclick, tu passe la variable à true par ex, ce qui veut dire que tu a cliqué.
-onmouseover, tu change ton image
-onmouseout, tu vérifie si la variable globale est à true (si onclick a été fait), sinon tu change l'image.

en js, les globales c'est :
this.maVariable.

Capté ?
17 Mai 2006 23:47:13

Pas tout a fait ... Un exemple serait le bienvenue : je suis visuel ^^ :oops: 
a c 232 L Programmation
17 Mai 2006 23:52:49

J'avais pas vu le fonctionnement de nebuli, mais ouais, c'est peut-être comme ça qu'il veut sa réponse.


Quand tu cliques sur l'image, tu veux que ça fasse quoi ? que ça la laisse tout le temps à l'image "on mouse over" ??
17 Mai 2006 23:57:11

Voilà tout a fait !
17 Mai 2006 23:57:40

au début de ton script
juste apres ta balise <script ...>
tu mets
this.clique = false;

apres tu devra avoir les fonction qui seront éxécutés en fonction des action.

3 normalement

1 fonction que tu va executer au mouseover
1 au mouse out
1 au onclick

tu a deja les deux premieres normalement

tu rajoute une fonction que tu lancera au onclick

dans celle ci tu mets

this.clique = true;

dans la fonction qui corresponds au mouse out

tu rajoute une condition

if ( this.clique == false ) {
//ton code que tu avais deja pour changer l'image au mouse out
}

c'est pas compliqué, tu a 3 lignes à rajouter au code que tu a deja

desole je te fais pas la fonction entiere car je vais me coucher.

Essaie de comprendre par toi meme, sinon poste ton script js, je le modifirai demain si personne d'autre n'aura volé à ton secours....
18 Mai 2006 00:00:57

lol oki merci pour toute l'aide =) Demain boulot =/ alors je vais faire comme toi : je teste juste ce que tu m'as donné ! Un grand mercii encore !! et bonne nuit ;_)
18 Mai 2006 17:52:55

L'attention accordée au projet hier etait trop faible cause de la fatigue =/ Donc apres le boulot j'ai tenté de suivre tes indications le plus justement possible : sans réel succès à mon grand regrès ...

Je te fais donc parvenir le script ainsi que la balise onMouseOver / onMouseOut . Si le temps te le permet, essaye de donner quelques frappes de clavier dessus : carte blanche ... du moment que ca fonctionne mais j'ai entièrement confiance ;-)

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Pour le script s'en est fini fiouu (vive la syntaxe)
Et maintenant voilà une des balises onMouseOver/Out :

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('photos','','images/psd/boutton-photos-over.jpg',1)"><img src="images/psd/boutton-photos.jpg" name="photos" width="90" height="39" border="0"></a>

Si jamais il te manque quelque chose : la page et disponible sur le site que je fournis sur le forum (ici aussi)

Un grand merci d'avance !
18 Mai 2006 20:07:43

Gaggagag... j'aime pas dreamweaver... Enfin juste les comportements, c'est utile mais ca te ponds un code pourri mais qui fonctionne partout. A part ca dream est tres bien...

Je t'en ponds un nouveau bien plus compréhensible pour toi.
Maintenant je comprends pourquoi tu avait du mal à comprendre...

Laise moi 20 min...
18 Mai 2006 20:20:31

Ohhh Mercii !! Je n'en attendais pas autant ... C'est super sympa de ta part !
Et pour ce qui est de dreamweaver c'est vrai qu'il est simple à utiliser ce qui explique mon choix pour ce logiciel. Je suis tout a fait d'accord avec toi au sujet de la génération d'un code disons "flou" ^^

Encore un grand merci !!
18 Mai 2006 20:34:37

  1. <script type="text/javascript">
  2.  
  3. this.clic = false;
  4.  
  5. function updateOut(src, id){
  6. if (this.clic == false) {
  7. document.getElementById(id).src = src;
  8. }
  9. }
  10.  
  11. function updateOver(src, id){
  12. document.getElementById(id).src = src;
  13. }
  14.  
  15. function updateClic(id){
  16. this.clic = true;
  17. }
  18.  
  19. </script>
  20.  
  21. <a href="#">
  22. <img src="img1.jpg"
  23. onMouseOut= "updateOut('img1.jpg', 'id de ton image')"
  24. onMouseOver="updateOver('img2.jpg', 'id de ton image')"
  25. onclick= "updateClic('id de ton image')"
  26. id="id de ton image">
  27. </a>


Voili voilou le script pour une seule image.
18 Mai 2006 20:40:54

  1. <script type="text/javascript">
  2.  
  3. this.tableId = ["idImage1"]; // contiendra les id de tes images, rajoutes d'autres id en les séparants par des virgules ex : ["idImage1", "idimage2"];
  4. this.tableClic = [false]; // pour chaque id dans la table precedente rajoute un false ex : [false, false];
  5.  
  6. function updateOut(src, id){
  7. if (this.tableClic[id] == false) {
  8. document.getElementById(this.tableId[id]).src = src;
  9. }
  10. }
  11.  
  12. function updateOver(src, id){
  13. document.getElementById(this.tableId[id]).src = src;
  14. }
  15.  
  16. function updateClic(id){
  17. this.tableClic[id] = true;
  18. }
  19.  
  20. </script>
  21.  
  22. <a href="#">
  23. <img src="img1.jpg" width=50 height=50
  24. onMouseOut= "updateOut('img1.jpg', 0)"
  25. onMouseOver="updateOver('img2.jpg', 0)"
  26. onclick= "updateClic(0)"
  27. id="idImage1">
  28. </a>
  29. <!-- le 0 corresponds à l'indice de ton id dans le tableau, si tu a une deuxieme element, alors ce sera 1 -->


Et voila le code si tu comptes l'utiliser sur plusieurs images.
J'espere que j'ai assez commenté.
18 Mai 2006 21:36:24

Un tres tres grand merci !! (k) (l) ^^ Si un jour besoins d'un service sur photoshop tu sais ou me trouver ...

Merci encore !! (je me répète)
18 Mai 2006 23:33:36

Ca marche au moins ?



Au fait pour photoshop j'ai pas besoin d'aide ;-) Mais merci quand meme...

Petit bémol, ce script ne respecte que les navigateurs qui sont compatible dom, cad firefox, ie6&7, opera, safari etc...
Contenus similaires
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS