Discussion :

[Ouroboros29]

Bonjour,

Je developpe une page web qui comporte un menu de type fisheye (quand la souris passe sur un element celui-ci grossi).

Or chaque image possède un text qui lui est lié, ce texte est situé au dessus de l'image en premier plan.

L'effet de grossissement se fait sur l'event onMouseOver de l'image au second plan en parametrant le onMouseOut et le onMouseOver de celui ci pour que quand on sort en allant vers le texte au milieu de l'image on ne fasse pas la fonction de zoom.

En theorie ça marche et en pratique ça marche à un petit detail près :
-Quand don deplace la souris à une vitesse raisonable tout les event se deroulent sans problèmes et les zoom et dezoom marchent.
-Si on passe trop vite avec la souris sur les images et les textes il arrive qu'une ou plusieur images restent en mode zoom

Je pense que c'est qquand la souris passe sur un texte mais comme elle bouge vite la prochaine detection de la position en dehors de l'image du texte donc il n'y a pas l'envent onMouseOut de l'image qui est activé et donc pas de dezoom

Si j'enleve les textes sur les images ça ne le fait plus donc ça vient de là mais je ne sais pas comment empecher ce problème.

J'ai cherché et apparament ce n'est pas possible de rendre le texte "transparent" au niveau de ses event (considerer qu'un mouseover du texte est aussi un mouseover sur l'image)

Je ne peux pas integrer le texte directement à l'image sinon il est deformé lors du zoom.

Vous auriez d'autres pistes à me proposer ?

Merci

[nours312]

quel script utilises tu pour faire cet effet de zoom ? Est un script avec des effet dans le style de ScriptAculoUs ?? dans ce cas, tu dois surement avoir les Queues absentes ou mal réglée ... et lors du lancement de la fonction onMouseOut, si l'effet en cours (onMouseOver) n'est pas terminé, le second ne peux pas se lancer ^^ ... résultat, ben il ne se mets pas en route

[Ouroboros29]

J'utilise les base d'un script fisheye que j'ai trouvé sur le net auquel j'ai apporté pas mal de modification (à la base les textes sont en dessous de l'imga donc mon problème n'est pas présent dans le modèle de base).

Si j'ai bien compris ce que tu explique, je ne pense pas que ton explication colle pour mon problème car si j'enleve les textes il n'y a plus de probleme d'enchainement mousOver et mouseOut. Donc c'est bien la gestion des event des zones de textes qui sont à la base du problème.

Comme je l'ai expliqué est ce que c'est possible que la detection de la position de la souris se fasse mal et donc que le mouseOut de l'image ne se declenche pas car il ne l'a pas detecté ?

[nours312]

Ben ... je sais que si un texte est positionné au dessus d'une image et que nous surveillons les events sur l'image, en passant au dessus du text ça peux déclencher l'évent onMouseOut de l'image ... mais il semblerait que ce ne soit pas du tout ton problème !!

- Peux tu nous donner un lien, pour mieux visualiser ce qui se passe ?? et faire des manip onLine ...
- as tu constaté ce pb avec tous les navigateurs ? Ou juste certains ?

en fait les Queues dont je te parle sont des variables utilisées par scriptAculoUs et d'autres pour éviter de lacer plusieurs effets en meme temps ... : http://wiki.github.com/madrobby/scri.../effect-queues

En jettat un oeil sur le script de présentation : http://marcgrabanski.com/pages/code/fisheye-menu

on constate que si nous positionnons la span (contenant le titre) à top:20% au lieu de 100%

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* ligne 15 du fichier fisheye-menu.css  manipulé avec fireBug */
#fisheye_menu span {
background:#EEEEEE none repeat scroll 0 0;
border:1px solid #BBBBBB;
color:#333333;
left:0;
margin:0;
padding:1px;
position:absolute;
text-align:center;
top:20%;
width:79px;
}

Ben ya un Bon petit paquet de bug ^^ ...lors du survol sur les span, ça marche pas, et quand on arrive à déclencher l'event l'effet de retour est vraiment pourri ^^

Donc, je pourrais de conseiller de leurs demander si ils sont au courant, et si ils ont déja envisagé une réparation de ce Bug ^^

Sinon, le mieux serait surement de taper à la tronçonneuse dans le code et d'extraire ce que tu veux rééllment en modifiant un peu tout ... cela dit, ce sera surement plus rapide de tout refaire toi meme avec un scriptAculoUs ou autres !!...

@+&BonCourage

[Ouroboros29]

Merci pour ces réponses,
C'est le script que vous montrez dans votre précédent message que j'utilise justement, j'ai reussi à integrer le fait que les zone de texte ne fasse plus intervenir le mouseout de l'image en signalant dans le mouseOut de l'image que si il vient de la zone de texte il ne declenche pas l'animation de reduction et inversement quand il entre dans l'image en venant du texte il ne declenche pas le zoom.

J'ai rajouté un test pour confirmer mes soupçons et c'est bien le cas, quand on passe rapidement la souris sur l'image, le texte et en resortant de l'image, le mouseOut du texte detecte que l'on va dans un elements en dehors de l'image et donc on ne declenche pas le mouseout de l'image. D'où l'bsence de dezoom.

Mais le code reste quand meme assez compliqué et le modifier comme je l'ai fait me donne plus l'impression de mettre des pensements à droite et à gauche donc au final j'ai pas hyper confiance dans ce code.

La piste de redevelopper l'animation avec les script de scriptAculoUs me semble interressante mais faute de temps pour le projet je l'integrerai sans doute dans une V2.

Le bug qui apparait en passant la souris rapidement est pas evident à declencher, il faut vraiment le vouloir, meme si je connais le principe de la loi de Murphy les utilisateurs devront faire avec pendant un petit moment (ce n'est pas enormement derangeant et ça ne fait pas planter le script )

Merci de m'avoir consacrer un peu de votre temps !