Ciao ragazzi, sto facendo una prova a creare una pagina per poter fare dei dradrop su le foto caricate dagli utenti. Una sorta di fotomontaggio. Vi posto il codice:
<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Joseph Glasses test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="scripts/ajaxupload.js"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<style type="text/css">
iframe {
display:none;
}
.Stile2 {
font-size: 10px;
position: relative;
padding: 8;
cursor: move;
width: 102px;
}
.Stile3 {font-size: 9px}
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="wz_dragdrop.js"></script>
<div id="container">
Carica la tua foto - Clicca e trascina l' occhiale sulla foto - Ridimensiona l'occhiale col tasto "shift" e il tasto sx mouse</p>
<script type="text/javascript"><!--
google_ad_client = "pub-0563899222267716";
/* AJAX Image Upload Page */
google_ad_slot = "4310161700";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<div id="demo_area">
<div id="menueffetti">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Mod. '70[/list]
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
[img]cartella/tt.png[/img]</p>
</p>
</div>
<div class="TabbedPanelsContent">Contenuto 2</div>
</div>
</div>
</div>
<div id="left_col">
<fieldset>
<legend>Carica la tua foto !</legend>
<!--
VERY IMPORTANT! Update the form elements below ajaxUpload fields:
1. form - the form to submit or the ID of a form (ex. this.form or standard_use)
2. url_action - url to submit the form. like 'action' parameter of forms.
3. id_element - element that will receive return of upload.
4. html_show_loading - Text (or image) that will be show while loading
5. html_error_http - Text (or image) that will be show if HTTP error.
VARIABLE PASSED BY THE FORM:
maximum allowed file size in bytes:
maxSize = 999999
maximum image width in pixels:
maxW = 430
maximum image height in pixels:
maxH = 520
the full path to the image upload folder:
fullPath = http://www.sensualshop.it/pp/uploads/
the relative path from scripts/ajaxupload.php -> uploads/ folder
relPath = ../uploads/
The next 3 are for cunstom matte color of transparent images (gif,png), use RGB value
colorR = 255
colorG = 255
colorB = 255
The form name of the file upload script
filename = filename
-->
<form action="scripts/ajaxupload.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<input type="file" name="filename" /></p>
<button onclick="ajaxUpload(this.form,'scripts/ajaxupload.php?filename=filename&maxSize=99999 99999&maxW=430&fullPath=http://www.sensualshop.it/pp/uploads/&relPath=../uploads/&colorR=255&colorG=255&colorB=255& maxH=520','upload_area','File Uploading Please Wait...<br /><img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' />','<img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /> Error in Upload, check settings and path info in source code.'); return false;">Upload Image</button>
</form>
</fieldset>
</fieldset>
<small style="font-weight: bold; font-style:italic;">Supported File Types: gif, jpg, png</small> <span class="Stile2">(usare fotografie con profili centrali)</span></div>
<div id="right_col">
<div id="upload_area">
Qui apparirà la tua foto
</div>
Ho sbagliato, rifai!
<script type="text/javascript">var addthis_pub="atwebresults";</script>
<script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<div id="Occhiali">
</p>
</div>
</div>
<div class="clear"> </div>
</div>
<script type="text/javascript"><!--
google_ad_client = "pub-0563899222267716";
/* 728x90, created 2/7/09 */
google_ad_slot = "8399216650";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
</div>
<div id="footer"></div>
<div style="position: fixed; right: 5px; bottom: 65px;"></div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
<script type="text/javascript">
<!--
SET_DHTML("oc3"+CLONE+RESIZABLE);
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>
Come posso fare ad applicare il dragdrop e il resize delle immagini su delle immagini caricate dinamicamente nella pagina??
grazie 1000
p
Rispondi quotando