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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Changement bouton OnClick

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Changement bouton OnClick

n°1723863
akalaan
Posté le 24-04-2008 à 16:14:36  profilanswer
 

Bonjour à tous,
 
 
Sur la page de mon site, je dispose de bouton. Je voudrais faire en sorte que mes boutons changes de couleurs lors du survol (onmouseover), revienne à leur état d'origine lors du retrait (onmouseout), et reste dans l'état de survol lors du clic du chargement de la page voici ce que j'ai fait :
 

Code :
  1. <div id='parent'>
  2. <div id="logo" style="position: absolute; left: 11px; top: 5px; width: 183px; height: 57px; z-index: 6;">
  3.  <a href="index.php"><img width="190" height="47" border="0" src="images/logo.gif"/></a>
  5. </div>
  6. <div id='entete'>
  7.  <div id="metiers" style="position: relative; left: 290px; top: 71px; width: 478px; height: 41px; z-index: 4;">
  8.   <table border="0" cellspacing="0" cellpadding="0">
  9.    <tbody>       
  10.            <tr>
  11.      <td><a href="#" onClick="swapImage('visuAlarm.php','zoneAffiche','images/menu/metiers/BoutonOverAlarme.gif','alarme');clic=true" onMouseOut="swapImage('','','images/menu/metiers/BoutonAlarme.gif','alarme');etat=0;" onMouseOver="swapImage('','','images/menu/metiers/BoutonOverAlarme.gif','alarme');etat=1;"><img src="images/menu/metiers/BoutonAlarme.gif" border="0"  id="alarme" name="alarme" ></a></td>
  12. </tr>
  13.           </tbody>
  14.        </table>
  15.       </div>
  16. </div>
  17. <div id='contenu'>
  18.  <div id='zoneAffich'></div>
  20.  <noscript>
  21.   <div id='Warning'>
  22.   Attention, JavaScript inactif<br>
  23.   Activé puis réactualisé
  24.   </div>
  25.  </noscript>
  27.  <div align="center">
  28.   <p/>
  29.    <table width="700" align="right">
  30.           <tr>
  31.          
  32.     </tr>
  33.    </table>
  34.  </div>
  35. </div>
  37. </div>
  39. </body>


 
 
Voici le code JS
 

Code :
  1. function envoieRequete(url,id){
  2. var xhr_object = null;
  3. var position = id;
  5. if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
  6. else
  7. if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP" );
  10.  xhr_object.open("GET", url, true);
  11.  xhr_object.onreadystatechange = function(){
  12.   if ( xhr_object.readyState == 4 ){
  14.    document.getElementById(position).innerHTML = xhr_object.responseText;
  15.   }
  16.  }
  18. xhr_object.send(null);
  20. }
  24. var clic=false;
  25. var etat=0;
  26. var urlFile=" ";
  27. var posFile=" ";
  28. function swapImage(urlFile,posFile,urlImg,posImg)
  29. {
  30. if (!clic)
  31. {
  32.  if(etat==0)
  33.  {
  34.   document.getElementById(posImg).src=urlImg;
  35.         }
  36.      
  37.  if(etat==1)
  38.  {
  39.   document.getElementById(posImg).src=urlImg;
  41.   if((!urlFile)&&(!posFile))
  42.    {
  43.     envoieRequete(urlFile,posFile);
  44.    }
  45.  }
  46.    }
  47. }


 
 
Le changement de couleur fonctionne lors du premier OnMouseOver puis message d'erreur lors du OnMouseOut
mais change quand même de couleur pour revenir à l'origine

Code :
  1. uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no]


 
Lorsque je clique, la couleur reste fixe mais la page ne s'affiche pas.
 
J'avoue ne pas savoir, cela fait un moment que je cherche et je ne trouve pas, auriez-vous des idées ???
 
Merci d'avance,
 
Cordialement,
 

mood
Publicité
Posté le 24-04-2008 à 16:14:36  profilanswer
 

n°1723923
akalaan
Posté le 24-04-2008 à 17:15:20  profilanswer
 

Bon et bien finalement cela fonctionne, j'ai dû légèrement modifier mon .js
 

Code :
  1. var clic=false;
  2. var etat=0;
  5. function swapImage(urlFile,posFile,urlImg,posImg)
  6. {
  7. var url = urlFile;
  8. var id = posFile;
  10. if (!clic)
  11. {
  12.  if(etat==0)
  13.  {
  14.   document.getElementById(posImg).src=urlImg;
  15.         }
  16.      
  17.  if(etat==1)
  18.  {
  19.   document.getElementById(posImg).src=urlImg;
  21.   if((url!="" )&&(id!="" ))
  22.    {
  23.     envoieRequete(url,id);
  24.    }
  25.  }
  26. }
  27. }


 
En revanche, un autre problème se dévoile.
 
Une fois cliqué sur un bouton et que la page s'est affiché, je ne peux plus cliqué sur les autres bouton, ça ne fait rien et je n'est pas de message d'erreur
 
Auriez-vous une idée ?
 
Merci d'avance,

n°1724215
akalaan
Posté le 25-04-2008 à 10:24:49  profilanswer
 

Re bonjour,
 
J'avoue ne pas comprendre pourquoi cela bloque.
 
Je découvre le monde du dev web donc dsl pour les questions idiotes.
 
Je pense que la manière que j'utilise n'est pas la bonne.
 
Pourriez-vous me conseiller, merci d'avance,


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

  Changement bouton OnClick

 

Sujets relatifs
changement d'etat cellule en fonction de la datebouton pour changer lien
sous menu flash: accés au boutonExecuter un BASH a partir d'un bouton
[XSL] comment inserer un bouton dans une page xslChanger la value d'un bouton Radio par son ID
[VBA] Petite question pour bouton sur ExcelPb de changement de variable avec un bouton sous flash
bouton submit disable une fois que l'on clic dessus 
Plus de sujets relatifs à : Changement bouton OnClick

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.042 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR