begin process at 2010 03 21 16:46:45
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

Problème de onmouseover sur un div

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

Problème de onmouseover sur un div

mardi 7 juillet 2009 à 10:06:15 | Problème de onmouseover sur un div

ov3rdoze

Membre Club
Bonjour

J'ai mis une action (fonction survol (...)) dans le onmouseover d'un div. Il s'agit simplement de modifier le contenu. Dans le onmouseout, j'appelle une autre fonction (sortie (...)) qui doit remettre le div comme il était à l'origine.

Mes deux fonctions font bien ce qu'elles doivent faire. Mais avec FireFox, lorsque la souris entre dans le div, la fonction survol est bien appelée. Par contre, si la souris passe sur le texte contenu dans le div, sortie est appelée, puis survol et ainsi de suite.
Au final cela fait un clignotement. Et le problème ne se produit qu'avec FireFox.

Sauriez-vous s'il y a un moyen pour que le survol du contenu ne declenche pas le onmouseout du contenant?

Merci d'avance
mardi 7 juillet 2009 à 12:46:36 | Re : Problème de onmouseover sur un div

Bul3

Membre Club

Bonjour,

tu nous cache des choses ?
ce genre de phénomène se produit, mais pas dans le cas que tu cites
( et ce n'est pas exclusif à FF )
ch'tiot exemple :

<body>
    <input type="text" id="txt" />
    <div  onmouseover="document.getElementById('txt').value='over';"
            onmouseout="document.getElementById('txt').value='out';"
            style="background-color:#FFFF00;">
        exemple
    </div>
</body>

et tout va bien....

ça vient donc de la manière dont tu fais ( peut-être sortie() ... ) ?
un tout petit extrait aiderait à répondre ( le nécessaire, tout le
nécessaire, et rien que le nécessaire )


Cordialement [mon Site] [M'écrire] Bul
mercredi 8 juillet 2009 à 08:35:44 | Re : Problème de onmouseover sur un div

ov3rdoze

Membre Club

Merci pour ta réponse

 

Voici le code HTML qui pose problème :

<ul id="Liste" style="width:552px;">
 <li>
  <a href="projet.php?id=8" title="">
   <div id="Projet1" class="Projet" onmouseover="survol(this, 'Villas<br />essai', 42)" onmouseout="sortie(this, 'Villas<br />essai', 'vign6.jpg')">
    <img src="images/projets/vignettes/vign6.jpg" alt="Villas<br />essai" />
   </div>
  </a>
 </li>
 <li>
  <a href="projet.php?id=9" title="">
   <div id="Projet2" class="Projet" onmouseover="survol(this, 'villa<br />essai<br />2', 27)" onmouseout="sortie(this, 'villa<br />essai<br />2', 'vign2.jpg')">
    <img src="images/projets/vignettes/vign2.jpg" alt="villa<br />essai<br />2" />
   </div>
  </a>
 </li>
 <li>
  <a href="projet.php?id=10" title="">
   <div id="Projet3" class="Projet" onmouseover="survol(this, 'villa<br />essai<br />3', 27)" onmouseout="sortie(this, 'villa<br />essai<br />3', 'vign3.jpg')">
    <img src="images/projets/vignettes/vign3.jpg" alt="villa<br />essai<br />3" />
   </div>
  </a>
 </li>
 <li>
  <a href="projet.php?id=11" title="">
   <div id="Projet4" class="Projet" onmouseover="survol(this, 'villa<br />essai<br />4', 27)" onmouseout="sortie(this, 'villa<br />essai<br />4', 'vign4.jpg')">
    <img src="images/projets/vignettes/vign4.jpg" alt="villa<br />essai<br />4" />
   </div>
  </a>
 </li>
 <li>
  <a href="projet.php?id=12" title="">
   <div id="Projet5" class="Projet" onmouseover="survol(this, 'villa<br />essai<br />5', 27)" onmouseout="sortie(this, 'villa<br />essai<br />5', 'vign5.jpg')">
    <img src="images/projets/vignettes/vign5.jpg" alt="villa<br />essai<br />5" />
   </div>
  </a>
 </li>
</ul>

Les fonctions JS appelées :
function survol (obj, titre, marge) {
 obj.className = 'ProjetSurvol';
 obj.innerHTML = titre;
 obj.style.paddingTop = marge.toString () + 'px';
}

function sortie (obj, titre, img) {
 obj.className = 'Projet';
 obj.innerHTML = '<img src="images/projets/vignettes/' + img + '" alt="" />';
 obj.style.paddingTop = '0px';
}

Et enfin le CSS (même si je ne crois pas que ça vienne de là...) :
ul, li {
 display: inline;
 list-style: none;
 margin: 0;
 padding: 0;
 height: 92px;
}

ul {
 position: absolute;
 top: 0px;
 margin-left: 0px;
 z-index: 5;
}

li {
 background-color: #040707;
 display: block;  
 float: left;  
 width: 92px;
 text-align: center;
 margin: 0px;
}

li img {
 display: block;
 border: none;
}

.Projet {
 width: 92px;
 height: 92px;
 text-align: center;
 padding: 0px;
 text-decoration: none;
}

.ProjetSurvol {
 width: 72px;
 height: 72px;
 text-align: right;
 line-height: 15px;
 font-size: 0.8em;
 font-weight: bold;
 padding: 10px;
 background-color: #aac605;
 color: #fff;
 text-decoration: none;
 font-weight: bold;
}

.ProjetSurvol a {
 color: #fff;
 text-decoration: none;
 font-weight: bold;
}


Voilà , je pense que j'ai tout mis. Mais j'ai bien vérifié, et seul Firefox pose problème. Aucun clignotement que ce soit avec IE, Opera, Safari ou Chrome...
mercredi 8 juillet 2009 à 09:09:58 | Re : Problème de onmouseover sur un div

ov3rdoze

Membre Club
J'ai en partie résolu le problème en passant le <a> à l'interieur du <div>, au lieu de l'inverse. Il n'y a plus de clignotement. Par contre je voulais que le carré entier serve de lien, alors que là ce n'est pluss que le texte à l'interieur (qui est la plupart du temps plus petit).

N'y a-t'il pas un moyen de mettre un lien sur le div entier (tou en restant valide d'un point de vue XHML)?


Cette discussion est classée dans : problème, fonction, div, survol, onmouseover

Répondre à ce message

Sujets en rapport avec ce message

Problème onmouseover sous mozilla [ par Fplancha ] Bonjour, j'ai un pb avec du JS sous mozilla.Dans un site, j'utilise une fonction pour changer le contenu d'un tableau quand on passe sur un lien :Font Problème avec infobulle? [ par Monico9385 ] Bonjour, je viens vour car comme le dit mon tire j'ai u problème avec mon infobulle: je vous explique: j'ai un tableau géré dynamiquement par php, e Problème avec OnMouseOver sur les bordures d'une table [ par aloisio11 ] Bonjour,J'ai une table qui au survol de celle-ci affiche une texte et au non-survol ne l'affcihe plus.Voici l'entete de la table :<table border="0" ce Problème d'appel de fonction [Javascript] [ par Sharkiller ] Bonjour, J'ai une fonction qui me pose problème: en fait, après que la boucle s'exécute, on dirait que ça termine la fonction... function Dev(){ n=0; Problème de calcul [ par leoloucal ] Bonjour, Tout d'abord, je ne sais pas si je suis sur le bon forum si ce n'est pas le cas désolée. Je crée normalement mes sites sur flash et là, je s Problème de DIV lors de la réduction [ par nico3141 ] Bonjour, J'essaye d'utiliser des feuilles de style pour mettre en page un site. Quand Problème de fonction de validation d'un formulaire [ par machmacha ] Bonjour a tous,j'ai un formulaire qui contient des champs et un bouton valider les voilà:........//les ch [DOM]Conserver une valeur après ajout d'un child [ par malalam ] Hello,le titre n'est pas super clair parce que je ne savais pas comment résumer.J'appelle une fonction sur un évènement (onchange d'un select : bref, fonction d'affichage fesant bloquer des input et des <a> [ par YnOThAr ] Voila, j'utilise une fonction javascript pour afficher mes news proprement, comme ca j'ai juste a faire un appel sur la fonction js au lieu de réécrir Une fonction qui ne fonctionne pas avec onmouseover [ par Nitruk ] Voila, j'utilise une fonction pour créer un menu, qui appelle des fonctions qui en appellent d'autres. Je l'appelle ainsi : initMenu('woweurope',     


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
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,250 sec (4)

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)