diff options
| -rw-r--r-- | www/index.html (renamed from www/index.php) | 50 | ||||
| -rw-r--r-- | www/stylesheet.css | 23 |
2 files changed, 58 insertions, 15 deletions
diff --git a/www/index.php b/www/index.html index d5d817d..3e0629d 100644 --- a/www/index.php +++ b/www/index.html @@ -108,21 +108,41 @@ <div class="Hauptfeld"> - <div style="display:block; line-height:2em;" > - <div style="text-align:center; "> - <div style="min-width:650px; overflow:visible;"> - <div id="linkbutton" style="text-align:center;"> -<?php -$e = empty($_GET['ebene']) ? 1 : $_GET['ebene']; -for ($i = 1; $i < 7; $i++) { - $style = ($i == $e) ? "border-color:#56b; color:#23b;" : ""; - echo "<a href='?ebene=$i' style='$style'>Ebene $i</a>"; -} -?> - </div> + <div class="Ebenen_box"> + <div class="Ebene1_wrapper"> + <div class="Ebene_button" style="left:0em">Ebene 1</div> + <div class="Ebene_bild"> + <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene1.png" alt="Tastenbelegung Ebene 1" /> </div> - <div> - <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene<?php echo $e; ?>.png" alt="tastaturbild" id="IE6-Bildweitenkorrektur" /> + </div> + <div class="Ebene_wrapper"> + <div class="Ebene_button" style="left:6.5em;">Ebene 2</div> + <div class="Ebene_bild"> + <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene2.png" alt="Tastenbelegung Ebene 2" /> + </div> + </div> + <div class="Ebene_wrapper"> + <div class="Ebene_button" style="left:13em;">Ebene 3</div> + <div class="Ebene_bild"> + <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene3.png" alt="Tastenbelegung Ebene 3" /> + </div> + </div> + <div class="Ebene_wrapper"> + <div class="Ebene_button" style="left:19.5em">Ebene 4</div> + <div class="Ebene_bild"> + <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene4.png" alt="Tastenbelegung Ebene 4" /> + </div> + </div> + <div class="Ebene_wrapper"> + <div class="Ebene_button" style="left:26em;">Ebene 5</div> + <div class="Ebene_bild"> + <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene5.png" alt="Tastenbelegung Ebene 5" /> + </div> + </div> + <div class="Ebene_wrapper"> + <div class="Ebene_button" style="left:32.5em;">Ebene 6</div> + <div class="Ebene_bild"> + <img src="./grafik/tastatur3d/hauptfeld/tastatur_neo_Ebene6.png" alt="Tastenbelegung Ebene 6" /> </div> </div> </div> @@ -166,7 +186,7 @@ for ($i = 1; $i < 7; $i++) { <h2>Kontakt</h2> - <p>Kontakt zu den Neo-Ent­wicklern kann man über die Mailing­liste <b><a href="mailto:mailinglist@neo-layout.org?subject=Bitte den Betreff so setzen, dass man auf das Thema schließen kann!&body=Bitte (wenn möglich) folgende Dinge angeben:%0D- Nutzt Du Neo oder noch nicht%3F%0D- Welches Betriebsystem%3F%0D- Welchen Treiber (Xmodmap, Xkbmap, AHK, kbdneo2, usw.)%3F%0D%0D">mailinglist@neo-layout.org</a></b> bzw. über den IRC-Kanal <a href="irc://freenode.net/neo" title="IRC-Channel">#NEO</a> bei <b>freenode.net</b> bekommen. Ver­besserungs­vorschläge sind im­mer will­kom­men! Da wir sehr viele Ab­hängig­keiten haben, kann es aber sein, dass sie nicht un­bedingt ein­ge­pflegt werden.</p> + <p>Kontakt zu den Neo-Ent­wicklern kann man über die Mailing­liste <b><a href="mailto:mailinglist@neo-layout.org?subject=Bitte den Betreff so setzen, dass man auf das Thema schließen kann!&body=Bitte (wenn möglich) folgende Dinge angeben:%0D- Nutzt Du Neo oder noch nicht%3F%0D- Welches Betriebsystem%3F%0D- Welchen Treiber (Xmodmap, Xkbmap, AHK, kbdneo2, usw.)%3F%0D%0D">mailinglist@neo-layout.org</a></b> bzw. über den IRC-Kanal <b>#NEO</b> bei <b>freenode.net</b> bekommen. Ver­besserungs­vorschläge sind im­mer will­kom­men! Da wir sehr viele Ab­hängig­keiten haben, kann es aber sein, dass sie nicht un­bedingt ein­ge­pflegt werden.</p> <p>Danke fürs Interesse!</p> <p>Euer Neo-Team</p> diff --git a/www/stylesheet.css b/www/stylesheet.css index 63f0498..ec41eec 100644 --- a/www/stylesheet.css +++ b/www/stylesheet.css @@ -187,3 +187,26 @@ p { /* text-indent:1em; } .aktiveEbene { border-color:#56b; color:#23b; } + +/* Interaktive Tastaturebenen */ + +.Ebene_button { + border:1px solid black; + padding:0.25em 1em; + position:absolute; + cursor:pointer; + z-index:2; +} + +.Ebenen_box { position: relative;} + +.Ebene_bild { padding-top:2em; } + +.Ebene_wrapper { position:absolute; top:0px; background-color: white; } + +.Ebene_wrapper > .Ebene_bild { display:none; } +.Ebene_wrapper:hover > .Ebene_bild { display:block; } +.Ebene_wrapper:hover > .Ebene_button,.Ebene1_wrapper:hover > .Ebene_button { + background-color:Highlight; +} + |