Cherche jQuery avec bloc sous menu images

bonjour a tous,

Je cherche un jquery qui, a partir d un menu, ouvrirait un bloc contenant des images sur lesquelles je pourrais cliquer pour qu elles s affichent sur la page courante.
voici un exemple du bloc qui me plairait:

http://www.pepejeans.com/fr_fr/store/looks/homme

Je n ai pas encore trouvé...
Quelqu'un connaitrait il une source ressemblante?

Bonjour,
tu peux toujours commencer par regarder les sources de la page pour te faire une idée ;)

Bonjour No Somking, bonjour à tous,

J'ai bidouillé un css qui mets fait un super effet graphique.
J'ai également trouvé des javascript qui me permette de faire suivre un bulle sur le pointeur souris mais je ne sais pas comment inserer le css dans le pop up.
Quelqu'un aurait une idée?

HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
 
 
<link rel="stylesheet" href="popup.css" type="text/css" />
 
</head>
 
<body>
 
 
<div class="cadre">
<div class="effet"></div>
<div class="titre">TITRE DE L ARTICLE</div>
<div class="resultat"><img src="image.jpg" width="250" height="156"></div>
<div class="effet2"></div>
</div>
 
 
</body>
</html>

popup.css:

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
39
40
41
42
43
44
45
.cadre{
background-image:url(cadre.png); 
position: absolute;
border: 0px solid;
width: 435px;
height: 325px;
z-index:1;
position: absolute;
}
 
.resultat {
z-index:2;
position: absolute;
width: 435px;
height: 325px;
padding: 54px 50px 40px 12px;
  }
 
.effet {
background-image:url(effet.png);
z-index:3;
position: absolute;
overflow: hidden;
width: 435px;
height: 325px;
padding: 0px 0Px 0px 0px;  }
 
.Titre {
z-index:4;
position: absolute;
color: #fffff;
font:25px arial,sans-serif;
width: 435px;
height: 325px;
padding: 15px 50px 40px 20px;
  }	
 
.effet2 {
background-image:url(effet2.png);
z-index:5;
position: absolute;
overflow: hidden;
width: 435px;
height: 325px;
padding: 0px 0Px 0px 0px;  }

Côté Javascript, j'ai un html:

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
<HTML>                                       
<HEAD>
<TITLE>Javascript - Gestion des popup flottantes</TITLE>
 
</HEAD>
<BODY>
 
<SCRIPT>
myBrowser = new Browser();
if (myBrowser.Ok){
   var myMenu = new MenuObj(5);
   createmenu(myMenu,"../../");
} 
</SCRIPT>
 
<DIV id=topdeckph style="position:absolute;VISIBILITY: hidden" ></DIV>
<script language="JavaScript" src="popup.js"></script>
 
	<IMG SRC="secu.png" border=0 
	onmouseover="pop('Secu','<IMG SRC=secu.png>','WHITE');this.style.cursor='hand'"
	onmouseout="kill()">
	<IMG SRC="help.png" border=0 
	onmouseover="pop('help','<IMG SRC=help.png>','WHITE');this.style.cursor='auto'"
	onmouseout="kill()">
</BODY>
</HTML>

et le javascript:

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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
popBrowser = new PopupBrowser();
 
var sknph = document.getElementById("topdeckph");
if (popBrowser.isIE){
   xposph = "event.x";
   yposph = "event.y";
}else{
   xposph = "e.pageX";
   yposph = "e.pageY";
}
 
document.onmousemove = mouseMove;
function mouseMove(e) {
	var phx = eval(xposph);
 
     	// Position maxi a droite	
	if (popBrowser.isIE){
  		maxX = document.body.scrollLeft + document.body.clientWidth;
	}else{	
	        maxX = window.innerWidth	
  	}  
 
	if (popBrowser.isIE)
	    var phy = eval(yposph)+document.body.scrollTop;	
	else	
	    var phy = eval(yposph);
 
     xb = phx + parseInt(sknph.offsetWidth) + 10;
 
     if (xb >= maxX)
        phx -= parseInt(sknph.offsetWidth);	
 
	sknph.style.left = phx +50;
	sknph.style.top  = phy-50; 	
 
}
 
function pop(msg1,msg,bak) {
var content ="<TABLE BORDER=0 CELLPADDING=2 CELLSPACING=0 BACKGROUND='cadre.png' height='100%' width='100%'><TR><TD>"
content +="<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="+bak+">";
content +="<TR><TD ALIGN=CENTER style='border:0pt solid GRAY; border-collapse:collapse' colspan=2 bgcolor='#005385'>";
content +="<FONT COLOR='#FFFFFF' size=-1><B>"+msg1+"<B></TD></TR>";
content +="<TR><TD>";
content +="<FONT class=cls9Noir><CENTER>"+msg+"</TD></TR></TABLE></TD></TR></TABLE>";
 
sknph.innerHTML = content;
sknph.style.visibility = "visible";
 
}
 
function kill() { 
	sknph.innerHTML ='';
	sknph.style.visibility = "hidden"; 
}
 
 
 
 
function PopupBrowser() {
  var ua,i;
  ua = navigator.userAgent.toLowerCase();
 
  s="msie";	  
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE=true;
    this.Ok =true;
    this.version = parseFloat(ua.substr(i + s.length));        
    return;
  }
 
  s="netscape6/";	
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS=true;
    this.version = parseFloat(ua.substr(i + s.length));        
    if (parseFloat(ua.substr(i + s.length)) >= 6 )
    	this.Ok =true;
    else	    	
        this.Ok =false;
 
   return;        
  }
 
  s="netscape/7";	
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE=true;
    this.version = 7;        
    this.Ok =true;
   return;        
  }  
 
 
  this.isNS = ((ua.indexOf('mozilla') !=   -1) &&
            ((ua.indexOf('spoofer')   ==   -1) &&
            (ua.indexOf('compatible') ==   -1)));
  this.version = parseFloat(navigator.appVersion);
  this.Ok = false;
 
 
  return;            
 
}

Compliquer de mixer tout ca..?

C'est bon, j'ai compris...
:)

A force de bidouille, j'ai compris où je devais placer mon code à savoir dans les 'content'.... et ça marche! :)