советов давать не буду,
когда-то я бороздил эту тему, вот что получилось:
| Код |
<html><head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript">
load=new Array(); var n=0;
for(i=0; i < n; i++) {
load[i]=new Image();
load[i].src='../img/white.bmp'; }
var ns=(document.layers);
var ns6=(document.getElementById&&!document.all);
var ie=(document.all);
var y=null; var x=null; var z=null; var w=null;
if(ns||ns6) {
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.releaseEvents(Event.MOUSEMOVE); }
if(ns) { window.onmousedown=down; window.onmouseup=up }
if(ie||document.getElementById) { document.onmousedown=down; document.onmouseup=up }
function down(e) {
if(ns) {
if(document.layers['bloc'+e.target.name]) {
window.onmousemove=move;
z=document.layers['bloc'+e.target.name];
y=e.layerY;
x=e.layerX;
document.layers['bloc'+e.target.name].zIndex=n++; }
else { return true }
w=z.name.charAt(z.name.length-1); }
if(ie && window.event.srcElement.parentElement) {
if(window.event.srcElement.parentElement.id.indexOf("bloc") != -1) {
document.onmousemove=move;
z=window.event.srcElement.parentElement;
y=window.event.offsetY;
x=window.event.offsetX;
w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1);
window.event.srcElement.parentElement.style.zIndex=n++; }}
if(ns6) {
if(e.target.parentNode.id.indexOf("bloc") != -1) {
document.onmousemove=move;
z=e.target.parentNode.style;
x=e.clientX - parseInt(z.left);
y=e.clientY - parseInt(z.top);
w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1);
z.zIndex=n++; }}
return false; }
function move(e) {
if(ns && z) {
z.left=e.pageX-x; z.top=e.pageY-y;
document.formic.butgo.value=z.left; }
if(ns6 && z) {
z.top=parseInt(e.clientY)-y; z.left=parseInt(e.clientX)-x;
document.formic.butgo.value=z.left; }
if(ie && z) {
str = z.id; //str3 = 'bloc' + str1;
ptx = window.event.clientX-x; pty = window.event.clientY-y;
if(str.search('x') == -1) {
str1 = str.slice(4,str.length);
z.style.posLeft=ptx; z.style.posTop=pty;
document.formic['ft_xy_' + str1].value='x' + z.style.posLeft + 'x' + z.style.posTop + '-' + str1; }
else {
str1 = str.slice(4,-1); str2 = 'pics' + str1;
if(str1 == 0) { ptx1 = bloc0.style.posLeft; pty1 = bloc0.style.posTop; }
else if(str1 == 1) { ptx1 = bloc1.style.posLeft; pty1 = bloc1.style.posTop; }
else if(str1 == 2) { ptx1 = bloc2.style.posLeft; pty1 = bloc2.style.posTop; }
else if(str1 == 3) { ptx1 = bloc3.style.posLeft; pty1 = bloc3.style.posTop; }
else if(str1 == 4) { ptx1 = bloc4.style.posLeft; pty1 = bloc4.style.posTop; }
else if(str1 == 5) { ptx1 = bloc5.style.posLeft; pty1 = bloc5.style.posTop; }
else if(str1 == 6) { ptx1 = bloc6.style.posLeft; pty1 = bloc6.style.posTop; }
else if(str1 == 7) { ptx1 = bloc7.style.posLeft; pty1 = bloc7.style.posTop; }
else if(str1 == 8) { ptx1 = bloc8.style.posLeft; pty1 = bloc8.style.posTop; }
else if(str1 == 9) { ptx1 = bloc9.style.posLeft; pty1 = bloc9.style.posTop; }
else if(str1 == 10) { ptx1 = bloc10.style.posLeft; pty1 = bloc10.style.posTop; }
else if(str1 == 11) { ptx1 = bloc11.style.posLeft; pty1 = bloc11.style.posTop; }
else if(str1 == 12) { ptx1 = bloc12.style.posLeft; pty1 = bloc12.style.posTop; }
else if(str1 == 13) { ptx1 = bloc13.style.posLeft; pty1 = bloc13.style.posTop; }
else if(str1 == 14) { ptx1 = bloc14.style.posLeft; pty1 = bloc14.style.posTop; }
else if(str1 == 15) { ptx1 = bloc15.style.posLeft; pty1 = bloc15.style.posTop; }
else if(str1 == 16) { ptx1 = bloc16.style.posLeft; pty1 = bloc16.style.posTop; }
else if(str1 == 17) { ptx1 = bloc17.style.posLeft; pty1 = bloc17.style.posTop; }
else if(str1 == 18) { ptx1 = bloc18.style.posLeft; pty1 = bloc18.style.posTop; }
else if(str1 == 19) { ptx1 = bloc19.style.posLeft; pty1 = bloc19.style.posTop; }
else if(str1 == 20) { ptx1 = bloc20.style.posLeft; pty1 = bloc20.style.posTop; }
z.style.posLeft = (document[str2].width = ptx - ptx1) - 5;
z.style.posTop = (document[str2].height = pty - pty1) - 5;
document.formic['ft_wh_'+str1].value='w' + document[str2].width + 'w' + document[str2].height + '-' + str1; }}
return false; }
function up(e) {
if(ie||ns6) document.onmousemove=null;
if(ns)window.onmousemove=null;
z=null; }
</script>
</head>
<body bgcolor="#cccccc" link="#FFFFFF" class="ft">
<div id="bloc0" style="position: absolute; top: 200px; left: 300px; cursor: hand">
<img src="../img/white.bmp" name="pics0" width=300 height=300 border=1 galleryimg="no">
<div id="bloc0x" style="position: absolute; top: 295px; left: 295px; cursor: se-resize">
<img src="../img/white.bmp" name="pics0x" width=5 height=5 border=1></div>
<div style="position: absolute; top: 5px; left: 5px">áàçà ýëåìåíòà</div>
</div>
<?php $ft_n = 0;
for($i = 1; isset($topis[$i][2]); $i++) {
if($topis[$i][2] == 'label' or $topis[$i][2] == 'color' or $topis[$i][2] == 'check') continue;
$ft_n++; $ft_top = $ft_n*60; $ft_left = 10 + 5*($ft_n%2);
if($ft_top > 730) { $ft_left = $ft_left + 180; $ft_top = $ft_top - 720; }
elseif($ft_top > 370) { $ft_left = $ft_left + 90; $ft_top = $ft_top - 360; }
if(strlen($i) < 2) { $ft_k = '0'.$ft_n; } else { $ft_k = $ft_n; }
$ft_xy[$ft_n] = '<input type="text" name="ft_xy_'.$ft_n.'">';
$ft_wh[$ft_n] = '<input type="text" name="ft_wh_'.$ft_n.'">'; ?>
<div id="bloc<?=$ft_n?>" style="position: absolute; top: <?=$ft_top?>px; left: <?=$ft_left?>px; cursor: hand">
<img src="../img/white.bmp" name="pics<?=$ft_n?>" width=80 height=80 border=1 galleryimg="no">
<div id="bloc<?=$ft_n?>x" style="position: absolute; top: 75px; left: 75px; cursor: se-resize">
<img src="../img/white.bmp" name="pics<?=$ft_n?>x" width=5 height=5 border=1></div>
<div style="position: absolute; top: 5px; left: 5px"><? echo $topis[$i][0].'<br>('.$topis[$i][3].')'; ?></div>
</div>
<?php } ?>
<form name="formic" action="ft_construct.php" method="post" enctype="multipart/form-data"><tr><td>
<input type="hidden" name="ft_t" value="<?=$ft_t?>">
<input type="text" name="ft_xy_0"><input type="text" name="ft_wh_0">
<?php for($i = 1; $i <= $ft_n; $i++) {
echo $ft_xy[$i].$ft_wh[$i]; } ?>
</td></tr>
<tr><td><input type="submit" name="step4" value="óòâåðäèòü"></td></tr>
</form>
</body></html>
|
на php не смотрите, это для передачи параметров созданных областей
|
Не лень было столько копипастить?