Quelltext der Datei: http://www.michaelster.ch/lernen/daf/papamoll_ddrop.php

Dateigrösse: 19.29 kb

[Anzeige ohne Zeilennummern]


1 
<?php
/***** dbConnect *****/
require_once '/home/httpd/vhosts/michaelster.ch/httpdocs/include/login_webprog08.php';

$mysqli =& new mysqli($host, $user, $password, $dbase);

/***** dbConnect check *****/
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />     
    <title>Papa Moll geht baden</title>

<script type="text/javascript">
<!--
var drag = "inaktiv";
var aktivX = 0;
var aktivY = 0;

// Wir brauchen eine neue globale Variable, die das derzeit 
// aktive Element angibt:
var aktivDiv = null;

// Ausserdem halten wir den z-index Wert des derzeit aktiven 
// Elements fest, damit wir das naechste aktive Element 
// darueber legen koennen. Am Anfang setzen wir ihn einfach 
// auf 1000:
var aktivZindex = 1000;

// Anzahl der nicht dragable&dropable divs => das sind die letzten
// 7 divs mit den IDs #navpanel_[...] und der ID #leittext.
var anz_DIVs = 7;

function init() {
       // Im Array divs[] sammeln wir alle (positionierten) div-
       // Elemente der Seite:
       divs  = (document.layers) 
               ? document.layers 
            : (document.all) ? document.all.tags("DIV") : document.getElementsByTagName("DIV");

       // Jetzt weisen wir jedem dragable&dropable div den MouseDown-Handler zu
       for (i=0; i< (divs.length-anz_DIVs); i++) {
        if (divs[i].captureEvents) // Netscape
            divs[i].captureEvents(Event.MOUSEDOWN);
        divs[i].onmousedown = mdown;
       }

       // die andern Handler nicht vergessen:
       if (document.captureEvents) // Netscape
        document.captureEvents(Event.MOUSEMOVE || Event.MOUSEUP);
       document.onmouseup      = mup;
       document.onmousemove = mmove;
    
    var pos_ausDB = "";
<?php
if (isset($_POST['liste']))    {
    echo 'pos_ausDB = "'.$_POST['liste'].'";
    ';
}
if (isset($_POST['vis']))    {
    echo 'pos_ausDB = "'.$_POST['positionen'].'";
    ';
}
?>
   if (pos_ausDB != "") {
      // Array mit Wertpaaren erzeugen:
      var divPosArray = pos_ausDB.split("+");
      for (i=0; i< (divs.length-anz_DIVs); i++) {

         // Werte aus Wertpaar lesen:
         var posX = divPosArray[i].split(",")[0];
         var posY = divPosArray[i].split(",")[1];

         // Elemente positionieren:
         if (document.layers) {
            divs[i].left = posX;
            divs[i].top  = posY;
         }
         else {
            divs[i].style.left = posX;
            divs[i].style.top  = posY;
         }
      }
   }
}

window.onload = init;

function mdown(e) {
   // Wir muessen onmousedown herausfinden, welches div-
   // Element aktiviert wurde. Dazu benutzen wir "this". 
   // Dann zaehlen wir den bislang höchsten z-Index Wert eins 
   // nach oben und weisen ihn dem aktiven div zu. Der Rest 
   // ist wie gehabt.
   aktivDiv = this;
   
   if (document.layers) {
     aktivDiv.zIndex = aktivZindex++;
   } else {
     aktivDiv.style.zIndex = aktivZindex++;
   }
   
   drag = "aktiv";
   aktivX = (e) ? e.pageX : event.clientX + document.body.scrollLeft;
   aktivY = (e) ? e.pageY : event.clientY + document.body.scrollTop; 
   return false;
}

function mmove(e) {
   // fast keine Aenderungen im Vergleich zum einfachen Drag&Drop
   if (drag == "inaktiv") return;
   var neuX = (e) ? e.pageX : event.clientX + document.body.scrollLeft;
   var neuY = (e) ? e.pageY : event.clientY + document.body.scrollTop;
   var distX = (neuX-aktivX);
   var distY = (neuY-aktivY);
   aktivX = neuX;
   aktivY = neuY;
   if (document.layers) {
      aktivDiv.left += distX;
      aktivDiv.top  += distY;
   } else {
      aktivDiv.style.left = parseInt(aktivDiv.style.left) + distX;
      aktivDiv.style.top  = parseInt(aktivDiv.style.top)  + distY;
   }
} 

var positionenString;
function mup(e){
   drag = "inaktiv";
   positionenString = "";
   // Positionen-String zusammenstellen:
   for (i=0; i< (divs.length-anz_DIVs); i++) {
      var posX = (document.layers) ? divs[i].left : parseInt(divs[i].style.left);
      var posY = (document.layers) ? divs[i].top  : parseInt(divs[i].style.top);
      if(i==0) {
          positionenString += posX + "," + posY;
      } else {
          positionenString += "+" + posX + "," + posY;
      }
   }
}

function nw() {
    n=window.open('','neu','status=yes,toolbar=no,titlebar=no,menubar=no,scrollbars=no,resizable=yes,width=350,height=500,top=0,left=0');
    n.focus();
}

function nwin() {
    n=window.open('','new','status=yes,toolbar=no,titlebar=no,menubar=no,scrollbars=no,resizable=yes,width=220,height=350,top=125,left=777');
    n.focus();
}
//-->
</script>

<?php
$meldung = '';
if (isset($_POST['senden']))
{
    if (strlen($_POST['konstellation']) < 3) {
        $meldung = '<b><font color="#ff3300">Bitte Vorname &uuml;berpr&uuml;fen (mindestens 3 Zeichen)</font></b>';
    }
    elseif (strlen($_POST['konstellation']) > 10) {
        $meldung = '<b><font color="#ff3300">Bitte Vorname &uuml;berpr&uuml;fen (maximal 10 Zeichen )</font></b>';
    }
    else {
        $sql = 'INSERT INTO ebenen (datum,name,positionen) 
                VALUES (NOW(NULL),"'.$_POST['konstellation'].'","'.$_POST['positionen'].'")';
        
        if($mysqli->query($sql) !== false) {
            $meldung = '<b><font color="green">Positionen gespeichert - bitte L&ouml;sungen anklicken und kontrollieren!</font></b>';
        }
        $pid = $mysqli->insert_id;
    }
    echo '<br /><br />';
    echo $meldung;
}

/* Zufallsgenerator */
function position_x() {
    $pos1 = rand(2,7);
    $pos2 = rand(0,9);
    $pos3 = rand(0,9);
    $pos_x = $pos1.$pos2.$pos3.'px';
    return $pos_x;
}

function position_y() {
    $pos1 = rand(1,4);
    $pos2 = rand(5,9);
    $pos3 = rand(0,9);
    $pos_y = $pos1.$pos2.$pos3.'px';
    return $pos_y;
}
?>

<style type="text/css">
body    { margin:0px; padding-top:15px; padding-left: 12px; font-family: verdana,arial,sans-serif; }
a img    { border:0px !important; cursor: pointer !important; }
img        { cursor: move !important; border:1px solid #000000; }
.sub    { background-color: #f5f5f5; color: #000000; font-family: arial,verdana, sans-serif; font-size: 13px; font-weight: bold; width: 170px; margin: 0px; padding-top: 8px; cursor: pointer; -moz-border-radius: 10px; border-left: 1px solid #000000; border-top: 1px solid #000000; border-right: 2px solid #808080; border-bottom: 2px solid #808080; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
.leer    { background-color:#f8f8ff; color:#849DBC !important; font-family: arial,verdana, sans-serif; font-size: 12px !important; }
#navpanel0    { margin:0px; padding:0px; background-color: #849DBC; position: absolute; top: 10px; left: 700px; width: 122px; height: 32px; z-index:15; border-top:1px solid #000000; border-bottom:0px solid #849DBC; 
visibility:<?php if(!empty($pid)) { echo 'visible'; } else { echo 'hidden'; } ?>; }
#navpanel1    { background-color: #849DBC; position: absolute; top: 10px; left: 160px; width: 665px; height: 36px; visibility: visible; z-index:10; border:1px solid #000000; }
#navpanel2    { background-color: #849DBC; position: absolute; top: 10px; left: 10px; width: 220px; height: 36px; visibility: visible; z-index:15; border:1px solid #000000; border-right:0px solid #849DBC; }
#navpanel_icon    a img { margin:0px; padding:0px; position: absolute; top: 11px; left: 845px; width: 26px; height: 26px; z-index:12; }
#navpanel_tab    { position:absolute; top:75px; left:10px; width:816px; height:510px; clip:rect(0px 816px 510px 0px); layer-background-color: #ffffff; z-index:5; }
#leittext    { position:absolute; top:36px; left:838px; width:40px; height:12px; font-size:10px; margin:0; padding:0; }
#navpanel_link    { position: absolute; top: 20px; left: 910px; width: 90px; height: 30px; }
#navpanel_link a    { color: #006666; font-size: 11px; font-family: verdana,arial,sans-serif; font-weight: bold; padding: 2px; }
#navpanel_link a:hover { font-size: 11px; font-family: verdana,arial,sans-serif; font-weight: bold; color: #FFFFFF; background-color: #006666; text-decoration: none }
#navpanel_link img, #navpanel_link a img    { border: 0px solid white; }
</style>

</head>
    
<body style="backgroundcolor:#ffffff">

<div id="bild1" style="position: absolute; top: 76px; left: 12px; width: 200px; height: 170px; visibility: visible; display: block; z-index:30"><img src="img/moll-1.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>
<div id="bild2" style="position: absolute; top: 458px; left: 583px; width: 200px; height: 170px; visibility: visible; display: block; z-index:10"><img src="img/moll-2.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>
<div id="bild3" style="position: absolute; top: 460px; left: 350px; width: 200px; height: 170px; visibility: visible; display: block; z-index:30"><img src="img/moll-3.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>
<div id="bild4" style="position: absolute; top: 435px; left: 60px; width: 200px; height: 170px; visibility: visible; display: block; z-index:30"><img src="img/moll-4.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>
<div id="bild5" style="position: absolute; top: 260px; left: 575px; width: 200px; height: 170px; visibility: visible; display: block; z-index:30"><img src="img/moll-5.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>
<div id="bild6" style="position: absolute; top: 275px; left: 285px; width: 200px; height: 170px; visibility: visible; display: block; z-index:30"><img src="img/moll-6.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>
<div id="bild7" style="position: absolute; top: 77px; left: 500px; width: 200px; height: 170px; visibility: visible; display: block; z-index:10"><img src="img/moll-7.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>
<div id="bild8" style="position: absolute; top: 65px; left: 730px; width: 200px; height: 170px; visibility: visible; display: block; z-index:30"><img src="img/moll-8.gif" alt=" Linke Mouse-Taste gedr&uuml;ckt halten und das Bild verschieben " width="200" height="170" border="1"></div>

<div id="test1" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:800; top:450; width:202px; height:80px; clip:rect(0px 202px 80px 0px); color:#ffffff; background-color:#849DBC; layer-background-color:#849DBC; z-index:26;">Evi sich vornüber beugt und auf kleine Entchen zeigt. <br>Doch dabei hält sie sich nicht und verliert das Gleichgewicht.</div>
<div id="test2" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:797; top:435; width:202px; height:80px; clip:rect(0px 202px 80px 0px); color:#ffffff; background-color:#849DBC; layer-background-color:#849DBC; z-index:25;">Moll, der sofort hilfsbereit, packt die Kleine rasch am Kleid, und der Schiffer hält den Ring, der vorher im <br>Boote hing.</div>
<div id="test3" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:794; top:420; width:202px; height:80px; clip:rect(0px 202px 80px 0px); color:#ffffff; background-color:#849DBC; layer-background-color:#849DBC; z-index:24;">Nach dem schönen Augenblick, kehren sie beglückt zurück. Papa Moll zeigt mit der Hand: 'Dort spring ich zuerst ans Land!'</div>
<div id="test4" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:791; top:405; width:202px; height:80px; clip:rect(0px 202px 80px 0px); color:#ffffff; background-color:#849DBC; layer-background-color:#849DBC; z-index:23;">'EVI', sagt Moll sehr empört, so ein Tun sich nicht gehört. Laut tönt jetzt des Rheinfalls Brausen, Gischt und Wasser abwärts sausen!</div>
<div id="test5" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:788; top:390; width:202px; height:80px; clip:rect(0px 202px 80px 0px); color:#ffffff; background-color:#849DBC; layer-background-color:#849DBC; z-index:22;">Und man fährt mit frohem Sinn, langsam nun zum Landen hin. Moll nun elegant beschwingt, aus dem Boot zum Ufer springt.</div>
<div id="test6" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:785; top:375; width:202px; height:80px; clip:rect(0px 202px 80px 0px); color:#ffffff; background-color:#849DBC; layer-background-color:#849DBC; z-index:21;">Doch er rutscht, o weh, o Graus! auf der nassen Mauer aus. - und da ihn hier gar nichts hält - PLUMPS! auch<br>er ins Wasser fällt!</div>
<div id="test7" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:782; top:360; width:202px; height:80px; clip:rect(0px 202px 80px 0px); color:#ffffff; background-color:#849DBC; layer-background-color:#849DBC; z-index:20;">'PATSCH!' sie fliegt in hohem Bogen in des Rheines hohe Wogen und die Entlein voller Schreck, fliegen ängstlich schnatternd weg.</div>
<div id="test8" style="border: 1px solid #000000; cursor: move !important; font-family:verdana,arial,sans-serif; font-size:12px; padding:4px; font-weight:bold; position:absolute; left:12px; top:249px; width:202px; height:80px; clip:rect(0px 202px 80px 0px);  color:#ffffff; background-color:#849DBC; layer-background-color: #849DBC; z-index:20;">Mit dem Mann, dem Schiffs-<br>Pilot, steigen sie nun in ein Boot, um den Rheinfall, der<br>so schön, aus der Nähe anzusehen.</div>

<div id="navpanel_tab">
<table width="816" border="1" cellspacing="0" cellpadding="0" align="left" class="leer">
<tr align="center" valign="middle">
<td width="202" height="172" align="center" valign="middle">Bild 1</td>
<td width="202" height="172" align="center" valign="middle">Bild 2</td>
<td width="202" height="172" align="center" valign="middle">Bild 3</td>
<td width="202" height="172" align="center" valign="middle">Bild 4</td>
</tr>
<tr align="center" valign="middle">
<td width="202" height="82" align="center" valign="middle">Text 1</td>
<td width="202" height="82" align="center" valign="middle">Text 2</td>
<td width="202" height="82" align="center" valign="middle">Text 3</td>
<td width="202" height="82" align="center" valign="middle">Text 4</td>
</tr>
<tr align="center" valign="middle">
<td width="202" height="172" align="center" valign="middle">Bild 5</td>
<td width="202" height="172" align="center" valign="middle">Bild 6</td>
<td width="202" height="172" align="center" valign="middle">Bild 7</td>
<td width="202" height="172" align="center" valign="middle">Bild 8</td>
</tr>
<tr align="center" valign="middle">
<td width="202" height="82" align="center" valign="middle">Text 5</td>
<td width="202" height="82" align="center" valign="middle">Text 6</td>
<td width="202" height="82" align="center" valign="middle">Text 7</td>
<td width="202" height="82" align="center" valign="middle">Text 8</td>
</tr>
</table>
</div>

<div id="navpanel1">
<table width="665" height="32" border="0" cellpadding="3" cellspacing="0">
<tr>
<form style="margin:0px; padding:0px;" name="EbenenSpeicher" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" onsubmit="this.positionen.value=positionenString;">
<input type="hidden" name="positionen" />
<input type="hidden" name="vis" />
<td width="300" align="right" style="font-size:13px; font-weight: bold; font-family: arial, verdana, sans-serif; color:#ffffff;">
<a style="margin:0px; padding:0px;" href="loesungen.php" target="new" onclick="nwin();" onfocus="if(this.blur) this.blur();"><img style="cursor:text !important" src="img/blind.gif" alt="" width="10" height="10" border="0" /></a>
Dein Vorname: <input type="text" name="konstellation" maxlength="12" size="15" value="" /></td>
<td valign="bottom" align="left"><input style="margin:0px; padding:0px; cursor:pointer;" title="Hier k&ouml;nnen Sie die Positionen Ihrer Bilder und Texte speichern" type="submit" name="senden" value="Positionen speichern" class="sub" /></td>
</form>
</tr>
</table>
</div>

<div id="navpanel2">
<table height="34" border="0" cellpadding="4" cellspacing="0"><tr><td>
<form style="margin:0px; padding:0px;" name="EbenenMenu" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
  <select name="liste" size="1" onchange="if(this.selectedIndex!=0) this.form.submit();">
    <option value="nichts">gespeicherte Resultate</option>
    <option value="nichts">< - - - - - - - - - - - - - - - - - - ></option>
<?php
function date_mysql2german($datum) {
  if (ereg('[-]', $datum)) {
      list($jahr, $monat, $tag) = explode ("-", $datum);
  } else {
     $jahr  = substr($datum, 0, 4);
    $monat = substr($datum, 4, 2);
    $tag   = substr($datum, 6, 2);
  }
  return sprintf ('%02d.%02d.%04d', $tag, $monat, $jahr);
}

$sql = 'SELECT * FROM ebenen ORDER BY datum DESC';
$result = $mysqli->query($sql);
$anzahl = $result->num_rows;

while( $data = mysqli_fetch_array($result, MYSQLI_BOTH) )
{
    $sel = '';
    if ($data['positionen'] == $_POST['liste']) {
        $sel = ' selected="selected"';
    }
    echo '<option value="' . $data['positionen'] . '" ' . $sel . '>' . $data['name'] . '&nbsp;|&nbsp;' . date_mysql2german($data['datum']) . '</option>';
}

/***** close result *****/
$result->close();

/***** close dbConnect *****/
$mysqli->close();
?>
  </select>
</form>
</td></tr>
</table>
</div>


<div id="navpanel0">
<table height="32" border="0" cellpadding="0" cellspacing="0"><tr><td>
<a style="margin:0px; padding:0px;" title="" href="loesungen.php" target="new" onclick="nwin();" onfocus="if(this.blur)this.blur();"><img src="img/loesungen.gif" alt="Lösungen" width="120" height="30" border="0" /></a>
</td></tr></table>
</div>

<div id="navpanel_icon">
<a style="margin:0px; padding:0px;" title="Fragen - Leittext" href="leittext.php" target="neu" onclick="nw();" onfocus="if(this.blur)this.blur();"><img src="img/icon_help_winxp.gif" alt="Fragen - Leittext" width="26" height="26" border="0" align="center" valign="middle" /></a>
</div>

<div id="leittext">
Leittext
</div>

<div id="navpanel_link">
<a href="artikel.php">weiter</a>&nbsp;<img src="img/back_turnable.gif" width="25" height="25" alt="" border="0" />
</div>

</body>
</html>