Cherche jQuery avec bloc sous menu images

**Benjea** · 23/11/2012, 22h47

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?

**NoSmoking** · 24/11/2012, 12h23

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

**Benjea** · 02/12/2012, 11h17

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

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

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
.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 html :

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

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