Bonjour à tous,

Je suis confronté à un petit problème, j'ai mis un simple PagePeel en place. Un PagePeel c'est un effet de page qui se tourne.

Cependant je n'arrive pas à modifier mon script pour effectuer l'effet sur le coin en bas à droite de la page.

Voici ma page : http://s168201440.onlinehome.fr/jQuery/home_v2.html

Voici le code complet de la page :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Page Peel Effect</title>
 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
 
//Page Flip on hover
 
	$("#pageflip").hover(function() {
		$("#pageflip img , .msg_block").stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
		} , function() {
		$("#pageflip img").stop() 
			.animate({
				width: '50px', 
				height: '52px'
			}, 220);
		$(".msg_block").stop() 
			.animate({
				width: '50px', 
				height: '50px'
			}, 200);
	});
 
 
});
</script> 
<style type="text/css">
body {margin:0px};
img { behavior: url(iepngfix.htc) }
#pageflip {
	position: relative;
	right: 0; top: 0;
	float: right; 
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(images/page_flip_flap.png) no-repeat right top;
}
</style>
</head>
<body bgcolor="gray">
 
 
	<div id="pageflip">
		<img src="images/page_flip.png" alt="" border="0"/>
		<div class="msg_block"></div>
	</div>
 
 
</body>
</html>
Je veux donc reproduire le même effet mais sur le coin bas/droite.

Si vous avez une idée de comment faire, je vous serai reconnaissant.

Merci