Infobulle imagée au survol d'un lien
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)
Code:
<td><a href="#" title="gna gna">gnagna</a><img src="./img/posters/1_s.jpg" alt="gna" /></td>
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:
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);
}
}
} |
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?
Voici la fonction move qui intercepte les mouvements et appelle l'image à bouger (show_thumb)
Code:
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);
} |
Ensuite je décide de sortir ma thumbnail du flux via css en lui appliquant une classe
Code:
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.
