Discussion :

[bluemanca]

Dans le code suivant :

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
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
} 
.thumbnail:hover{
background-color: transparent;
z-index: 50;
} 
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: 0000FF;
padding: 0px;
left: -1000px;
border: 0px dashed red;
visibility: hidden;
color: black;
text-decoration: none;
} 
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
} 
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -310px;
left: -160px; /*position where enlarged image should offset horizontally */
} 
</style>

Comment faire que dans la partie ".thumbnail:hover span{", on puisse afficher l'image NON PAS DE FACON RELATIVE à l'objet qui le demande mais en coordonnées absolues du DOCUMENT / ou d'un autre objet ?

Par avance MERCI !

BlueMan

[Er3van]

Le positionnement absolu dépend de ton conteneur, si ton conteneur est body, ce sera par rapport au document, sinon, par rapport au conteneur.

Et ".thumbnail:hover span{" ne fonctionnera pas sous IE 6 qui ne gère pas les pseudo élément :hover sur autre chose que les liens.
JavaScript est donc la solution de recours.