Problème au onMouseout sur Image et Lien
Résolu
Gordon4h04
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Gordon4h04 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Gordon4h04 Messages postés 2 Date d'inscription Statut Membre Dernière intervention -
Salut à tous,
D'abord, merci d'avance à celui/celle/ceux qui prendront le temps de me filer un coup de main avec mon souci.
J'en explique donc le contexte :
J'ai modifié quelques codes Javascript déjà trouvés sur Internet pour créer une div qui servirait à un menu "déroulant" qui apparaît et disparaît en haut de la page.. Cependant, au onMouseout, j'ai un problème.
En effet, quand la souris passe sur l'image et/ou sur un lien, la fenêtre se "range". Ma question est : comment éviter cela ? Mais gardez toutes les fonctions disponibles !
J'aimerais vraiment qu'il y ai des images et des liens dans ce menu, c'est important :)
Quelqu'un voit comment faire ?
(Et puisqu'un bout de code vaut toujours mieux qu'un long discours, voilà le code, et le lien de l'exemple !)
Exemple : http://4h04.com/test/testdiv.php
Et le code :
Merci d'avance à tous ceux qui pourront me filer un coup de main (ou peut-être une solution alternative si il y en a ? Avec CSS3 ou je ne sais quoi, c'est fou ce qu'on est capable de faire maintenant !)
Bref, merci d'avance pour vos réponses :)
Cordialement,
Gordon,
D'abord, merci d'avance à celui/celle/ceux qui prendront le temps de me filer un coup de main avec mon souci.
J'en explique donc le contexte :
J'ai modifié quelques codes Javascript déjà trouvés sur Internet pour créer une div qui servirait à un menu "déroulant" qui apparaît et disparaît en haut de la page.. Cependant, au onMouseout, j'ai un problème.
En effet, quand la souris passe sur l'image et/ou sur un lien, la fenêtre se "range". Ma question est : comment éviter cela ? Mais gardez toutes les fonctions disponibles !
J'aimerais vraiment qu'il y ai des images et des liens dans ce menu, c'est important :)
Quelqu'un voit comment faire ?
(Et puisqu'un bout de code vaut toujours mieux qu'un long discours, voilà le code, et le lien de l'exemple !)
Exemple : http://4h04.com/test/testdiv.php
Et le code :
<html>
<head>
<style type='text/css'>
.pro
{height:200px;
width:100%;
border:solid red 1px;
background-color:gray;
position:relative;
margin-top:0px;
top:-190px;
text-align:center;
}
</style>
</head>
<body>
<div id="menu" onclick='deplace();' onMouseout='range();' class='pro'>
Un <a href='#'>lien</a> ça rentre <img src="gordon_head.png" onMouseout='range();'/>
</div>
<script language='javascript'>
var compte=0;
obj=document.getElementById('menu');
obj.style.top=obj.offsetTop;
topDepart=obj.offsetTop;
function fDeplace()
{
if(obj.offsetTop<=0)
{obj.style.top=obj.offsetTop+10;
deplace();}
}
function deplace()
{
vitesseDeplacement=30;
if(compte==0)
{
deplacement=setTimeout("fDeplace()",vitesseDeplacement);}
else
{clearTimeout(rangement);
deplacement=setTimeout("fDeplace()",vitesseDeplacement);
compte=0;
}
}
function fRange()
{
if(obj.offsetTop>=-172)
{
obj.style.top=obj.offsetTop-10;
range();}
}
function range()
{
clearTimeout(deplacement);
vitesseRange=3;
rangement=setTimeout("fRange()",vitesseRange);
compte=1;
}
</script>
</body>
</html>
Merci d'avance à tous ceux qui pourront me filer un coup de main (ou peut-être une solution alternative si il y en a ? Avec CSS3 ou je ne sais quoi, c'est fou ce qu'on est capable de faire maintenant !)
Bref, merci d'avance pour vos réponses :)
Cordialement,
Gordon,
A voir également:
- Problème au onMouseout sur Image et Lien
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verificateur de lien - Guide
- Image iso - Guide
- Lien copié - Forum Mobile
2 réponses
Hello,
Je te conseille d'utiliser "onMouseEnter" plutôt que "onClick" pour dérouler, car d'une part c'est plus ergonomique, et d'autre part le "onMouseEnter" gère le fait que la souris survole des éléments enfants tels que des div ou des images.
Je te conseille d'utiliser "onMouseEnter" plutôt que "onClick" pour dérouler, car d'une part c'est plus ergonomique, et d'autre part le "onMouseEnter" gère le fait que la souris survole des éléments enfants tels que des div ou des images.
Merci Pierre !
Le conseil est avisé :)
En effet, du coup, j'y ai repensé et j'ai même mis un onMouseover, parce que le onMouseEnter semblait avoir quand même du mal avec l'image et le lien.
Mais désormais, ça marche !
Je laisse ce bout de code, si éventuellement ça peut intéresser quelqu'un par la suite :)
Merci encore de la réponse, ça m'a donné à réfléchir en plus de ce qui m'est arrivé à l'esprit dans la nuit :3
Je laisse aussi la page de test pendant un mois ou deux, comme ça les gens pourront voir un exemple !
Exemple : http://4h04.com/test/testdiv.php
Le conseil est avisé :)
En effet, du coup, j'y ai repensé et j'ai même mis un onMouseover, parce que le onMouseEnter semblait avoir quand même du mal avec l'image et le lien.
Mais désormais, ça marche !
Je laisse ce bout de code, si éventuellement ça peut intéresser quelqu'un par la suite :)
Merci encore de la réponse, ça m'a donné à réfléchir en plus de ce qui m'est arrivé à l'esprit dans la nuit :3
Je laisse aussi la page de test pendant un mois ou deux, comme ça les gens pourront voir un exemple !
Exemple : http://4h04.com/test/testdiv.php
<html>
<head>
<style type='text/css'>
.pro
{height:200px;
width:100%;
border:solid red 1px;
background-color:gray;
position:relative;
margin-top:0px;
top:-190px;
text-align:center;
}
</style>
</head>
<body>
<div id="hide" style="width:450px;height:150px;overflow:hidden;">
<div id="menu" onMouseover='deplace();' onMouseout='range();' class='pro'>
Un <a href='#' onclick='range();'>lien</a> passe <img src="gordon_head.png" onclick='range();'/> Si on clique sur l'image, la div se range.
</div>
</div>
<script language='javascript'>
var compte=0;
obj=document.getElementById('menu');
obj.style.top=obj.offsetTop;
topDepart=obj.offsetTop;
function fDeplace()
{
if(obj.offsetTop<=0)
{obj.style.top=obj.offsetTop+10;
deplace();}
}
function deplace()
{
vitesseDeplacement=30;
if(compte==0)
{
deplacement=setTimeout("fDeplace()",vitesseDeplacement);}
else
{clearTimeout(rangement);
deplacement=setTimeout("fDeplace()",vitesseDeplacement);
compte=0;
}
}
function fRange()
{
if(obj.offsetTop>=-172)
{
obj.style.top=obj.offsetTop-10;
range();}
}
function range()
{
clearTimeout(deplacement);
vitesseRange=3;
rangement=setTimeout("fRange()",vitesseRange);
compte=1;
}
</script>
</body>
</html>
