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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crop et resize</title>
<link type="text/css" href="../css/ui.allPERSO.css" rel="stylesheet" />
<link type="text/css" href="../css/Une_Ligne.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
div.jc_coords
{
width: 500px;
}
div.jc_coords form
{
margin: .5em 0;
padding: .5em;
border: 1px solid;
background: #ccc;
border-color: #C3C3C3 #8B8B8B #8B8B8B #C3C3C3;
}
div.jc_coords input
{
width: 3.5em;
}
div.jc_coords label
{
margin-right: .5em;
font-weight: bold;
font-size: 12px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/ui.core.js"></script>
<script type="text/javascript" src="../js/ui.resizable.js"></script>
<script type="text/javascript" src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
* avec $("img").Jcrop(...);
* et $("img").resizable(..);
* IE 8 crée quatre images !
* une pour Jcrop et une pour resizable pour chaque image.
*/
$("#img1").Jcrop({
onChange: showCoords,
onSelect: giveCoords
});
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function giveCoords(c){
alert("Les coordonnees sont les suivantes : \nOrigine : x= " + c.x + " et y= " + c.y +
"\nExtrémité : x= " + c.x2 + " et y= " + c.y2 +
"\nLa largeur de la sélection fait " + c.w + " pixels, et la hauteur fait " + c.h + " pixels");
}
/*
* Il faut préciser la taille de l'image
* Sinon certain navigateur se comporte bizarement !
*/
$("#img2").resizable(
{
maxHeight: 370,
maxWidth: 500,
aspectRatio: true,
ghost: true
}
);
});
</script>
</head>
</head>
<body>
<div class="jc_coords">
<form onsubmit="return false;">
<label>
X1
<input id="x" type="text" name="x" size="4"/>
</label>
<label>
Y1
<input id="y" type="text" name="y" size="4"/>
</label>
<label>
X2
<input id="x2" type="text" name="x2" size="4"/>
</label>
<label>
Y2
<input id="y2" type="text" name="y2" size="4"/>
</label>
<label>
W
<input id="w" type="text" name="w" size="4"/>
</label>
<label>
H
<input id="h" type="text" name="h" size="4"/>
</label>
</form>
</div>
<div style="text-align:left;">
<img id="img1" src="../images/flowers.jpg" width="500" height="370" />
<br />
<img id="img2" src="../images/flowers2.jpg" width="500" height="370" />
</div>
</body>
</html> |
Partager