Changement de position

Version imprimable

Bonjour à tous, j'utilise un code JavaScript pour afficher une image plus grande. Jusque-là, pas de problème.

Ce que je souhaite à présent, c'est afficher la preview à un endroit spécifique de ma fenêtre. Pour le moment, le JavaScript calcule toujours la position de la souris.

Si quelqu'un peut m'aider, merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
$(document).ready(function () {
 
    // Get all the thumbnail
    $('div.thumbnail-item').mouseenter(function (e) {
 
        // Calculate the position of the image tooltip
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
 
        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image tooltip
        $(this).css('z-index', '15')
			.children("div.preview")
			.css({ 'top': y - 120, 'left': x + 50, 'display': 'block' });
 
    }).mousemove(function (e) {
 
        // Calculate the position of the image tooltip			
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
 
 
        // This line causes the tooltip will follow the mouse pointer
        $(this).children("div.preview").css({ 'top': y - 120, 'left': x + 50 });
 
    }).mouseleave(function () {
 
        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index', '1')
			.children("div.preview")
			.animate({ "opacity": "hide" }, "fast");
    });
 
});

06/09/2012, 15h06
SpaceFrog

e.pageX et y = e.pageY représentent les coordonnées de la souris lors du click ..
06/09/2012, 15h53
tortuegenie

Ok et alors comment je fais pour que mon preview s'affiche á un endroit précis de ma fenetre ?

Le javascript n'est pas un langage que je maitrise vraiment
06/09/2012, 16h07
SpaceFrog

l'attribution de la position c'est là

Code:

$(this).children("div.preview").css({ 'top': y - 120, 'left': x + 50 });

si tu veux une position fixe pour tous :

Code:

$(this).children("div.preview").css({ 'top': 200, 'left': 200 });
06/09/2012, 16h18
tortuegenie

Merci,
je viens de changer

Maintenant il me le met á 200 haut et á gauche par rapport á la souris.
J'aimerais "simplement" que le preview s'affiche tjs á 200 du coin gauche de l'ecran.

Est ce que c'est possible ?
06/09/2012, 16h23
SpaceFrog

on peut voir comment tu as changé ?

Code:

.animate({ "opacity": "hide" }, "fast");

opacity hide ??? ça fonctionne ça ?

voila regarde si ca te semble correct

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
$(document).ready(function () {
 
    // Get all the thumbnail
    $('div.thumbnail-item').mouseenter(function (e) {
 
        // Calculate the position of the image tooltip
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
 
        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image tooltip
        $(this).css('z-index', '15')
			.children("div.preview")
            .css({ 'top': 200, 'left': 200, 'display': 'block' });
			//.css({ 'top': y - 120, 'left': x + 50, 'display': 'block' });
 
    }).mousemove(function (e) {
 
        // Calculate the position of the image tooltip			
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
 
 
        // This line causes the tooltip will follow the mouse pointer
        //$(this).children("div.preview").css({ 'top': y - 120, 'left': x + 50 });
        $(this).children("div.preview").css({ 'top': 200, 'left': 200 });
 
    }).mouseleave(function () {
 
        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index', '1')
			.children("div.preview")
			.animate({ "opacity": "hide" }, "fast");
    });
 
});

Euh le code provient d'un jQuery qui me sert á faire apparaitre une image plus grand quand la souris passe dessus, j'ai copié coller, sur le contenu du javascript malheureusement je ne peux pas t'en dire plus

06/09/2012, 16h34
SpaceFrog

essaye de rajouter une position absolute

Code:

.css({ 'top': 200, 'left': 200, 'display': 'block', 'position': 'absolute'});
06/09/2012, 16h39
tortuegenie

Non ca marche pas non plus

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$(document).ready(function () {
 
    // Get all the thumbnail
    $('div.thumbnail-item').mouseenter(function () {
 
        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image tooltip
        $(this).css('z-index', '15')
			.children("div.preview")
            .css({ 'top': 200, 'left': 200, 'display': 'block' });
 
    }).mouseleave(function () {
 
        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index', '1')
			.children("div.preview")
			.animate({ "opacity": "hide" }, "fast");
    });
 
});

07/09/2012, 09h18
tortuegenie

Non toujours pas. Il prend toujours la position du curseur de la souris.
07/09/2012, 09h54
tortuegenie

c'est bon j'ai trouvé. il fallait mettre position:fixed et c'est reglé