Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3095 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Rollover, clike et calque ??

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Rollover, clike et calque ??

n°187559
Phive
Raaah Lovely
Posté le 31-07-2002 à 19:09:38  profilanswer
 

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 /!\
mood
Publicité
Posté le 31-07-2002 à 19:09:38  profilanswer
 

n°187560
gm_superst​ar
Appelez-moi Super
Posté le 31-07-2002 à 19:30:05  profilanswer
 

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.

n°187604
Phive
Raaah Lovely
Posté le 31-07-2002 à 21:10:37  profilanswer
 

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


---------------
/!\ Post powered by Phive-online.com /!\
n°187778
Phive
Raaah Lovely
Posté le 01-08-2002 à 08:18:36  profilanswer
 

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 /!\
n°187809
Phive
Raaah Lovely
Posté le 01-08-2002 à 09:46:19  profilanswer
 

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 /!\
n°187823
gm_superst​ar
Appelez-moi Super
Posté le 01-08-2002 à 10:00:46  profilanswer
 

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
n°187832
Phive
Raaah Lovely
Posté le 01-08-2002 à 10:06:17  profilanswer
 

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 /!\
n°187857
gm_superst​ar
Appelez-moi Super
Posté le 01-08-2002 à 10:34:59  profilanswer
 

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
n°187868
Phive
Raaah Lovely
Posté le 01-08-2002 à 10:41:52  profilanswer
 

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 /!\
n°187929
gm_superst​ar
Appelez-moi Super
Posté le 01-08-2002 à 11:43:23  profilanswer
 

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é.

mood
Publicité
Posté le 01-08-2002 à 11:43:23  profilanswer
 

n°187941
Phive
Raaah Lovely
Posté le 01-08-2002 à 12:06:21  profilanswer
 

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 /!\
n°187963
gm_superst​ar
Appelez-moi Super
Posté le 01-08-2002 à 12:33:10  profilanswer
 

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
n°188010
Phive
Raaah Lovely
Posté le 01-08-2002 à 14:16:13  profilanswer
 

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 /!\
n°188142
gm_superst​ar
Appelez-moi Super
Posté le 01-08-2002 à 18:06:16  profilanswer
 

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

n°188263
jolly
Posté le 01-08-2002 à 21:11:14  profilanswer
 

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

n°189730
Phive
Raaah Lovely
Posté le 05-08-2002 à 08:21:22  profilanswer
 

ok je vais voir ce que je peux faire


---------------
/!\ Post powered by Phive-online.com /!\
n°189736
Phive
Raaah Lovely
Posté le 05-08-2002 à 09:02:11  profilanswer
 

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 /!\
n°189743
Phive
Raaah Lovely
Posté le 05-08-2002 à 09:29:15  profilanswer
 

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 /!\
n°189752
Phive
Raaah Lovely
Posté le 05-08-2002 à 09:46:14  profilanswer
 

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 /!\
n°189768
Phive
Raaah Lovely
Posté le 05-08-2002 à 10:25:39  profilanswer
 

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 /!\
n°189769
gm_superst​ar
Appelez-moi Super
Posté le 05-08-2002 à 10:26:19  profilanswer
 

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. }

n°189770
gm_superst​ar
Appelez-moi Super
Posté le 05-08-2002 à 10:28:45  profilanswer
 

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.

n°194487
Phive
Raaah Lovely
Posté le 13-08-2002 à 10:18:56  profilanswer
 

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 /!\
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Rollover, clike et calque ??

 

Sujets relatifs
[Dreamweaver] Faire un rollover sur une image partagée ?[DHTML] Rollover Image Please HELP !
Modifier le style CSS d'un tableau par rolloverlire les propriete d'un calque avec Javascript
[HTML/JS] pb positionnement de calque par rapport a une page centréepb de comprehension de position de calque (relative/absolute)
[HTML, JS] Pb de rollover...JavaScript : fixer un menu (calque) dans une cellule fixe !
Cherche script pour Rollover un peu spécial [Exemple inside][Css] agrandir une image sous forme d'animation dans un calque ?
Plus de sujets relatifs à : Rollover, clike et calque ??


Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)