Il problema si risolve con questo codice:
Codice PHP:
$('#photo').imgAreaSelect({ x1: posX1, y1: posY1, x2: posX2, y2: posY2,handles: false,resizable: false, onSelectChange: preview, minWidth:w, minHeight:h });
Ma a me sorge un altro problema...
Se uso questo sistema in una normale pagina... tutto ok.
Ma se uso questo sistema in una pagina dove uso le TABS di JQUERY e metto l'immagine in una delle TABS (o cmq all'interno del DIV di appartenenza delle TABS) la parte in trasparenza sopra l'immagine mi si sfasa di circa 10px uscendo dall'immagine.
E' capitato anche a voi?
Metto l'HTML della pagina per far capire meglio quello che ho detto 
Codice PHP:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="Gennaro Sannino"/>
<meta name="copyright" content="AKKAttp snc" />
<meta name="robots" content="{$robots}" />
<meta name="DC.language" content="ita-eng" scheme="RFC1766" />
<meta name="description" content="Popup ritaglia immagine" />
<meta name="keywords" content="popup, ritaglia, immagine" />
<title>Ritaglia immagine</title>
<link rel="stylesheet" type="text/css" href="../librerie_ext/jquery/css/jquery-ui-1.8.1.custom.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie_ext/jquery/css/prettyCheckboxes.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie_ext/jquery/css/imgareaselect-default.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie_ext/jquery/css/colorpicker.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie_ext/jquery/css/prettyPhoto.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie/css/fissi.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie/css/form.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie/css/generico.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie/css/paragrafi.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie/css/tema.css" media="all" /><link rel="stylesheet" type="text/css" href="../librerie_ext/jquery/css/tipsy.css" media="all" /><script src="../librerie/js/variabili_generali.js" type="text/javascript"></script><script src="../librerie/js/lib_function.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery.usermode.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery.bind.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/prettyCheckboxes.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery.ui.datepicker-it.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/timepicker.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery.imgareaselect.pack.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/colorpicker.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/colorpicker_eye.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/colorpicker_utils.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery.prettyPhoto.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery.corner.js" type="text/javascript"></script><script src="../librerie_ext/jquery/js/jquery.tipsy.js" type="text/javascript"></script><script language="javascript">
$(document).ready(function(){
//$('#photo').imgAreaSelect({handles: false, fadeSpeed: 200, minWidth:70, minHeight:70,resizable: false, onSelectChange: preview });
var w=70;
var h=70;
var posX1=63;
var posY1=0;
var posX2=posX1+w;
var posY2=posY1+h;
$('#photo').imgAreaSelect({ x1: posX1, y1: posY1, x2: posX2, y2: posY2,handles: false,resizable: false, onSelectChange: preview, minWidth:w, minHeight:h });
$('#0000000045').click( function(){ parent.$.prettyPhoto.close(); });
var $tabs=$("#tabs").tabs({ disabled:[0,1,2], selected: 1 });
});
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#IN_0000000039').val(selection.x1);
$('#IN_0000000040').val(selection.y1);
/*$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height); */
//alert(selection.x1);
}
</script>
</head>
<body class="popup">
<div id="content" >
<div id="tabs">
<ul>[*][url="#file"]<span>1. File » </span>[/url][*][url="#crop"]<span>2. Immagine » </span>[/url][*][url="#fine"]<span>3. Fine </span>[/url] [/list]
<div id="file"></div>
<div id="crop">
<form id="modulo" name="modulo" class="acapo" method="POST" action="crop_img.php?tipo=1&max=2000000&idCampo=IN_0000000025&lng=IT&dim=400x300&dim2=133x100&crop=70x70&perm=0&idFile=0000000080&PHPSESSID=jbp4pqo314b9rbpjdqj4fbult4&AGG=1&file=THUMB_0000000080&ext=jpg&size=18.06 KB" enctype="multipart/form-data">
<fieldset title="Upload" class="popup">
<legend>Seleziona area</legend>
<div class="center">
[img]../file_pubblici/THUMB_0000000080[/img]
</div>
<div class="center" style="margin:10px 0 25px 0">Seleziona l'area dell'immagine da visualizzare.</div>
<input type="hidden" class="input" tabindex="100" readonly="readonly" id="IN_0000000039" name="IN_0000000039" value="0"/><input type="hidden" class="input" tabindex="100" readonly="readonly" id="IN_0000000040" name="IN_0000000040" value="0"/><input type="hidden" class="input" tabindex="100" id="IN_0000000041" name="IN_0000000041" value="FILE_0000000080"/><input type="hidden" class="input" tabindex="100" id="IN_0000000042" name="IN_0000000042" value="IN_0000000025"/><input type="hidden" class="input" tabindex="100" id="IN_0000000043" name="IN_0000000043" value="0000000080"/> <div class="clear right w95" style="margin-bottom:20px;">
<button class="input annulla" tabindex="100" type="button" name="IN_0000000045" id="IN_0000000045" >Annulla</button><button class="input conferma" tabindex="100" type="submit" name="IN_0000000044" id="IN_0000000044" >Conferma</button> </div>
</fieldset>
</div>
</div>
<div id="tab3"></div>
</div>
</div>
</body>
</html>
chiedo scusa per la leggibilità, ma è il risultato di una pagina PHP
Rispondi quotando
