Rollover, clike et calque ??

Rollover, clike et calque ?? - HTML/CSS - Programmation

Marsh Posté le 31-07-2002 à 19:09:38    

Hello,  
 
Voila j'ai un probleme:  
 
J'ai une image qui a un rollover quand je passe la souris dessus donc avec un OnMouseOver et un OnMouseOut.
De plus quand je passe sur cette image, elle fait apparaitre un calke et quand je ressort de l'image elle fait disparaitre ce meme calque.  
Le probleme arrive :  
je voudrais ke quand je clike sur mon image l'etat OnMouseOver reste et que le OnMouseOut ne se fasse plus mais que si je ne clike pas le OnMouseOver s'effectue qd meme.  
Comment je peut faire cela ??  
 
merci


Message édité par Phive le 01-08-2002 à 09:46:47

---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 31-07-2002 à 19:09:38   

Reply

Marsh Posté le 31-07-2002 à 19:30:05    

Bah il suffit de créer une fonction qui est appelée par un évènement onclick et qui met un flag à VRAI. Ensuite dans ta fonction appelée par onmouseout tu vérifies si le flag est à VRAI. S'il est vrai tu ne masques pas le calque, sinon tu le masques.

Reply

Marsh Posté le 31-07-2002 à 21:10:37    

Ok je vais voir ca...demain je vous mets ce que j'ai deja fais
 
Merci  :)


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 01-08-2002 à 08:18:36    

euh au fait et comment je peux definir un variable de ce type c'est a dire qui va etr u par tout le document?
 
Voila ce que j'ai:
Mon image:

Code :
  1. <img name=\"img1\" src='../graph/carre.gif' OnMouseOver=\"img1.src='../graph/carredessus.gif'; document.all['info'].style.display='none'; document.all['adaincourt'].style.display='block'\" OnMouseOut=\"img1.src='../graph/carre.gif'; document.all['info'].style.display='block'; document.all['adaincourt'].style.display='none'\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='../graph/carredessus.gif'; document.all['adaincourt'].style.display='none'\">


 
Mon Onclick doit etre comme ca :

Code :
  1. Onclick=\"img1.src='../graph/carredessus.gif'; document.all['info'].style.display='none'; document.all['adaincourt'].style.display='block'\"


 
Donc si jai bien compris, il faudrait ke je creer une fonction ki soit appeler par le onclick et qui change une genre de variable globlal puis apres j'en fais le test dans mon OnMouseOut. C'est bien ca?
 
Par exemple:
Fonction appeler par le Onclick :

Code :
  1. Function test()
  2. {
  3. var test = 1;
  4. }


Apres mon onclick devient ca :

Code :
  1. Onclick=\"img1.src='../graph/carredessus.gif'; document.all['info'].style.display='none'; document.all['adaincourt'].style.display='block';test()\"


et mon OnmouseOut comme cela:

Code :
  1. OnMouseOut=\" if(test!=1){img1.src='../graph/carre.gif'; document.all['info'].style.display='block'; document.all['adaincourt'].style.display='none'}\"


 
Alors c'est bien ca?
désolé je suis vraiment pas tres bon en JS :D


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 01-08-2002 à 09:46:19    

en fait ca marche bien mais il memets une erreur sur la page.
ca peut venir d'ou?
 
Ps: ne fait pas atention au "\" car je suis en php donc je suis obliger de foutre ces quote
 
Euh j'ai encore une question a propos de calke:
J'ai 30 calke sur ma page, est ce kil est possible de les rendre tous invisible d'un coup car je vais pas faire ca 30x qd meme:

document.all['calque1'].style.display='none';
document.all['calque2'].style.display='none';
...


Message édité par Phive le 01-08-2002 à 09:49:19

---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 01-08-2002 à 10:00:46    

Bon déjà tu mets trop de chose dans tes onMouseOut et onMouseOver... c'est pas très lisible.
 
Pour avoir une variable gloable en JS il faut la déclarer en dehors des fonctions.
 

Code :
  1. var test = true;
  2. Function mouseover(img) {
  3.   if (test) {
  4.     img.src='../graph/carredessus.gif';
  5.     document.all['info'].style.display='none';
  6.     document.all['adaincourt'].style.display='block'
  7.   }
  8. }
  9. Function mouseout(img) {
  10.   if (test) {
  11.     img.src='../graph/carre.gif';
  12.     document.all['info'].style.display='block';
  13.     document.all['adaincourt'].style.display='none'
  14.   }
  15. }
  16. Function click() {
  17.   if (test) {
  18.     test = false;
  19.   } else {
  20.     test = true;
  21. }


 
Donc, en gros, si 'test' est vrai les fonctions 'mouseout' et 'mouseover' seront opérationnelles et le rollover fonctionnera. Si 'test' est faux le rollover ne fonctionne plus.
La fonction 'click' est appelée par onClick et fonctionne comme un interrupteur : si on clique une fois 'test' passe à false si on clique une deuxième fois 'test' repasse à true.
 
Tu appelles ensuite tes fonctions dans <img> :

Code :
  1. <img name=\"img1\" src='../graph/carre.gif' OnMouseOver=\"mouseover(this);\" OnMouseOut=\"mouseout(this);\" OnClick=\"click();\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='../graph/carredessus.gif'; document.all['adaincourt'].style.display='none'\">


Message édité par gm_superstar le 01-08-2002 à 10:01:44
Reply

Marsh Posté le 01-08-2002 à 10:06:17    

mouais je vois a peut pres mais comme je l'ai dis juste avant j'ai 30 calque comme ca je vais pas faire 30 fonctions??
 
et est ce que tu sais si il y possibilite de cacher tout les calke d'un page en 1 coup ?


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 01-08-2002 à 10:34:59    

Phive a écrit a écrit :

mouais je vois a peut pres mais comme je l'ai dis juste avant j'ai 30 calque comme ca je vais pas faire 30 fonctions??



Bah, dans ce cas tu ajoutes 2 paramètres aux fonction 'mouseout' et 'mouseover' :

Code :
  1. Function mouseover(img, calque1, calque2) {
  2. if (test) {
  3.    img.src='../graph/carredessus.gif';
  4.    document.all[calque1].style.display='none';
  5.    document.all[calque2].style.display='block'
  6. }
  7. }


Citation :

et est ce que tu sais si il y possibilite de cacher tout les calke d'un page en 1 coup ?


J'ai jamais été confronté à ce cas mais je dirais rapidement que tu peux maintenir un tableau avec la liste de tes calques et le parcourir lorsque tu veux tous les cacher.


Message édité par gm_superstar le 01-08-2002 à 10:35:14
Reply

Marsh Posté le 01-08-2002 à 10:41:52    

ha ooui non ce que je voulais c'est que javais un bouton pour faire apparaitre chake calke
donc 30 bouton pour avec 30 rollover et donc chake calke correspond a un bouton , c'est aussi pour caque je n'est pas fais de fonction car la il maurait fallut 30 fonction
tu vois?


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 01-08-2002 à 11:43:23    

Ben tu rajoutes un paramètre aux fonctions avec le nom du fichier de l'image qui sert à faire le rollover. Le but c'est de ne pas avoir plein d'instructions dans les onMouseOver="..." c'est tout. C'est juste une question de lisibilité.

Reply

Marsh Posté le 01-08-2002 à 11:43:23   

Reply

Marsh Posté le 01-08-2002 à 12:06:21    

Alors voila ce que j'ai fais mais ca ne marche pas il me fait une erreur sur la page :
 
mes fonction JS :

Code :
  1. <script language='javascript'>
  2. var test = true;
  3. Function mouseover(numimg,nomcadre)
  4.   {
  5.     if(test)
  6.     {
  7.     numimg.src='../graph/carredessus.gif';
  8.     document.all['info'].style.display='none';
  9.     document.all['nomcadre'].style.display='block';
  10.     }
  11.   }
  12. Function mouseout(img,nomcadre)
  13.   {
  14.     if(test)
  15.     {
  16.     numimg.src='../graph/carre.gif';
  17.     document.all['info'].style.display='block';
  18.     document.all['nomcadre'].style.display='none';
  19.     }
  20.   }
  21. Function click()
  22.   {
  23.     if (test)
  24.     {
  25.     test = false;
  26.     }
  27.     else
  28.     {
  29.     test = true;
  30.     }
  31.    numimg.src='../graph/carredessus.gif';
  32.    document.all['info'].style.display='none';
  33.    document.all['adaincourt'].style.display='block';
  34.    test();
  35.   }
  36. </script>


 
Voila mes image/boutton:

Code :
  1. <img name=\"img1\" src='../graph/carre.gif' OnMouseOver=\"mouseover(img1,adaincourt);\" OnMouseOut=\"mouseover(img1,adaincourt);\" Onclick=\"mouseover(img1,adaincourt);\"
  2. <img name=\"img1\" src='../graph/carre.gif' OnMouseOver=\"mouseover(img2,arriance);\" OnMouseOut=\"mouseover(img2,arriance);\" Onclick=\"mouseover(img2,arriance);\"
  3. etc...juska 30


 
kest ce qui ne va pas ??


Message édité par Phive le 01-08-2002 à 12:07:00

---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 01-08-2002 à 12:33:10    

Il y a plein d'erreurs assez évidentes déjà... :heink:  
 

Code :
  1. <script language='javascript'>
  2. var test = true;
  3. Function mouseover(numimg,nomcadre)
  4. {
  5.    if(test)
  6.    {
  7.    numimg.src='../graph/carredessus.gif';
  8.    document.all['info'].style.display='none';
  9.    document.all[nomcadre].style.display='block'; /*Pas de ' si nomcadre est passé en paramètre*/
  10.    }
  11. }
  12. Function mouseout(img,nomcadre)
  13. {
  14.    if(test)
  15.    {
  16.    numimg.src='../graph/carre.gif';
  17.    document.all['info'].style.display='block';
  18.    document.all[nomcadre].style.display='none'; /*Idem*/
  19.    }
  20. }
  21. Function click()
  22. {
  23.    if (test)
  24.    {
  25.    test = false;
  26.    }
  27.    else
  28.    {
  29.    test = true;
  30.    }
  31.   numimg.src='../graph/carredessus.gif';
  32.   document.all['info'].style.display='none';
  33.   document.all['adaincourt'].style.display='block'; /*Si tu modifies tout ça il faut les passer en paramètres à la fonction click()*/
  34.   test(); /*Que fait cette fonction ??*/
  35. }
  36. </script>


 
Et dans tes <img>, ça serait pas mal d'appeler click() et pas mouseover() sur les évènements OnClick...


Message édité par gm_superstar le 01-08-2002 à 12:33:32
Reply

Marsh Posté le 01-08-2002 à 14:16:13    

arf oui javais vraimetn fais des erreurs betes  :(  
mais bon ca ne marche tjs pas et la je vois pastrop ou se trouve le prob
Mes fonctions :
<

Code :
  1. script language='javascript'>
  2. var test = true;
  3. Function mouseover(numimg,nomcadre)
  4.   {
  5.     if(test)
  6.     {
  7.     numimg.src='../graph/carredessus.gif';
  8.     document.all['info'].style.display='none';
  9.     document.all[nomcadre].style.display='block';
  10.     }
  11.   }
  12. Function mouseout(numimg,nomcadre)
  13.   {
  14.     if(test)
  15.     {
  16.     numimg.src='../graph/carre.gif';
  17.     document.all['info'].style.display='block';
  18.     document.all[nomcadre].style.display='none';
  19.     }
  20.   }
  21. Function click(numimg,nomcadre)
  22.   {
  23.     if (test)
  24.     {
  25.     test = false;
  26.     }
  27.     else
  28.     {
  29.     test = true;
  30.     }
  31.    numimg.src='../graph/carredessus.gif';
  32.    document.all['info'].style.display='none';
  33.    document.all[nomcadre].style.display='block';
  34.   }
  35. </script>


pour ce qui est de mon image

Code :
  1. <img name=\"img1\" src='../graph/carre.gif' OnMouseOver=\"mouseover('img1','adaincourt');\" OnMouseOut=\"mouseover('img1','adaincourt');\" Onclick=\"click('img1','adaincourt');\" OnLoad=\"tempImg=new Image(0,0); tempImg.src='../graph/carredessus.gif'; document.all['adaincourt'].style.display='none'\">


 
tu vois encore des erreurs ?


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 01-08-2002 à 18:06:16    

Non, tu peux pas le mettre en ligne ton site ?

Reply

Marsh Posté le 01-08-2002 à 21:11:14    

mouais j'oudrais bien voir moi aussi ce que ca donne ..

Reply

Marsh Posté le 05-08-2002 à 08:21:22    

ok je vais voir ce que je peux faire


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 05-08-2002 à 09:02:11    

Bon voila le site : www.duf.levillage.org
 
Mon prob se trouve dans la rubrique "les communes"
 
Encore un truc ca ne marche ke pour IE pour le moment.
 
et encore la en ligne ca ne donne  pas toute a fais la meme chose que chez moi en local.
 
Donc je vais t'expliker ce que tu devrais voir :
 
Il y a 30 communes qui sont représentais par les 30 carrés bleus. Quand tu passes ta souris sur un des carré bleu, le carré va s'abaisser et un calque s'affiche au nom de la commune. Puis ce que je voudrais faire, c'est donc quand on va cliker sur un des ces carré le calque va rester afficher.
Ha oui encore un truc, pour le moment il n'y a ke le premier carré qui fais comme tu me la conseiller et c la que ca ne marche pas
 
Voila si tu arrive a trouve une solution se serait cool  [:powa]
 
edit: en fait l'erreur que je vois d'afficher c'est "objet attendu" si kelkun c'est ce que ca veut dire


Message édité par Phive le 05-08-2002 à 09:06:24

---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 05-08-2002 à 09:29:15    

Bah en fait je viens deja de decouvrir une erreur mais plus grosse que moi :
J'ai ecris
 
Function a la place function
 
Je me tire une balle...enfin c'est plus une balle mais une rokette  :gun:  
 
 :D  
 
bon mais ca ne fait qd meme pas ce que je veux


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 05-08-2002 à 09:46:14    

en fait c bon y tout ki marche
en rouge c'est ce ke jai changé
 

Code :
  1. <script language='javascript'>
  2. var test = true;
  3. function mouseover(img,nomcadre)
  4.   {
  5.     if(test)
  6.     {
  7.     img.src='../graph/carredessus.gif';
  8.     document.all['info'].style.display='none';
  9.     document.all[nomcadre].style.display='block';
  10.     }
  11.   }
  12. function mouseout(img,nomcadre)
  13.   {
  14.     if(test)
  15.     {
  16.     img.src='../graph/carre.gif';
  17.     document.all['info'].style.display='block';
  18.     document.all[nomcadre].style.display='none';
  19.     }
  20.   }
  21. function clic(img,nomcadre)
  22.   {
  23.     test = false;
  24.    img.src='../graph/carredessus.gif';
  25.    document.all['info'].style.display='none';
  26.    document.all[nomcadre].style.display='block';
  27.   }
  28. </script>


Code :
  1. <img name=\"img1\" src='../graph/carre.gif' OnMouseOver=\"mouseover(this,'adaincourt')\" OnMouseOut=\"mouseout(this,'adaincourt')\" Onclick=\"clic(this,'adaincourt')\">


Message édité par Phive le 05-08-2002 à 10:03:13

---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 05-08-2002 à 10:25:39    

Bon bah du coup j'ai un autre prob qui vient d'apparaitre :
 
Sachant que j'ai 30 img de ce type.
J'ai ma var test qui va passer a false la premiere fois que je vais cliker sur une des cases, mais du coup tout mes autre cases ne vont plus faire de rollover...pourtant je voudrais que ca le fasse pour les autres cases
Comment puis je faire ?


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le 05-08-2002 à 10:26:19    

Bon en fait, on dirait qu'il ne faut pas appeler une fonction 'click' :ange: Voilà un code qui marche :
 

<img name="img1" src="commune.php_files/carre.gif" onmouseover="mouseover(this,'adaincourt');" onmouseout="mouseout(this,'adaincourt');" onclick="clic(this,'adaincourt');" onload="tempImg=new Image(0,0); tempImg.src='commune.php_files/carredessus.gif'; document.all['adaincourt'].style.display='none'">


 
et la fonction 'clic'
 

Code :
  1. function clic(numimg, nomcadre) {
  2.   if (test) {
  3.     test = false;
  4.   } else {
  5.     test = true;
  6.   }
  7.   numimg.src = 'commune.php_files/carredessus.gif';
  8.   document.all['info'].style.display = 'none';
  9.   document.all[nomcadre].style.display = 'block';
  10. }

Reply

Marsh Posté le 05-08-2002 à 10:28:45    

Phive a écrit a écrit :

Bon bah du coup j'ai un autre prob qui vient d'apparaitre :
 
Sachant que j'ai 30 img de ce type.
J'ai ma var test qui va passer a false la premiere fois que je vais cliker sur une des cases, mais du coup tout mes autre cases ne vont plus faire de rollover...pourtant je voudrais que ca le fasse pour les autres cases
Comment puis je faire ?



Simple tu fais : un tableau de booléens. A chaque booléen correspond un calque. Mais je te conseille de numéroter tes calques au lieu de leur donner des noms de commune. Du style : commune_1, commune_2... tu gardes tes fonctions, mais tu ne passe en paramètre que le numéro et tu recrées ensuite le nom de ton calque en concaténant 'commune_' et le numéro.

Reply

Marsh Posté le 13-08-2002 à 10:18:56    

Ok j'ai reussi a faire marcher ca...mais en local seulement.
Une fois en ligne (http://duf.levillage.org dans la parti Communes) ca crake completement et le truc devien fou : les rollover ne se font pas ou nimporte comment, quand je clike le truc disparait.
alors quand local ca roule
 
Comment se fesse  :??:


---------------
/!\ Post powered by Phive-online.com /!\
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed