Bonjour à tous et merci d'avance aux réponses que vous pourrez m'apporter.
Malgré maintes et maintes recherches sur le forum j ene parviens pas à trouver LA solution.
En gros j'ai un lien qui au survol doit m'afficher l'image qu'il représente. Cette image dans mon code se trouve juste après le lien(pour qu'elle soit déjà dans le cache lors de l'appel)
je parcours tous les liens qui m'intéressent pour y associer l'évènement de survol (de façon aussi à respecter un maximum la modularisation)
Code : Sélectionner tout - Visualiser dans une fenêtre à part <td><a href="#" title="gna gna">gnagna</a><img src="./img/posters/1_s.jpg" alt="gna" /></td>
Déjà ici je ne suis pas sûr de devoir appeller la fonction move au survol et au déplacement de la souris. Qu'en dites-vous?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 function thumb_them_all() { var liste = document.getElementById('filmsList'); var links = liste.getElementsByTagName("a"); for (var i=0; i<links.length; i++){ var link = links[i]; link.onmouseover=move; link.onmousemove=move; link.onmouseout = function() { hide_thumb(this); } } }
Voici la fonction move qui intercepte les mouvements et appelle l'image à bouger (show_thumb)
Ensuite je décide de sortir ma thumbnail du flux via css en lui appliquant une classe
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 function move(e) { e = e || window.event; var cursor = {x:0, y:0}; if (e.pageX || e.pageY) { cursor.x = e.pageX; cursor.y = e.pageY; } else { var de = document.documentElement; var b = document.body; cursor.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0); cursor.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0); } show_thumb(this, cursor); }
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 function show_thumb(elt, cursor){ var parent = elt.parentNode; var childList = parent.childNodes; var childImage = childList[1]; childImage.setAttribute('class', "thumb_title_on"); childImage.style.left=cursor.x+"px"; childImage.style.top=cursor.y+"px"; }
Le problème final est que mon image apparaît décalée vers la droite (plus de 250px) sans qu'aucune règle css n'en soit la cause. Et sous IE c'est la catastrophe, elle n'apparaît tout bonnement pas :s
J'ai réellement besoin d'aide ou du moins d'un conseil ou un sens dans lequel chercher
Merci à tous, encore une fois.
Partager