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

Dateigrösse: 19.29 kb

[Anzeige ohne Zeilennummern]


  1 <?php
  2 /***** dbConnect *****/
  3 require_once '/home/httpd/vhosts/michaelster.ch/httpdocs/include/login_webprog08.php';
  4 
  5 $mysqli =& new mysqli($host, $user, $password, $dbase);
  6 
  7 /***** dbConnect check *****/
  8 if (mysqli_connect_errno()) {
  9     printf("Connect failed: %s\n", mysqli_connect_error());
 10     exit();
 11 }
 12 ?>
 13 
 14 <html>
 15 <head>
 16     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />     
 17     <title>Papa Moll geht baden</title>
 18 
 19 <script type="text/javascript">
 20 <!--
 21 var drag = "inaktiv";
 22 var aktivX = 0;
 23 var aktivY = 0;
 24 
 25 // Wir brauchen eine neue globale Variable, die das derzeit 
 26 // aktive Element angibt:
 27 var aktivDiv = null;
 28 
 29 // Ausserdem halten wir den z-index Wert des derzeit aktiven 
 30 // Elements fest, damit wir das naechste aktive Element 
 31 // darueber legen koennen. Am Anfang setzen wir ihn einfach 
 32 // auf 1000:
 33 var aktivZindex = 1000;
 34 
 35 // Anzahl der nicht dragable&dropable divs => das sind die letzten
 36 // 7 divs mit den IDs #navpanel_[...] und der ID #leittext.
 37 var anz_DIVs = 7;
 38 
 39 function init() {
 40        // Im Array divs[] sammeln wir alle (positionierten) div-
 41        // Elemente der Seite:
 42        divs  = (document.layers) 
 43                ? document.layers 
 44             : (document.all) ? document.all.tags("DIV") : document.getElementsByTagName("DIV");
 45 
 46        // Jetzt weisen wir jedem dragable&dropable div den MouseDown-Handler zu
 47        for (i=0; i< (divs.length-anz_DIVs); i++) {
 48         if (divs[i].captureEvents) // Netscape
 49             divs[i].captureEvents(Event.MOUSEDOWN);
 50         divs[i].onmousedown = mdown;
 51        }
 52 
 53        // die andern Handler nicht vergessen:
 54        if (document.captureEvents) // Netscape
 55         document.captureEvents(Event.MOUSEMOVE || Event.MOUSEUP);
 56        document.onmouseup      = mup;
 57        document.onmousemove = mmove;
 58     
 59     var pos_ausDB = "";
 60 <?php
 61 if (isset($_POST['liste']))    {
 62     echo 'pos_ausDB = "'.$_POST['liste'].'";
 63     ';
 64 }
 65 if (isset($_POST['vis']))    {
 66     echo 'pos_ausDB = "'.$_POST['positionen'].'";
 67     ';
 68 }
 69 ?>
 70    if (pos_ausDB != "") {
 71       // Array mit Wertpaaren erzeugen:
 72       var divPosArray = pos_ausDB.split("+");
 73       for (i=0; i< (divs.length-anz_DIVs); i++) {
 74 
 75          // Werte aus Wertpaar lesen:
 76          var posX = divPosArray[i].split(",")[0];
 77          var posY = divPosArray[i].split(",")[1];
 78 
 79          // Elemente positionieren:
 80          if (document.layers) {
 81             divs[i].left = posX;
 82             divs[i].top  = posY;
 83          }
 84          else {
 85             divs[i].style.left = posX;
 86             divs[i].style.top  = posY;
 87          }
 88       }
 89    }
 90 }
 91 
 92 window.onload = init;
 93 
 94 function mdown(e) {
 95    // Wir muessen onmousedown herausfinden, welches div-
 96    // Element aktiviert wurde. Dazu benutzen wir "this". 
 97    // Dann zaehlen wir den bislang höchsten z-Index Wert eins 
 98    // nach oben und weisen ihn dem aktiven div zu. Der Rest 
 99    // ist wie gehabt.
100    aktivDiv = this;
101    
102    if (document.layers) {
103      aktivDiv.zIndex = aktivZindex++;
104    } else {
105      aktivDiv.style.zIndex = aktivZindex++;
106    }
107    
108    drag = "aktiv";
109    aktivX = (e) ? e.pageX : event.clientX + document.body.scrollLeft;
110    aktivY = (e) ? e.pageY : event.clientY + document.body.scrollTop; 
111    return false;
112 }
113 
114 function mmove(e) {
115    // fast keine Aenderungen im Vergleich zum einfachen Drag&Drop
116    if (drag == "inaktiv") return;
117    var neuX = (e) ? e.pageX : event.clientX + document.body.scrollLeft;
118    var neuY = (e) ? e.pageY : event.clientY + document.body.scrollTop;
119    var distX = (neuX-aktivX);
120    var distY = (neuY-aktivY);
121    aktivX = neuX;
122    aktivY = neuY;
123    if (document.layers) {
124       aktivDiv.left += distX;
125       aktivDiv.top  += distY;
126    } else {
127       aktivDiv.style.left = parseInt(aktivDiv.style.left) + distX;
128       aktivDiv.style.top  = parseInt(aktivDiv.style.top)  + distY;
129    }
130 } 
131 
132 var positionenString;
133 function mup(e){
134    drag = "inaktiv";
135    positionenString = "";
136    // Positionen-String zusammenstellen:
137    for (i=0; i< (divs.length-anz_DIVs); i++) {
138       var posX = (document.layers) ? divs[i].left : parseInt(divs[i].style.left);
139       var posY = (document.layers) ? divs[i].top  : parseInt(divs[i].style.top);
140       if(i==0) {
141           positionenString += posX + "," + posY;
142       } else {
143           positionenString += "+" + posX + "," + posY;
144       }
145    }
146 }
147 
148 function nw() {
149     n=window.open('','neu','status=yes,toolbar=no,titlebar=no,menubar=no,scrollbars=no,resizable=yes,width=350,height=500,top=0,left=0');
150     n.focus();
151 }
152 
153 function nwin() {
154     n=window.open('','new','status=yes,toolbar=no,titlebar=no,menubar=no,scrollbars=no,resizable=yes,width=220,height=350,top=125,left=777');
155     n.focus();
156 }
157 //-->
158 </script>
159 
160 <?php
161 $meldung = '';
162 if (isset($_POST['senden']))
163 {
164     if (strlen($_POST['konstellation']) < 3) {
165         $meldung = '<b><font color="#ff3300">Bitte Vorname &uuml;berpr&uuml;fen (mindestens 3 Zeichen)</font></b>';
166     }
167     elseif (strlen($_POST['konstellation']) > 10) {
168         $meldung = '<b><font color="#ff3300">Bitte Vorname &uuml;berpr&uuml;fen (maximal 10 Zeichen )</font></b>';
169     }
170     else {
171         $sql = 'INSERT INTO ebenen (datum,name,positionen) 
172                 VALUES (NOW(NULL),"'.$_POST['konstellation'].'","'.$_POST['positionen'].'")';
173         
174         if($mysqli->query($sql) !== false) {
175             $meldung = '<b><font color="green">Positionen gespeichert - bitte L&ouml;sungen anklicken und kontrollieren!</font></b>';
176         }
177         $pid = $mysqli->insert_id;
178     }
179     echo '<br /><br />';
180     echo $meldung;
181 }
182 
183 /* Zufallsgenerator */
184 function position_x() {
185     $pos1 = rand(2,7);
186     $pos2 = rand(0,9);
187     $pos3 = rand(0,9);
188     $pos_x = $pos1.$pos2.$pos3.'px';
189     return $pos_x;
190 }
191 
192 function position_y() {
193     $pos1 = rand(1,4);
194     $pos2 = rand(5,9);
195     $pos3 = rand(0,9);
196     $pos_y = $pos1.$pos2.$pos3.'px';
197     return $pos_y;
198 }
199 ?>
200 
201 <style type="text/css">
202 body    { margin:0px; padding-top:15px; padding-left: 12px; font-family: verdana,arial,sans-serif; }
203 a img    { border:0px !important; cursor: pointer !important; }
204 img        { cursor: move !important; border:1px solid #000000; }
205 .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; }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
206 .leer    { background-color:#f8f8ff; color:#849DBC !important; font-family: arial,verdana, sans-serif; font-size: 12px !important; }
207 #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; 
208 visibility:<?php if(!empty($pid)) { echo 'visible'; } else { echo 'hidden'; } ?>; }
209 #navpanel1    { background-color: #849DBC; position: absolute; top: 10px; left: 160px; width: 665px; height: 36px; visibility: visible; z-index:10; border:1px solid #000000; }
210 #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; }
211 #navpanel_icon    a img { margin:0px; padding:0px; position: absolute; top: 11px; left: 845px; width: 26px; height: 26px; z-index:12; }
212 #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; }
213 #leittext    { position:absolute; top:36px; left:838px; width:40px; height:12px; font-size:10px; margin:0; padding:0; }
214 #navpanel_link    { position: absolute; top: 20px; left: 910px; width: 90px; height: 30px; }
215 #navpanel_link a    { color: #006666; font-size: 11px; font-family: verdana,arial,sans-serif; font-weight: bold; padding: 2px; }
216 #navpanel_link a:hover { font-size: 11px; font-family: verdana,arial,sans-serif; font-weight: bold; color: #FFFFFF; background-color: #006666; text-decoration: none }
217 #navpanel_link img, #navpanel_link a img    { border: 0px solid white; }
218 </style>
219 
220 </head>
221     
222 <body style="backgroundcolor:#ffffff">
223 
224 <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>
225 <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>
226 <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>
227 <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>
228 <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>
229 <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>
230 <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>
231 <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>
232 
233 <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>
234 <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>
235 <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>
236 <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>
237 <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>
238 <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>
239 <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>
240 <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>
241 
242 <div id="navpanel_tab">
243 <table width="816" border="1" cellspacing="0" cellpadding="0" align="left" class="leer">
244 <tr align="center" valign="middle">
245 <td width="202" height="172" align="center" valign="middle">Bild 1</td>
246 <td width="202" height="172" align="center" valign="middle">Bild 2</td>
247 <td width="202" height="172" align="center" valign="middle">Bild 3</td>
248 <td width="202" height="172" align="center" valign="middle">Bild 4</td>
249 </tr>
250 <tr align="center" valign="middle">
251 <td width="202" height="82" align="center" valign="middle">Text 1</td>
252 <td width="202" height="82" align="center" valign="middle">Text 2</td>
253 <td width="202" height="82" align="center" valign="middle">Text 3</td>
254 <td width="202" height="82" align="center" valign="middle">Text 4</td>
255 </tr>
256 <tr align="center" valign="middle">
257 <td width="202" height="172" align="center" valign="middle">Bild 5</td>
258 <td width="202" height="172" align="center" valign="middle">Bild 6</td>
259 <td width="202" height="172" align="center" valign="middle">Bild 7</td>
260 <td width="202" height="172" align="center" valign="middle">Bild 8</td>
261 </tr>
262 <tr align="center" valign="middle">
263 <td width="202" height="82" align="center" valign="middle">Text 5</td>
264 <td width="202" height="82" align="center" valign="middle">Text 6</td>
265 <td width="202" height="82" align="center" valign="middle">Text 7</td>
266 <td width="202" height="82" align="center" valign="middle">Text 8</td>
267 </tr>
268 </table>
269 </div>
270 
271 <div id="navpanel1">
272 <table width="665" height="32" border="0" cellpadding="3" cellspacing="0">
273 <tr>
274 <form style="margin:0px; padding:0px;" name="EbenenSpeicher" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" onsubmit="this.positionen.value=positionenString;">
275 <input type="hidden" name="positionen" />
276 <input type="hidden" name="vis" />
277 <td width="300" align="right" style="font-size:13px; font-weight: bold; font-family: arial, verdana, sans-serif; color:#ffffff;">
278 <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>
279 Dein Vorname: <input type="text" name="konstellation" maxlength="12" size="15" value="" /></td>
280 <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>
281 </form>
282 </tr>
283 </table>
284 </div>
285 
286 <div id="navpanel2">
287 <table height="34" border="0" cellpadding="4" cellspacing="0"><tr><td>
288 <form style="margin:0px; padding:0px;" name="EbenenMenu" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
289   <select name="liste" size="1" onchange="if(this.selectedIndex!=0) this.form.submit();">
290     <option value="nichts">gespeicherte Resultate</option>
291     <option value="nichts">< - - - - - - - - - - - - - - - - - - ></option>
292 <?php
293 function date_mysql2german($datum) {
294   if (ereg('[-]', $datum)) {
295       list($jahr, $monat, $tag) = explode ("-", $datum);
296   } else {
297      $jahr  = substr($datum, 0, 4);
298     $monat = substr($datum, 4, 2);
299     $tag   = substr($datum, 6, 2);
300   }
301   return sprintf ('%02d.%02d.%04d', $tag, $monat, $jahr);
302 }
303 
304 $sql = 'SELECT * FROM ebenen ORDER BY datum DESC';
305 $result = $mysqli->query($sql);
306 $anzahl = $result->num_rows;
307 
308 while( $data = mysqli_fetch_array($result, MYSQLI_BOTH) )
309 {
310     $sel = '';
311     if ($data['positionen'] == $_POST['liste']) {
312         $sel = ' selected="selected"';
313     }
314     echo '<option value="' . $data['positionen'] . '" ' . $sel . '>' . $data['name'] . '&nbsp;|&nbsp;' . date_mysql2german($data['datum']) . '</option>';
315 }
316 
317 /***** close result *****/
318 $result->close();
319 
320 /***** close dbConnect *****/
321 $mysqli->close();
322 ?>
323   </select>
324 </form>
325 </td></tr>
326 </table>
327 </div>
328 
329 
330 <div id="navpanel0">
331 <table height="32" border="0" cellpadding="0" cellspacing="0"><tr><td>
332 <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>
333 </td></tr></table>
334 </div>
335 
336 <div id="navpanel_icon">
337 <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>
338 </div>
339 
340 <div id="leittext">
341 Leittext
342 </div>
343 
344 <div id="navpanel_link">
345 <a href="artikel.php">weiter</a>&nbsp;<img src="img/back_turnable.gif" width="25" height="25" alt="" border="0" />
346 </div>
347 
348 </body>
349 </html>
350