Discussion :

[finalfx]

En parcourant le site http://www.shoxx.com, j'ai vu que quand on survole l'image d'un produit un pop-up s'ouvre juste à côté avec l'image en plus grand sans aucune bordure ou barre de menu, je trouve cet effet super pratique mais je ne vois pas comment ils ont fait pour obtenir cet effet. (j'ai essayé de voir dans leurs scripts mais y en a tellement que je me perds dedans [] )

Merci d'avance si vous connaissez un moyen d'obtenir ce genre d'effet

[ryan]

Yop!

L'affichage du popup est commandé par l'évènement onmouseover de l'image

Code :

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

1
2
 
onmouseover="showtrail(300,0,'images.products/e/EMGE001-1-7.jpg')

La fonction showtrail est définie dans le fichier spic.js

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
var w=1
var h=1
 
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;border:2px solid #888888;background:#DDDDDD;"></div>')
 
function gettrailobj()
{
	if (document.getElementById) return document.getElementById("trailimageid").style
	else if (document.all) return document.all.trailimagid.style
}
 
function truebody()
{
	return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function hidetrail()
{
	document.onmousemove=""
	document.getElementById('trailimageid').innerHTML=""
	gettrailobj().visibility="hidden"
	gettrailobj().left=-1000
	gettrailobj().top=0
}
 
 
function showtrail(width,height,file)
{
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
	{
		w=width
		h=height
		gettrailobj().visibility="visible"
		gettrailobj().width=w+"px"
 
		thisfile="imagemark.php?image="+file;
		//document.getElementById('trailimageid').innerHTML="<div>"+document.getElementById('preload_text').value+"</div>";
		document.getElementById('trailimageid').innerHTML="<img src='"+ thisfile +"' width='"+w+"px'>"; 
			document.onmousemove=followmouse
	}
}
 
 
function followmouse(e)
{
 
	if(navigator.userAgent.toLowerCase().indexOf('opera') == -1 && navigator.userAgent.toLowerCase().indexOf('safari') == -1)
	{
 
		var xcoord=20
		var ycoord=-265
		//var ycoord=20
 
		if (typeof e != "undefined")
		{
			xcoord+=e.pageX
			ycoord+=e.pageY
		}
		else if (typeof window.event !="undefined")
		{
			xcoord+=truebody().scrollLeft+event.clientX
			ycoord+=truebody().scrollTop+event.clientY
		}
 
		var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
		var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
 
		if (xcoord+w+3>docwidth)
		xcoord=xcoord-w-(20*2)
 
		if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
		ycoord=ycoord-h-20;
 
		gettrailobj().left=xcoord+"px"
		gettrailobj().top=ycoord+"px"
 
	}
 
}

[SpaceFrog]

heu pas besoin d'aller voir allieurs, tout est chez nous dasn la FAQ ...