Discussion :

[tortuegenie]

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 :

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
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");
    });
 
});

[SpaceFrog]

e.pageX et y = e.pageY représentent les coordonnées de la souris lors du click ..

[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

[SpaceFrog]

l'attribution de la position c'est là

Code :

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

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

si tu veux une position fixe pour tous :

Code :

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

$(this).children("div.preview").css({ 'top': 200, 'left': 200 });

[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 ?

[SpaceFrog]

on peut voir comment tu as changé ?

Code :

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

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

opacity hide ??? ça fonctionne ça ?

[tortuegenie]

voila regarde si ca te semble correct

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
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

[SpaceFrog]

essaye de rajouter une position absolute

Code :

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

 .css({ 'top': 200, 'left': 200, 'display': 'block', 'position': 'absolute'});

[tortuegenie]

Non ca marche pas non plus

[SpaceFrog]

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
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");
    });
 
});

[tortuegenie]

Non toujours pas. Il prend toujours la position du curseur de la souris.

[tortuegenie]

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