Dateigrösse: 3.41 kb
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 5 6 <title>Lösungen Papa Moll</title> 7 8 <style type="text/css"> 9 body { font: bold 12px verdana,arial,sans-serif; padding:10px; margin:0; color:#fff; background-color:#849dbc; } 10 11 #bild_moll { position: absolute; top: 10px; left: 10px; width: 200px; height: 170px; visibility: visible; display: block; border:1px solid black; } 12 .moll { padding:3px; position:absolute; left:10px; top:185px; width:195px; height:80px; background-color:#fff; color:#000; border:1px solid #000; } 13 14 <?php 15 $bild = isset($_GET['bild']) ? $_GET['bild'] : 1; 16 for($i=1; $i<=8; $i++) { 17 if($bild==$i) { 18 echo '#test'.$i.' {visibility:visible;}'; 19 } else { 20 echo '#test'.$i.' {visibility:hidden;}'; 21 } 22 } 23 ?> 24 #navi { padding:1px; position:absolute; left:12px; top:280px; width:210px; color:#fff; background-color:#849dbc; } 25 #navi a { color:#fff; margin:0 2pt; padding:0 2pt; } 26 #navi a:hover { color:#849dbc; background-color:#fff; text-decoration:none; } 27 #navi a.active { color:#ff9900; text-decoration:underline; } 28 29 #footer { margin:0; padding:3px 0; position: absolute; top: 310px; left: 10px; width: 200px; background-color: #fff; color: #849dbc; text-align: center; border-top: 1px solid #000; border-left: 1px solid #000; } 30 #footer a { text-decoration:none; color: #849dbc; font-size: 11px; } 31 #footer a:hover { text-decoration:underline; color: #000; } 32 </style> 33 </head> 34 35 <body> 36 37 <div id="bild_moll"><img src="img/moll-<?php echo $bild; ?>.gif" alt="" width="200" height="170" border="0" /></div> 38 39 <div id="navi"> 40 <?php 41 for($i=1; $i<=8; $i++) { 42 $href = $_SERVER['PHP_SELF']; 43 $class = $bild == $i ? 'class="active"' : ''; 44 $title = 'title="click here"'; 45 $separator = $i==8 ? '' : '|'; 46 echo '<td><a ' . $title . ' href="' . $href . '?bild=' . $i . '" ' . $class . '>' . $i . '</a>' . $separator . '</td>'; 47 } 48 ?> 49 </div> 50 51 <div class="moll" id="test1">Mit dem Mann, dem Schiffs-Pilot, steigen sie nun in ein Boot, um den Rheinfall, der so schön, aus der Nähe anzusehen.</div> 52 <div class="moll" id="test2">Evi sich vornüber beugt und auf kleine Entchen zeigt.<br>Doch dabei hält sie sich nicht und verliert das Gleichgewicht.</div> 53 <div class="moll" id="test3">'PATSCH!' sie fliegt in hohem Bogen in des Rheines hohe Wogen und die Entlein voller Schreck, fliegen ängstlich schnatternd weg.</div> 54 <div class="moll" id="test4">Moll, der sofort hilfsbereit, packt die Kleine rasch am Kleid, und der Schiffer hält den Ring, der vorher im<br>Boote hing.</div> 55 <div class="moll" id="test5">'EVI', sagt Moll sehr empört, solch ein Tun sich nicht gehört. Laut tönt jetzt des Rheinfalls Brausen, Gischt<br>und Wasser abwärts sausen!</div> 56 <div class="moll" id="test6">Nach dem schönen Augenblick, kehren sie beglückt zurück. Papa Moll zeigt mit der Hand: 'Dort spring ich zuerst ans Land!'</div> 57 <div class="moll" id="test7">Und man fährt mit frohem Sinn, langsam nun zum Landen hin. Moll nun elegant beschwingt, aus dem Boot zum Ufer springt.</div> 58 <div class="moll" id="test8">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> 59 60 <div id="footer"> 61 [<a href="javascript:window.close();">Fenster schliessen</a>] 62 </div> 63 64 </body> 65 </html>