[Débutant] Ext : Resizable et premier plan
Bonjour,
Pour une petite démo je dois faire une page ou l'utilisateur peut redimensionner une image et la positionner dans un cadre.
J'utilise Ext pour redimensionner et déplacer les images, cela marche très bien. Mais si je place une image de mon cadre (png transparent) en avant plan pour guider l'utilisateur les poignées situées sous l'image du cadre ne sont plus accessibles sous Firefox (mais fonctionnent sous IE7).
Le source ressemble à ça :
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript">
var Resizable = {
init : function(){
var custom = new Ext.Resizable('custom', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
handles: 'all',
draggable:true,
dynamic:true
});
}
};
Ext.EventManager.onDocumentReady(Resizable.init, Resizable, true);
</script>
<style type="text/css">
#custom {
cursor:move;
}
#custom-rzwrap{
z-index: 100;
}
#custom-rzwrap .x-resizable-handle{
width:11px;
height:11px;
background:transparent url(lib/ext/resources/images/default/sizer/square.gif) no-repeat;
margin:0px;
}
#custom-rzwrap .x-resizable-handle-east, #custom-rzwrap .x-resizable-handle-west{
top:45%;
}
#custom-rzwrap .x-resizable-handle-north, #custom-rzwrap .x-resizable-handle-south{
left:45%;
}
</style>
</head>
<body>
<img id="cadre" src="images/cadre.png" width="327" height="327" style="position:absolute;left:10px;top:100px;"/>
<img id="custom" src="images/image.png" width="605" height="98" style="position:absolute;left:10px;top:100px;"/>
</body>
</html> |
Quelqu'un aurait une idée pour que cela marche partout ?
Merci d'avance
