Динамическое управление позиционированием элементов
Поскольку у всех остальных элементов значение z-index не изменялось (и, следовательно, равно нулю), мы добиваемся того, что перемещаемый рисунок никогда не будет перекрыт другими объектами. Естественно, при окончании перемещения рисунка ему нужно возвратить исходное значение z-index. Для этого в функцию up_it() добавим строку:
document.all[moving].style.zlndex = 0;Итак, давайте посмотрим, что же у нас получается.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>Игра 15</TITLE> <STYLE> BODY { background-color: #979797; color: #FEFEFE; text-align: center; font-weight: bold; font-size: 30px; font-family: sans-serif; } </STYLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //<!-- var tstart; var moving = ""; function mainpbs() { tstart = document.body.clientWidth / 2 - 200; document.a.is.rnaintab.style.left = tstart; function down_it() { var 1 == window.event.srcElement.src.length; if ((window.event.srcElement.tagName = "IMG") && (window.event.srcElement.src.substring(1 - 12, 1 - 4) != "diafanol")) { moving = window.event.srcElement.id; document.all[moving].style.pixelLeft = window.event.clientX - 50; document.all[moving].style.pixelTop = window.event.clientY - 50; document.all[moving].style.zlndex = 5; } } function up_it() { if (moving != "") { if (window.event.clientX >= tstart - 50 && window.event.clientY >= 50) { document.all[moving].style.pixelLeft = Math.round((window.event.clientX - 50 - tstart) / 100) * 100 + tstart + 1; document.all[moving].style, pixelTop = Math.round((window.event.clientY - 50) / 100) * 100 + 1; } document.all[moving].style.zlndex = 0; moving = ""; } } function move_it() { if (moving != "") { document.all[moving].style.pixelLeft = window.event.clientX - 50; document.all[moving].style.pixelTop = window.event.clientY - 50; } event.cancelBubble = true; event.returnValue = false; } //--> </SCRIPT></HEAD> <BODY enLoad="mainpos()" onMouseDown="down_it()" onMouseUp="up_it()" onMouseMove="move_it()"> Расставьте плашки перетаскиванием с помощью мыши <DIV ID="maintab" STYLE="width: 400px; height: 400px; position: absolute; top: 100px;"> TABLE BGCOLOR="#COCOCO" WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="1"> <TR> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> </TR> <TR> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> </TR> <TR> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> </TR> <TR> <TD> <IMG SRC="Images/diafanol.gif" HIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> <TD> <IMG SRC="Images/diafanol.gif" WIDTH="98" HEIGHT="98"> </TD> </TR> </TABLE> </DIV> <IMG ID="p11" SRC="Images/digitll.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="11" STYLE="position: absolute; top: 60px; left: 50px;"> <IMG ID="p12" SRC="Images/digitl2.gif" WIDTH="100" HEIGHT="100" BORDER="0" AtlT="12" STYLE="position: absolute; top: 160px; left: 50px;"> <IMG ID="p13" SRC- "Images/digitl3.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="13" STYLE="position: absolute; top: 260px; left: 50px;"> <IMG ID="p14" SRC="Images/digitl4.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="14" STYLE="position: absolute; top: 360px; left: 50px;"> <IMG ID="p15" SRC="mages/digitl5.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="15" STYLE="position: absolute; top: 460px; left: 50px;"> <IMG ID="p6" SRC="Images/digit6.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="6" STYLE="position: absolute; top: 60px; left: 30px;"> <IMG ID="p7" SRC="Images/digit7.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="7" STYLE="position: absolute; top: 160px; left: 30px;"> <IMG ID="p8" SRC="Images/digit8.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="8" STYLE="position: absolute; top: 260px; left: 30px;"> <IMG ID="p9" SRC="Images/digit9.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="9" STYLE="position: absolute; top: 360px; left: 30px;"> <IMG ID="p10" SRC="Images/digitl0.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="10" STYLE="position: absolute; top: 460px; left: 30px;"> <IMG ID="p1" SRC="Images/digitl.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="1" STYLE="position: absolute; top: 60px; left: 10px;"> <IMG ID="p2" SRC="Images/digit2.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="2" STYLE="position: absolute; top: 160px; left: 10px;"> <IMG ID="p3" SRC="Images/digit3.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="3" STYLE="position: absolute; top: 260px; left: 10px;"> <IMG ID="p4" SRC="Images/digit4.gif" WIDTH="100" KEIGHT="100" BORDER="0" ALT="4" STYLE="position: absolute; top: 360px; left: 10px;"> <IMG ID="p5" SRC="Images/digit5.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="5" STYLE="position: absolute; top: 460px; left: 10px;"></BODY> </HTML>