begin process at 2012 05 29 07:45:29
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Conflit OnMouseOut et OnClick

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Conflit OnMouseOut et OnClick

mardi 3 mars 2009 à 10:47:12 | Conflit OnMouseOut et OnClick

rehtakulveets
Bonjour à tous.
Je sais que le sujet a déjà été traité mais mon problème est un peu différent et je n'arrive pas à m'en sortir.
J'ai récupéré un code ici et me le suis adapté mais pourtant un problème subsiste et mes compétences en javascript sont dépassées à ce stade!

Mon problème : j'ai un menu avec 7 rubriques (7 images) avec un onmouseover, un onmouseout et un onClick sur chq image avec un changement d'image classique sur les onmouseover/out et l'ouverture de sous-rubriques avec le onclick.
Je souhaiterai que l'image apparue sur le onmouseover reste lorsqu'il y a eu un click!
Il y a donc un conflit entre le onmouseOut et le Onclick, cependant, je ne pense aps pouvoir utiliser une variable car, au total, j'ai plus de 30 images (correspondant dc à des rubriques ou sous-rubriques)!!!

Le site est visible ici : www.deroutes.fr/test/index.php

Je vous mets le code, cela me semble le mieux.

Merci de votre aide

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Le site du groupe Déroutés</title>

<style type="text/css">
body {margin:0 ;
padding:0;
font:Arial,Sans-serif;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#010101;
scrollbar-highlight-color:#848484;
scrollbar-3dlight-color:#686767;
scrollbar-shadow-color:#4D4C4C;
scrollbar-darkshadow-color:#3E3E3E;
scrollbar-track-color:#202020;} /* marges intérieures et extérieures de la page à 0 */

.menu-general { /* défini les boites qui comprenent chaque menu de base */
  float:left ; /* Les boite sont calées à gauche */
  height: 40px ;
  width:100px ; /* largeur des boites du menu de base */
  padding:0 ; /* marges intérieures à 0 */
  margin: 0 ; /* marges extérieures à 0 */
  
}
#menu-general1,#menu-general2 ,#menu-general3,#menu-general4 {
}  


#sous-menu1, #sous-menu2, #sous-menu3,  #sous-menu4 { /*défini les 4 boites des 4 sous-menues */
clear:left;
  display: none; /* les sous-menus ne sont pas affichés */
  margin: 0; /* marges extérieures à 0 */
  padding : 0; /* marges intérieures à 0 */
  /*position : absolute ;  boite positionnée par rapport à la boite parent, ici l'écran */
  top : 100px; /* Début (par rapport au haut de page) des sous-menus */
  left : 0px; /* Début (par rapport à la gauche de la page) des sous-menus */
  width : 100% ;/* largeur des sous-menus par rapport à la boite parent (ici la page)*/


}
.submit{
     border:none;
     color:#fff;
     background: transparent no-repeat top left;
     width:75px;
     height:20px;
  cursor:hand;
}

.lienmenu{

text-decoration:none;
font-weight: bold;
font-size: 14px;
width:100%;
height:100%
cursor:hand;
}
.lienplan{

text-decoration:none;
font-weight: bold;
font-size: 14px;
width:100%;
height:100%
cursor:hand;
}

.liensousmenu{
text-decoration:none;
font-weight: bold;
font-size: 12px;
}
.liensousmenu:link {color:black;}
.liensousmenu:visited {color:black;}
.liensousmenu:hover {color:black;}
.liensousmenu:active {color:black;}
.couleurlien {
text-decoration: none;
color: white;
cursor: hand
}
a:hover
{
color:#929191;
text-decoration:none
}
A:hover { text-decoration : underline; }
</style>
<STYLE type="text/css">
       BODY {background-color:#000000}
    BODY {background:  url(fond.gif) no-repeat top center ;}

</STYLE>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript">
function effacer(value_defaut,id)
{
truk=document.getElementById(id);
type=truk.tagName;
type=type.toLowerCase();
   if (type=='input')
   {
      if (truk.value==value_defaut)
         truk.value='';
   }
   else if (type=='textarea')
   {
      if (truk.innerHTML==value_defaut)
         truk.innerHTML='';
   }
}

</script>
<script type="text/javascript" src="menu.js"></script> <!-- appel du JS qui gère l'affichage des sous-menus -->
</head>

<body bgcolor="#000000" background="fond.gif"
onLoad="
montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3'); cache('sous-menu4');
color('menu-general1','black','1px solid black'); color('menu-general2','black','1px black');  color('menu-general3','black','1px black');  color('menu-general4','black','1px black');
colorlien('lienmenu1','black');colorlien('lienmenu2','black');colorlien('lienmenu3','black');colorlien('lienmenu4','black');

">
<table width="730" height="800" border="0" align="center">
  <tr>
    <td width="720" height="171" valign="bottom" background="bandeau.gif" 'no-repeat'>
      <div align="right">
        <object data="dewplayer-multi.swf?son=fin.mp3|jake.mp3|rosanna.mp3&autoplay=1" type="application/x-shockwave-flash" width="240" height="20" align="absbottom" bgcolor="#000000">
          <param name="movie" value="dewplayer-multi.swf?son=fin.mp3|jake.mp3|rosanna.mp3&autoplay=1"/>
          <param name="bgcolor" value="#000000">
        </object>
      </div></td>
  </tr>
  <tr valign="top">
    <td height="75"> <div style="width:710px;  position:top, right; top:10px; left:10px; background-color:black; border:0px ">
        <div style=" width:100%">
          <div id="menu-general1"  
class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general1','black','1px black'); color('menu-general2','black','1px black');  color('menu-general3','black','1px black');
colorlien('lienmenu1','black');colorlien('lienmenu2','black');colorlien('lienmenu3','black'); "  
align="center"
style="border-top:1px black; border-left:1px black; margin-left:5px; "><a href="dates.php" id="lienmenu1" class="lienmenu" target="1"><font color="#FFFFFF"><img src="dates1.gif" border="0" onMouseOver="this.src='dates2.gif'" onMouseOut="this.src='dates1.gif'"></font></a></div>
          <div id="menu-general2" class="menu-general"
onClick="montre('sous-menu2');cache('sous-menu1');cache('sous-menu3');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black');  color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"  
align="center"
style="border-top:1px black; "  ><a href="groupe.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="groupe1.gif" border="0" onMouseOver="this.src='groupe2.gif'" onMouseOut="this.src='groupe1.gif'"></font></a></div>
          <div id="menu-general2; demo-all" class="menu-general"
onClick="montre('sous-menu3','groupe2.gif');cache('sous-menu1');cache('sous-menu2');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black');  color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"  
align="center"
style="border-top:1px black; "  ><a href="matos.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="matos1.gif" border="0" onMouseOver="this.src='matos2.gif'" onMouseOut="this.src='matos1.gif'"></font></a></div>
          <div id="menu-general2" class="menu-general"
onClick="montre('sous-menu4');cache('sous-menu1');cache('sous-menu2');cache('sous-menu3');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black');  color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"  
align="center"
style="border-top:1px black; "  ><a href="medias.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="medias1.gif" border="0" onMouseOver="this.src='medias2.gif'" onMouseOut="this.src='medias1.gif'"></font></a></div>
          <div id="menu-general2" class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black');  color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"  
align="center"
style="border-top:1px black; "  ><a href="book_index.php" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="livre1.gif" border="0" onMouseOver="this.src='livre2.gif'" onMouseOut="this.src='livre1.gif'"></font></a></div>
          <div id="menu-general2" class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general2','black','1px black'); color('menu-general1','black','1px black');  color('menu-general3','black','1px black');
colorlien('lienmenu2','black');colorlien('lienmenu1','black');colorlien('lienmenu3','black');"  
align="center"
style="border-top:1px black; "  ><a href="liens.htm" id="lienmenu2" class="lienmenu" target="1"><font color="#FFFFFF"><img src="liens1.gif" border="0" onMouseOver="this.src='liens2.gif'" onMouseOut="this.src='liens1.gif'"></font></a></div>
          <div id="menu-general3" class="menu-general"
onClick="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');cache('sous-menu4');
color('menu-general3','black','1px black'); color('menu-general1','black','2px black');  color('menu-general2','black','1px black');
colorlien('lienmenu3','black');colorlien('lienmenu1','black');colorlien('lienmenu2','black'); "  
align="center"
style="border-top:0px ; border-right:0px ;"   ><a href="contact.htm" class="lienmenu" target="1"><img src="contact1.gif" border="0" onMouseOver="this.src='contact2.gif'" onMouseOut="this.src='contact1.gif'"></a></div>
        </div>
        <div id="sous-menu1" onMouseOver="montre('sous-menu1');cache('sous-menu2'); cache('sous-menu3');" style="background-color:black; "   >
          <table width="100%" height="30" border="0" cellspacing="0" cellpadding="0" >
            <tr>
              <td align="center">&#8226;&nbsp;<a href="#" class="liensousmenu"></a></td>
              <td align="center">&#8226;&nbsp;<a href="#" class="liensousmenu"></a></td>
              <td align="center">&#8226;&nbsp;<a href="#" class="liensousmenu"></a></td>
              <td align="center">&#8226;&nbsp;<a href="#" class="liensousmenu"></a></td>
            </tr>
          </table>
        </div>
        <div id="sous-menu2" onMouseOver="montre('sous-menu2');cache('sous-menu1');cache('sous-menu3');" style="background-color:black; "    >
          <table width="100%" height="30" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><img src="noir.gif" width="25"border="0"></td>
              <td align="center"><img src="noir.gif" width="25"border="0"></td>
              <td align="center"><a href="paul.htm" class="liensousmenu"target="1"><img src="paul2.gif" border="0" onMouseOver="this.src='paul1.gif'" onMouseOut="this.src='paul2.gif'"></a></td>
              <td align="center"><a href="laurence.htm" class="liensousmenu"target="1"><img src="laurence2.gif" border="0"onMouseOver="this.src='laurence1.gif'" onMouseOut="this.src='laurence2.gif'" onClick="this.src='laurence1.gif'"></a></td>
              <td align="center"><a href="sylvain.htm" class="liensousmenu"target="1"><img src="sylvain2.gif" border="0"onMouseOver="this.src='sylvain1.gif'" onMouseOut="this.src='sylvain2.gif'"></a></td>
              <td align="center"><a href="benoit.htm" class="liensousmenu"target="1"><img src="benoit2.gif" border="0"onMouseOver="this.src='benoit1.gif'" onMouseOut="this.src='benoit2.gif'"></a></td>
              <td align="center"><a href="cyprien.htm" class="liensousmenu" target="1"><img src="cyprien2.gif" border="0"onMouseOver="this.src='cyprien1.gif'" onMouseOut="this.src='cyprien2.gif'"></a></td>
              <td align="center"><a href="tanguy.htm" class="liensousmenu"target="1"><img src="tanguy2.gif" border="0"onMouseOver="this.src='tanguy1.gif'" onMouseOut="this.src='tanguy2.gif'"></a></td>
              <td align="center"><a href="xavier.htm" class="liensousmenu"target="1"><img src="xavier2.gif" border="0"onMouseOver="this.src='xavier1.gif'" onMouseOut="this.src='xavier2.gif'"></a></td>
              <td align="center"><img src="noir.gif" width="25"border="0"></td>
              <td align="center"><a href="juju.htm" class="liensousmenu"target="1"><img src="juju2.gif" border="0"onMouseOver="this.src='juju1.gif'" onMouseOut="this.src='juju2.gif'"></a></td>
              <td align="center"><a href="sebastien.htm" class="liensousmenu"target="1"><img src="sebastien2.gif" border="0"onMouseOver="this.src='sebastien1.gif'" onMouseOut="this.src='sebastien2.gif'"></a></td>
              <td align="center"><img src="noir.gif" width="25"border="0"></td>
              <td align="center"><img src="noir.gif" width="25"border="0"></td>
            </tr>
          </table>
        </div>
        <div id="sous-menu3" onMouseOver="montre('sous-menu3');cache('sous-menu1');cache('sous-menu2');" style="background-color:black; "    >
          <table width="100%" height="30" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><img src="noir.gif" border="0"></td>
              <td align="center"><img src="noir.gif" width="67" height="8"border="0"></td>
              <td align="center"><a href="instruments.htm" class="liensousmenu"target="1"><img src="instruments2.gif" border="0" onMouseOver="this.src='instruments1.gif'" onMouseOut="this.src='instruments2.gif'"></a></td>
              <td align="center"><a href="studio.htm" class="liensousmenu"target="1"><img src="studio2.gif" border="0" onMouseOver="this.src='studio1.gif'" onMouseOut="this.src='studio2.gif'"></a></td>
              <td align="center"><a href="fiche.htm" class="liensousmenu"target="1"><img src="fiche2.gif" border="0" onMouseOver="this.src='fiche1.gif'" onMouseOut="this.src='fiche2.gif'"></a></td>
              <td align="center"><img src="noir.gif" width="263" height="12" border="0"></td>
              <td align="center"><img src="noir.gif" border="0"></td>
            </tr>
          </table>
        </div>
        <div id="sous-menu4" onMouseOver="montre('sous-menu4');cache('sous-menu1');cache('sous-menu2');cache('sous-menu3');" style="background-color:black; "    >
          <table width="100%" height="30" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><img src="noir.gif" width="92" height="8"border="0"></td>
              <td align="center"><a href="photos.htm" class="liensousmenu"target="1"><img src="photos2.gif" border="0" onMouseOver="this.src='photos1.gif'" onMouseOut="this.src='photos2.gif'"></a></td>
              <td align="center"><a href="myspace.htm" class="liensousmenu"target="1"><img src="myspace2.gif" border="0" onMouseOver="this.src='myspace1.gif'" onMouseOut="this.src='myspace2.gif'"></a></td>
              <td align="center"><a href="videos.htm" class="liensousmenu"target="1"><img src="videos2.gif" border="0" onMouseOver="this.src='videos1.gif'" onMouseOut="this.src='videos2.gif'"></a></td>
              <td align="center"><a href="pressbook.htm" class="liensousmenu"target="1"><img src="packpromo2.gif" border="0" onMouseOver="this.src='packpromo1.gif'" onMouseOut="this.src='packpromo2.gif'"></a></td>
               <td align="center"><a href="paroles.htm" class="liensousmenu"target="1"><img src="paroles2.gif" border="0" onMouseOver="this.src='paroles1.gif'" onMouseOut="this.src='paroles2.gif'"></a></td>
              <td align="center"><img src="noir.gif" width="87" height="10"border="0"></td>
            </tr>
          </table>
        </div>
      </div></td>
  </tr>
  <tr>
    <td height="500" valign="top">
      <div align="left">
        <table width="600" border="0" align="center">
          <tr>
            <td height="15" valign="top"><form method="post" action="add_mail.php">
                <div align="right">
                  <table width="301" border="0" align="right" cellpadding="0" cellspacing="0">
                    <tr>
                      <td width="272" valign="baseline">
                        <div align="right"><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">Newsletter</font>
                          <input style="width:100px; height:20px" name="mail" type="text" id="mail3" value="Votre mail" onclick="effacer('Votre mail',this.id);" >
                        </div></td>
                      <td width="4"><div align="right"></div></td>
                      <td width="25"><div align="right">
                          <input style="width:20px; height:20px"type="submit" name="Submit" class="submit" value="OK">
                        </div></td>
                    </tr>
                    <tr> </tr>
                  </table>
                </div>
              </FORM></td>
          </tr>
          <tr>
            <td width="570" height="791" valign="top"> <div align="justify">
                <iframe src="accueil.php" name="1" id="1" frameborder="0" height="770" scrolling="auto" width="620"></iframe>
              </div></td>
          </tr>
        </table>
      </div></td>
  </tr>
  <tr>
    <td height="30" valign="top">
<div align="center" ><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">&copy;</font>
        <font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">2009
        D&eacute;rout&eacute;s - <a href="plan.htm" class="couleurlien" target="1" >Plan
        du site </a>- <a class="couleurlien"href="mentions.htm" target="1">Mentions
        légales</a></font></div></td>
  </tr>
</table>

</body>
</html>

jeudi 5 mars 2009 à 18:57:11 | Re : Conflit OnMouseOut et OnClick

PetoleTeam

Membre Club
Bonjour,
sur l'événement onclick, il te suffit de supprimer l'événement onmouseout
exemple simple
<html>
<head>
<script type="text/javascript">
//----------------
function _0(this_){
  this_.onmouseout= function(){};
}
//----------------
function _1(this_){
  this_.innerHTML = "OVER LIEN";
}
//----------------
function _2(this_){
  this_.innerHTML = "LIEN";
}
</script>
</head>
<body>
<a href="#"
  onclick = "_0( this);"
  onmouseover = "_1( this);"
  onmouseout = "_2( this);">LIEN</a>
</body>
</html>
;O)
vendredi 6 mars 2009 à 15:04:39 | Re : Conflit OnMouseOut et OnClick

rehtakulveets

Bon, c'est super, ca marche niquel!! MErci Petole Team...

Cependant, j'aimerai développer ce code, je sais qu'il ne me manque pas grand chose mais, là encore, mes compétences sont dépassées.

Mes 3 questions sont donc les suivantes:
-comment faire pour que lorsque l'on clique sur le lien 2 APRES avoir cliqué sur le lien 1, le lien 1 disparaisse?
Et, question qui découle de la première:
-comment faire pour que lorsque l'on survole le lien 2 APRES avoir cliqué sur le lien 1, le lien 1 disparaisse mais réapparaisse lorsque l'on quitte le survol du lien 2?
- comment mettre des images à la place du texte "LIEN" et LIEN2" et appeller également des images aux survols? Il suffit de remplacer simplement les this_.innerHTML = "LIEN" par du this_.img src = "LIEN.jpg"?

Merci d'avance.
Je mets un petit bout de code développé avec 2 liens!!! ;)

Bon WE à tous

<html>
<head>
<script type="text/javascript">
//----------------
function _0(this_){
  this_.onmouseout= function(){};
}
//----------------
function _1(this_){
  this_.innerHTML = "OVER LIEN";
}
//----------------
function _2(this_){
  this_.innerHTML = "LIEN";
}
//----------------
function _3(this_){
  this_.innerHTML = "LIEN SURVOL";
}
//----------------
function _4(this_){
  this_.innerHTML = "LIEN2";
}

</script>
</head>
<body>
<a href="#"
  onclick = "_0( this);"
  onmouseover = "_1( this);"
  onmouseout = "_2( this);">LIEN</a>
  <a href="#"
  onclick = "_0( this);"
  onmouseover = "_3( this);"
  onmouseout = "_4( this);">LIEN2</a>
</body>
</html>
vendredi 6 mars 2009 à 16:50:41 | Re : Conflit OnMouseOut et OnClick

PetoleTeam

Membre Club
Bonjour,
Ce que je t'avais mis était un exemple.
...il ne faut pas multiplier les fonctions identiques mais en faire une générique exemple Change_Texte
//---------------------------------
function Change_Texte( this_, txt_){
  this_.innerHTML = txt_;
}
avec un appel du type
onmouseover = "Change_Texte( this, 'OVER Lien');"
qui remplace les fonctions _1 et _2, avec cette fois ci le passage en paramétre du texte à afficher.

Réponse #1
Lors du click sur le lien_2 il faut tester si le lien_1 a été cliqué et si oui le faire disparaître en modifiant son style.display.
Dans ce cas il faut gérer une propriété, par exemple clic, et la mettre à true lorsque l'on clique sur le lien, la fonction devient par exemple
//----------------------
function Fct_Clic(this_){
  this_.onmouseout= function(){};
  this_.clic = true;
}
de la sorte on saura si elle à déjà été cliquée, ceci n'est qu'une façon de faire il y en a bien d'autres.

Réponse #2
Ce n'est qu'une question de logique et de gestion des opérations liées aux événements et à leurs réinitialisations correctes.

Réponse #3
<a href="#"><img src="image.gif"</a>
c'est un rollover classique...

voilà en gros à la louche...
;O)
vendredi 6 mars 2009 à 17:24:38 | Re : Conflit OnMouseOut et OnClick

rehtakulveets

Merci beaucoup Petole Team de cette réponse bien complémentaire...
Je la comprends, mais n'arrive pas à la mettre en place, ca dépasse vraiment ma compréhension -limitée-.
Est-ce trop te demander de m'écrire juste les quelques lignes toutes à la suite et d'utiliser, au lieu du LIEN, une image1 pour l'état normal et une image2 pour le survol?

D'avance, encore merci pour ton aide...et bon WE!!!

M.P
lundi 9 mars 2009 à 17:27:41 | Re : Conflit OnMouseOut et OnClick

PetoleTeam

Membre Club
Bonjour,
une des 1000 et une façons de procéder pour faire un RollOver avec des images
la fonction :
//-------------------------------
function Swap_Image( this_, src_){
  this_.src = src_;
}
l'appel :
<img src = "image_out.gif"
  onmouseover = "Swap_Image( this, 'image_over.gif');"
  onmouseout  = "Swap_Image( this, 'image_out.gif');">
;O)
mardi 10 mars 2009 à 10:25:12 | Re : Conflit OnMouseOut et OnClick

rehtakulveets

Merci Petrole Team..

J'ai écrit ceci, mais bien sûr, ca marche pas...
Je ne sais pas où je dois mettre la fonction Fct_Clic et ce que je dois metrte pour les images!!!

Merci encore de votre aide.

<html>
<head>
<script type="text/javascript">
//---------------------------------
function Change_Image( this_, img_){
  this_.innerHTML = img_;
}
//----------------------
function Fct_Clic(this_){
  this_.onmouseout= function(){};
  this_.clic = true;
}
</script>
</head>
<body>
<a href="#"
  onclick = "Change_Image( this, 'src="image2.gif"');"
 onmouseover = "Change_Image( this, 'src="image2.gif"');"
  onmouseout = "Change_Image( this, 'src="image1.gif"');"><img src="image1.gif"></a>
</body>
</html>

 
mercredi 11 mars 2009 à 18:22:24 | Re : Conflit OnMouseOut et OnClick

PetoleTeam

Membre Club
Bonjour,
J'ai écrit ceci, mais bien sûr, ca marche pas...
question de logique...
Ta fonction Change_Image ne fait rien d'autre que la même chose que la fonction Change_Texte que je t'ai mis plus haut, donc pas ce que visiblement tu veux.
Si tu veux changer une IMG contenue dans un lien, A, il te faut d'abord atteindre l'objet avant de lui changer sa src.
On y accéde via la propriété firstChild des objets.
La fonction Change_Image devient ainsi celle ci
//---------------------------------
function Change_Image( this_, src_){
  this_.firstChild.src = src_;
}

quant à la Fct_Clic elle se met sur l'événement onclick du lien.
;O)
jeudi 12 mars 2009 à 10:46:44 | Re : Conflit OnMouseOut et OnClick

rehtakulveets
Merci encore Petole Team de ces infos précieuses.
Je pense avoir pigé l'essentiel.
J'ai réécrit un code, je pense qu'il s'agit de celui dont j'ai besoin, mais il y a encore un souci, peux tu me dire où? Je sens que je ne suis pas loin.

J'avais une question supplémentaire : où dois-je rajouter la ligne de code du lien (de la page que je souhaite ouvrir) lorsque l'on clique sur l'image?

Encore merci

<html>
<head>
<script type="text/javascript">
//---------------------------------
function Change_Image( this_, src_){
  this_.firstChild.src = src_;
}
//----------------------
function Fct_Clic(this_){
  this_.onmouseout= function(){};
  this_.clic = true;
}
</script>
</head>
<body>
<a href="#" onmouseover = "Change_Image( this, image2.gif);"
  onmouseout = "Change_Image( this, image1.gif);"
  onclick = "Fct_clic( this,image2.gif);"><img src="image1.gif" ></a>
</body>
</html>
vendredi 13 mars 2009 à 15:13:11 | Re : Conflit OnMouseOut et OnClick

PetoleTeam

Membre Club
Bonjour,
...mais il y a encore un souci...
il te faut passer aux fonctions une chaine de caractères aussi
  onmouseout = "Change_Image( this, image1.gif);"
devient
  onmouseout = "Change_Image( this, "image1.gif");"

concernant la fonction Fct_Click
onclick = "Fct_clic( this,image2.gif);"
le 2nd paramétre ne sert à rien si ce n'est à générer une erreur donc
onclick = "Fct_clic( this);"

...où dois-je rajouter la ligne de code du lien...
d'après ce que je lit plus haut ce serait un truc du style
<a href="la_page.html" target="nom_iframe"
  onmouseover = "Change_Image( this, 'image2.gif');"
  onmouseout  = "Change_Image( this, 'image1.gif');"
  onclick = "Fct_clic( this);"><img src="image1.gif" ></a>
;O)

1 2 3

Cette discussion est classée dans : menu, font, scrollbar, color, none

Répondre à ce message

Sujets en rapport avec ce message

Déroulement menu css et javascript [ par kristale ] Hello! j'ai un petit soucis avec mon menu déroulant. J'aimerai que les sous menus ne disparaissent pas quand on clique dessus, mais qu'ils restent.Et integrer image arriere plan dans menu CSS [ par ju0123456789 ] Bonjour,je viens de mettre en place un menu avec sous menu, et mon probleme est que je voudrais integrer une image d'arriere plan, mais soit ce n'est  Menu glissant sous html ne fonctionne pas sous DOCTYPE XHTML [ par michof ] Bonjour,J'ai construit un petit menu glissant tout simple en CSS et javascript qui fonctionne très bien en HTML, mais sous XHTML il bloque. Le menu es Newbie total a besoin d'aide pour inserer menu vertical (html) en JavaScript [ par lhawai1 ] Bonjour a tous,Je suis totalement débutant en la matière et je connais depuis peu le mot "JavaScript". Je suis assomé d'information depuis que j'ai co Imprimer uniquement un tableau contenu dans une page [ par chezeu ] Bonjour je méne un projet. j'ai ma page html à l'intérieur de laquelle il y a il y a un tableau. et j ai un bouton Imprimer. je voudrais que lorque j' Impression:centrer le tablau au milieu de la page [ par chezeu ] Bonsoir, j'ai un probléme. C'est le suivant : j'ai ma page web dans laquelle il y a un tableau et un bouton "Imprimer". Lorsque j'imprimer il laisse u PB de cohésion entre un fond et son interface, ne s'alignent pas de la même façon. [ par chabgyver ] Bonsoir,J'ai décidé de refaire le design de mon site : http://balistiq.frJ'ai intégrer un design dans un template en php, ça n'a pas été simple mais j mon menu et toujour ouver php/mysql/javacript [ par ramirez21000 ] je veut que mon menu soit fermer  et on clicon ou onmousover les sous menu apparesstvoila mon travail************************************************* Garder ouvert un menu accordeon [ par AlexFaitDesChoses ] Bonjour à tous, je débute en PHP et j'aimerais quelques conseils. Je suis entrain de créer mon nouveau site qui se compose comme ceci: un menu déroula Problème décalage menu déroulant [ par badziz ] Bonjour, j'ai un menu déroulant qui fonctionne parfaitement mais lorsque je passe d'une catégorie à une sous-catégorie, la case de la catégorie s'agra


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,920 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)