Projekt CSS-Schieberegler
Peter Burkes. kontakt@burkes.de. Mailinglisten: CSS-Design, i-worker, phpbar, php-request.
Heureka, der CSS-Schieberegler:
Ein Schieberegler auf CSS-Basis. Garantiert ohne Java, Javascript Flash oder Grafikelemente!
A Slider with CSS. Without Java, Javascript, Flash oder animated gifs
(Greetings to Roger! http://www.456bereastreet.com/)
Heureka Beispiel 1 und DEMO - "Heureka" example 1 (demo)
Mit der Maus über die Leiste fahren (ohne Taste drücken) und dann klicken
Heureka Beispiel 2 - heureka example 2
Dieses Beispiel enthält das Grundkonzept:
- Mehrere Links mit verschiedenen Breiten, mit Hilfe von Positionierung übereinander gestapelt
- der breiteste Link ist unten.
- Jeder Link hat ein eigenes HREF-Ziel (z.B. mit einem bestimmten Parameter, index.php?value=1, index.php?value=2, index.php?value=3 .. ).
- Die Links haben einen hover-Effekt.
- Dieser besteht NICHT in display:none, sondern im Aufleuchten der Hintergrundfarbe (und eventuell des rechten Borders).
- Beim Überfahren der Leiste mit der Maus leuchtet immer der unterste erfasste Link auf und beim Anklicken wird der entsprechende HREF-Befehl ausgeführt.
- Mit Hilfe von eingebetten SPAN-Elementen kann außerhalb ein Text angezeigt werden
Hier wurden im HTML-Quelltext die Positionsangaben zur Verdeutlichung in jedem A-Tag direkt formatiert, man könnte sie aber genauso und einfacher im Head definieren (#heureka2 a span {position:absolute; left:0; top:0}. Die Width-Angabe muss für jeden Link gesondert im Link festgelegt werden (geht natürlich ruck-zuck mit php) und der eingebettete SPAN-Text, der dann außerhalb an fixer Stelle erscheint, ebenfalls individuell mit Text (hier Zahl) ausgefüllt werden. Dasselbe gilt für das href-Ziel (index.php?heureka2_zahl=5). Die Formatierung des Span-containers muss unbedingt im Head erfolgen, damit das Ein- und Ausschalten über display-Befehl funktioniert. Ohne diesen Switch würden alle Zahlen übereinander erscheinen
This example shows the basic concept:
- Several Links with different widths; they all are beginning at the same position (position:absolut; top:0; left:0)
- the link with the greatest width ist at the bottom
- Everey Link has his own HREF-Target (for example a certain parameter, e.g. index.php?value=1, index.php?value=2, index.php?value=3 .. ).
- The links are working with hover-effect.
- this effekt ist NOT the display:none/display:block effect, but the changing of the background-color (here: transparent to red), and if you want with changing the color of the right border (here: transparent to black)
- Touching the area with the mouse will allways activate that link, which is most at the bottom. Clicking will acitivate this Link
- Using embedded SPAN-elemtens you can display an text outside of the area.
For demonstration I placed the position-style-sheets in the HTML-code directly in the A-Tags; you also (better) could define them in the head ( #heureka2 a span {position:absolute; left:0; top:0). In any case, the value of "width", you have to definate separately in every link, not in the head (it's easy by working with php) und the embedded SPAN-text, which is shown at a fixed position, have also to be definated in every link. Here the span-text is a number.
You have also to definate the href-destination in every link (index.php?heureka2_zahl=5).
You have to format the span-container in the head, and only there, because of the hover-function and the turning-on and off with the help of "display". Without this switch all numbers (texts) would lay one over the other.
HTML-code of example 2
<div id="heureka2" style="margin-left:40px; position:relative; border:1px solid gray; font-size:20px; width:500px; height:20px">
<a style='position:absolute; left:0px; top:0px; width:500px' href='index.php?heureka2_zahl=25'><span>25</span></a>
<a style='position:absolute; left:0px; top:0px; width:480px' href='index.php?heureka2_zahl=24'><span>24</span></a>
<a style='position:absolute; left:0px; top:0px; width:460px' href='index.php?heureka2_zahl=23'><span>23</span></a>
<a style='position:absolute; left:0px; top:0px; width:440px' href='index.php?heureka2_zahl=22'><span>22</span></a>
<a style='position:absolute; left:0px; top:0px; width:420px' href='index.php?heureka2_zahl=21'><span>21</span></a>
<a style='position:absolute; left:0px; top:0px; width:400px' href='index.php?heureka2_zahl=20'><span>20</span></a>
<a style='position:absolute; left:0px; top:0px; width:380px' href='index.php?heureka2_zahl=19'><span>19</span></a>
<a style='position:absolute; left:0px; top:0px; width:360px' href='index.php?heureka2_zahl=18'><span>18</span></a>
<a style='position:absolute; left:0px; top:0px; width:340px' href='index.php?heureka2_zahl=17'><span>17</span></a>
<a style='position:absolute; left:0px; top:0px; width:320px' href='index.php?heureka2_zahl=16'><span>16</span></a>
<a style='position:absolute; left:0px; top:0px; width:300px' href='index.php?heureka2_zahl=15'><span>15</span></a>
<a style='position:absolute; left:0px; top:0px; width:280px' href='index.php?heureka2_zahl=14'><span>14</span></a>
<a style='position:absolute; left:0px; top:0px; width:260px' href='index.php?heureka2_zahl=13'><span>13</span></a>
<a style='position:absolute; left:0px; top:0px; width:240px' href='index.php?heureka2_zahl=12'><span>12</span></a>
<a style='position:absolute; left:0px; top:0px; width:220px' href='index.php?heureka2_zahl=11'><span>11</span></a>
<a style='position:absolute; left:0px; top:0px; width:200px' href='index.php?heureka2_zahl=10'><span>10</span></a>
<a style='position:absolute; left:0px; top:0px; width:180px' href='index.php?heureka2_zahl=9'><span>9</span></a>
<a style='position:absolute; left:0px; top:0px; width:160px' href='index.php?heureka2_zahl=8'><span>8</span></a>
<a style='position:absolute; left:0px; top:0px; width:140px' href='index.php?heureka2_zahl=7'><span>7</span></a>
<a style='position:absolute; left:0px; top:0px; width:120px' href='index.php?heureka2_zahl=6'><span>6</span></a>
<a style='position:absolute; left:0px; top:0px; width:100px' href='index.php?heureka2_zahl=5'><span>5</span></a>
<a style='position:absolute; left:0px; top:0px; width:80px' href='index.php?heureka2_zahl=4'><span>4</span></a>
<a style='position:absolute; left:0px; top:0px; width:60px' href='index.php?heureka2_zahl=3'><span>3</span></a>
<a style='position:absolute; left:0px; top:0px; width:40px' href='index.php?heureka2_zahl=2'><span>2</span></a>
<a style='position:absolute; left:0px; top:0px; width:20px' href='index.php?heureka2_zahl=1'><span>1</span></a>
Heureka 2B - Variante mit rechter Markierung
Einfache Markierung durch Randfarbe; wenig Möglichkeiten. Bei diesem Beispiel, das ich früher unter IE5.5 entwickelte hatte, tauchen Phänomene auf, die ich nicht erklären kann.
Heureka 3
Soll der Füllbalken andere Elemente vor sich herschieben, z.B. Grafiken oder CSS-Pseudografiken (wie ich sie liebe), dann dürfen sie nicht HINTER den Link gesetzt werden, sondern rechtsbündig in den A-Tag hinein. Hier ein kleiner SPAN-Container mit gelbem Rand.
If you want to use an element (for example a gif oder a gif-like css-element, like I love), then this element have to set within the a-tag and not behind; using text-align:right within the a-tag the element will appear at the right end of the "füllbalken" (???). Here the element ist al little span-container with yellow border.
Beim Veröffentlichen der unter IE 5.5 entwickelten Entwürfe stieß ich auf folgendes Randproblem: Nach neuem Standard darf man keine DIV-Container innerhalb eines Verweises platzieren, stattdessen muss man einen SPAN-Container nehmen, wenn man Grafiken nachahmen will. Wenn man dann noch den neuen Doctype "strict" benutzt, stellt man fest, dass dem SPAN offenbar keine feste Breite zugewiesen werden kann. Daher musste ich beim Umschreiben tricksen - ich habe zwei Bindestrichte mit derselben Farbe wie der Hintergrund eingearbeitet. Dann erschien überraschend der Span-Container
There ist a problem using the new standards of CSS (doctype strict). It's not allowed to place an DIV-Containter in an Link or another SPAN-Container (non-block-element). With other words: if you want to place an HTML-Element instead of an picture, you have to use a SPAN-Container. But a SPAN-Container, using doctype strict, has no width and height (I dont know, why sometimes it functions sometimes not) and so fount out, that using an character (here two -- with the same color like the background-color) in the span-container will show the element. Another possibility is perhaps to mutate the link to an block-element, using display:block, but then you habe solve ohter problems (for example if there are more links in the same line (float:left? od positions absolute?).
HTML-Code
<div id="heureka3" style="position:relative; margin-left:35px; height:20px; width:500px; border-bottom: solid green 5px; border-top: solid green 5px; background-color:gray ">
<a style='width:500"."px' href='index.php?heureka3_zahl=25'><span>--</span></a>
<a style='width:480"."px' href='index.php?heureka3_zahl=24'><span>--</span></a>
<a style='width:460"."px' href='index.php?heureka3_zahl=23'><span>--</span></a>
<a style='width:440"."px' href='index.php?heureka3_zahl=22'><span>--</span></a>
<a style='width:420"."px' href='index.php?heureka3_zahl=21'><span>--</span></a>
<a style='width:400"."px' href='index.php?heureka3_zahl=20'><span>--</span></a>
<a style='width:380"."px' href='index.php?heureka3_zahl=19'><span>--</span></a>
<a style='width:360"."px' href='index.php?heureka3_zahl=18'><span>--</span></a>
<a style='width:340"."px' href='index.php?heureka3_zahl=17'><span>--</span></a>
<a style='width:320"."px' href='index.php?heureka3_zahl=16'><span>--</span></a>
<a style='width:300"."px' href='index.php?heureka3_zahl=15'><span>--</span></a>
<a style='width:280"."px' href='index.php?heureka3_zahl=14'><span>--</span></a>
<a style='width:260"."px' href='index.php?heureka3_zahl=13'><span>--</span></a>
<a style='width:240"."px' href='index.php?heureka3_zahl=12'><span>--</span></a>
<a style='width:220"."px' href='index.php?heureka3_zahl=11'><span>--</span></a>
<a style='width:200"."px' href='index.php?heureka3_zahl=10'><span>--</span></a>
<a style='width:180"."px' href='index.php?heureka3_zahl=9'><span>--</span></a>
<a style='width:160"."px' href='index.php?heureka3_zahl=8'><span>--</span></a>
<a style='width:140"."px' href='index.php?heureka3_zahl=7'><span>--</span></a>
<a style='width:120"."px' href='index.php?heureka3_zahl=6'><span>--</span></a>
<a style='width:100"."px' href='index.php?heureka3_zahl=5'><span>--</span></a>
<a style='width:80"."px' href='index.php?heureka3_zahl=4'><span>--</span></a>
<a style='width:60"."px' href='index.php?heureka3_zahl=3'><span>--</span></a>
<a style='width:40"."px' href='index.php?heureka3_zahl=2'><span>--</span></a>
<a style='width:20"."px' href='index.php?heureka3_zahl=1'><span>--</span></a>
</div>
Heureka 4
Bei Erstellung dieser Seite probierte ich ausnahmsweise auch mal ein Grafikelement einzubauen. Effekt: Die Grafik bleibt, außer beim Opera, beim IE 6 und computerabhängig beim Firefox "hängen". Warum, weiß ich nicht, hier muss ich noch experimentieren. Gelegentlich erschien bei mir im Firefox die Grafik überhaupt nicht. Auch die Verwendung von margin-left statt width half nicht; die Grafik erscheint dann überhaupt nicht. Trotzdem möchte ich dieses Beispiel aufzeigen.
A first experiment with an graphic-element. But there are some problems with different browsers.
Heureka 5
Der rote Pfeil ist wieder pures CSS; Position:relative, top:-8px; left:-5px. Klappt nicht im Opera, dort erscheint der Pfeil nicht über dem Regler und ist zu klein, ferner bleiben der Pfeil beim Zurückfahren "hängen"
the red arrow ist a pure css-element; it has the position:relative, top:-8px; left:-5px (relative to the right side of the link). It doesen't work at opera and there are differences in different browsers.
Nochmal zu dem roten Dreieck: Das rote Dreieck besteht aus einem simplen, im href-Tag untergebrachten Span-Container <span>--</span>
Das Dreieck wird relativ positioniert(position:relative; top:-8px; left:5px)
Damit der span-container zum grafik-ähnlichen Pfeil wird, habe ich ihn innen so komprimiert, dass nur noch die Border übrigbleiben, wovon 3 Seiten in der Hintergrundfarbe und ein border rot formatiert ist. Diese durch Eric Meyer angeregte Konstruktion stammt von Lasse Reichstein Nielsen (http://www.infimum.dk/HTML/slantinfo.html). Man könnte natürlich auch mit einem Grafikelement arbeiten.
Die gesamte Span-Definition sieht also so aus:
span {position:relative; top:-8px; left:5px; width:0; height:0; line-height:0; font-size:0; border-width:10 10 0 10; border-style: solid; border-color:red white white white; display:inline}
By the way: the red arrow is a simple span-container, placed in the href-tag <span>--</span> .
The arrow is relativ positioned ((position:relative; top:-8px; left:5px). To make the span-element to an arrow, I had to compress ist so, that just the borders appear; three border-sides have the same color like the background-color, the fourth border has his own color. This construction is from Lasse Reichstein Nielsen (http://www.infimum.dk/HTML/slantinfo.html). You also coult use a picture-element.
The complete Span-definition is here:
span {position:relative; top:-8px; left:5px; width:0; height:0; line-height:0; font-size:0; border-width:10 10 0 10; border-style: solid; border-color:red white white white; display:inline}
The complete CSS and HTML-Code:
#heureka5 a {height:10px; position:absolute; top:0 px; left:0px; text-align:right; }
#heureka5 a:hover {border-right:0px; background-color:yellow;}
#heureka5 a span {display:none}
#heureka5 a:hover span {position:relative; top:-8px; left:5px; width:0; height:0; line-height:0; font-size:0; border-width:10 10 0 10; border-style: solid; border-color:red white white white; display:inline}
<a style='width:500"."px' href='index.php?heureka5_zahl=25'><span>-</span></a>
<a style='width:480"."px' href='index.php?heureka5_zahl=24'><span>-</span></a>
<a style='width:460"."px' href='index.php?heureka5_zahl=23'><span>-</span></a>
<a style='width:440"."px' href='index.php?heureka5_zahl=22'><span>-</span></a>
<a style='width:420"."px' href='index.php?heureka5_zahl=21'><span>-</span></a>
<a style='width:400"."px' href='index.php?heureka5_zahl=20'><span>-</span></a>
<a style='width:380"."px' href='index.php?heureka5_zahl=19'><span>-</span></a>
<a style='width:360"."px' href='index.php?heureka5_zahl=18'><span>-</span></a>
<a style='width:340"."px' href='index.php?heureka5_zahl=17'><span>-</span></a>
<a style='width:320"."px' href='index.php?heureka5_zahl=16'><span>-</span></a>
<a style='width:300"."px' href='index.php?heureka5_zahl=15'><span>-</span></a>
<a style='width:280"."px' href='index.php?heureka5_zahl=14'><span>-</span></a>
<a style='width:260"."px' href='index.php?heureka5_zahl=13'><span>-</span></a>
<a style='width:240"."px' href='index.php?heureka5_zahl=12'><span>-</span></a>
<a style='width:220"."px' href='index.php?heureka5_zahl=11'><span>-</span></a>
<a style='width:200"."px' href='index.php?heureka5_zahl=10'><span>-</span></a>
<a style='width:180"."px' href='index.php?heureka5_zahl=9'><span>-</span></a>
<a style='width:160"."px' href='index.php?heureka5_zahl=8'><span>-</span></a>
<a style='width:140"."px' href='index.php?heureka5_zahl=7'><span>-</span></a>
<a style='width:120"."px' href='index.php?heureka5_zahl=6'><span>-</span></a>
<a style='width:100"."px' href='index.php?heureka5_zahl=5'><span>-</span></a>
<a style='width:80"."px' href='index.php?heureka5_zahl=4'><span>-</span></a>
<a style='width:60"."px' href='index.php?heureka5_zahl=3'><span>-</span></a>
<a style='width:40"."px' href='index.php?heureka5_zahl=2'><span>-</span></a>
<a style='width:20"."px' href='index.php?heureka5_zahl=1'><span>-</span></a>
Der CSS-Colorslider: oder: auch Farben kann man regeln!
No Javascript, no Java, no Flash, no tricks. Pure CSS.
actual value of color:
#F3F5E7
Mit Maus überüberfahren und klicken (touch with the mouse)
Erläuterung erfolgt in Kürze gesondert, da sich dies mit einem anderen Projekt überschneidet
Anwendungsbeispiel Matrix (Using the css-slider for an matrix) Einzelheiten siehe auf gesonderter Seite (look at this site for explanations)
Mit der Maus über die Fläche fahren - touch the area with the mouse
Andwendungsbeispiel PHP-LERNKARTEI - First experiments with my old php-learning-tool
Hier nur ein Screenshot mit Link zu einer gesonderten Seite
Simple-Slider 2 - ein unechter Schieberegler
Dieser kohlebetriebene CSS-Slider arbeitet mit hintereinander gereihten Verweisen, mit includiertem SPAN-Text, der fix positioniert wird.
Nachteile:
a) Es scheint nicht möglich zu sein, eine farbige Füllstandsanzeige zu erreichen. Das eben war der Anreiz zur ERfindung des "echten" CSS-Sliders.
Damit die Links in voller Breite erscheinen, auch wenn sie keinen Text enthalten, musste ich mit display:block in Verbindung mit float:left arbeiten (als ich den Slider entwicklet hatte, unter IE 5.5., ging das natürlich einfacher).
b) (Scheinbar) kaum Gestaltungsmöglichkeiten bezüglich des Markierungspunkte. Man kann zwar den jeweils berührten Link mit Hilfe des Wechsels der Hintergrundfarbe "aufleuchten" lassen, aber es ist nicht möglich, eine 20px breite Markierung anzuzeigen, wenn mann 300 aufeinander folgende Links mit jeweils 2px Breite hat. Das ginge nur bei wenig Stufen und dann nur ruckelnd.
Die fest positionierte Anzeige des übertragenen Wertes benötigt einen umschließenden DIV-Container. Mit dem IE 6 hatte ich Probleme mit einem ungewollten Zeilenumbruch, die ich erst beseitigen konnte, als ich am Ende mit Clear:both arbeitete.
Quellcode:
<div style="position:relative">
<!--Außencontainer, nur notwendig wegen der absoluten positionierung der Zahl-Anzeige-->
<div id="simple2" style="border:1px solid gray; background-color:#00BF00; height:15px; width:600px">
<a href='index.php?simple2=1'><span>1</span></a>
<a href='index.php?simple2=2'><span>2</span></a>
<a href='index.php?simple2=3'><span>3</span></a>
<a href='index.php?simple2=4'><span>4</span></a>
<a href='index.php?simple2=5'><span>5</span></a>
<a href='index.php?simple2=6'><span>6</span></a>
<a href='index.php?simple2=7'><span>7</span></a>
<a href='index.php?simple2=8'><span>8</span></a>
<a href='index.php?simple2=9'><span>9</span></a>
<a href='index.php?simple2=10'><span>10</span></a>
<a href='index.php?simple2=11'><span>11</span></a>
<a href='index.php?simple2=12'><span>12</span></a>
<a href='index.php?simple2=13'><span>13</span></a>
<a href='index.php?simple2=14'><span>14</span></a>
<a href='index.php?simple2=15'><span>15</span></a>
<a href='index.php?simple2=16'><span>16</span></a>
<a href='index.php?simple2=17'><span>17</span></a>
<a href='index.php?simple2=18'><span>18</span></a>
<a href='index.php?simple2=19'><span>19</span></a>
<a href='index.php?simple2=20'><span>20</span></a>
<a href='index.php?simple2=21'><span>21</span></a>
<a href='index.php?simple2=22'><span>22</span></a>
<a href='index.php?simple2=23'><span>23</span></a>
<a href='index.php?simple2=24'><span>24</span></a>
<a href='index.php?simple2=25'><span>25</span></a>
<a href='index.php?simple2=26'><span>26</span></a>
<a href='index.php?simple2=27'><span>27</span></a>
<a href='index.php?simple2=28'><span>28</span></a>
<a href='index.php?simple2=29'><span>29</span></a>
<a href='index.php?simple2=30'><span>30</span></a>
<a href='index.php?simple2=31'><span>31</span></a>
<a href='index.php?simple2=32'><span>32</span></a>
<a href='index.php?simple2=33'><span>33</span></a>
<a href='index.php?simple2=34'><span>34</span></a>
<a href='index.php?simple2=35'><span>35</span></a>
<a href='index.php?simple2=36'><span>36</span></a>
<a href='index.php?simple2=37'><span>37</span></a>
<a href='index.php?simple2=38'><span>38</span></a>
<a href='index.php?simple2=39'><span>39</span></a>
<div style='line-height:0; font-size:0; height:0; clear:both'></div>
</div> </div>
Kurze Anleitung - Aufbau des CSS-Schiebereglers
1. Schritt
Eine umfassender DIV-Container, relativ positioniert (damit er für weitere Positionierungen als Elternelement dient), und nacheinander mehrere Verweise mit unterschiedlichen WIDTH-Angaben von 500px bis 20 px.
Der: CSS-Code (der Border ist nur zur Verdeutlichung, und der im Quelltext ersichtliche display:block-Wert dient nur der DEMO)
#schritt1 a {background-color:red ; border:1px solid gray; }
#schritt1 a:hover {background-color:red ; border:1px solid gray; }
Zweiter Schritt - positionieren
#schritt2 a {border:1px solid gray; position:absolute; top:0 px; left:0px}
#schritt2 a:hover {background-color:red ; border:1px solid gray}
Erläuterung: Durch Positionierung aller Links auf position:absolute, left:0, top:0 fangen alle Verweise links oben im übergreifenden DIV-Container an und überlappen sich. Den Border habe ich zur Verdeutlichung belassen.
Die Positionsangabe kann einheitlich im head definiert werden. Natürlich muss der umschließende DIV-Container auch positioniert sein, sonst richten sich die Posititonsangaben am Seitenrand als Elterenelment aus. Ein "position:relative" ohne weitere Angaben reicht völlig, und der DIV-Container bleibt dort, wo er geschrieben ist.
Display:none wird in dieser Variante nicht benötigt (das ist nur notwendig, wenn man z.B. mit Hilfe von eingebetteten SPANs an anderer Stelle einen Wert erscheinen lässt.
Durch andersfarbige rechte Ränder (z.B. border-right:30px solid black) kann man den Balken-Abschluss verschönern. Möglich ist auch, innerhalb des href-Tags eine Grafik oder ein entsprechend formatiertes SPAN-Element einzubauen, das dann scheinbar vor sich hergeschoben wird (allerdings ist zu beachten, dass dieses Element noch VOR dem evtl. formatierten rechten Rand des Verweises erscheint).
Jedem Verweis muss ein Wert als Parameter mitgegeben werden, sonst hat der Regler keinen Sinn.
Will man den Wert (oder eine zugehörige Farbe, Bild etc) außerhalb des Reglers erscheinen lassen, dann muss man ebenfalls ein SPAN-Element einbauen und einheitlich positionieren. Hier ist wichtig, dass das Span-Element mit display:none zunächst unsichtbar gemacht wird, sonst sieht man sämtliche Zahlen übereinander.
CSS und HTML-Quellcode
<div id="schritt2" style="position:relative; border:1px solid gray; margin-left:35px; font-size:20px; width:550px; "><br>
<a href="" style=" width:550px "></a>
<a href="" style="width:500px; "></a>
<a href="" style="width:450px; "></a>
<a href="" style="width:400px; "></a>
<a href="" style="width:350px; "></a>
<a href="" style="width:300px; "></a>
<a href="" style="width:250px; "></a>
<a href="" style="width:200px; "></a>
<a href="" style="width:150px; "></a>
<a href="" style="width:100px; "></a>
<a href="" style="width:50px; "></a>
<a href="" style="width:20px; "></a>
</div>
Quellcode des Reglers im Eingangsbeispiel auf dieser Seite (Heureka 1)
CSS-Code im Head:
#heureka1 {position:relative; margin-left:55px; background-color:#E2E2C7; border:solid black 5px; width:600px; height:15px}
#heureka1 a {position:absolute; left:0px; top:0px; height:15px;}
#heureka1 a:hover {border-right:20px solid black; background-color:red}
#heureka1 a:hover.max {background-color:red}
#heureka1 a span {display:none}
#heureka1 span.anzeige {display:inline; position:absolute; top:-5px; left:-60px; background-color:black; width:25px; height:15px; border:5px solid #1f1f1f; font-family:arial; font-size:12px; color:green; font-weight:bold; text-align:center}
#heureka1 a:hover span {display:inline; position:absolute; top:-5px; left:-60px; background-color:black; width:25px; height:15px; border:5px solid #1F1F1F; font-family:arial; font-size:12px; color:#FFDF00; text-align:center}
HTML-Code:
(ich habe hier mit 200 Verweise gearbeitet, damit der Regler fein 'gleitet'. Es ließe sich aber durchaus brauchbar auch mit 30 Stufen
<div id="heureka1" >
<span class="anzeige"><? echo ; ?> </span><!--für die Anzeige der Zahl ausserhalb der Reglerleiste-->
<a style=" width:600px" href="index.php?zahl=200"><span>200</span> </a>
<a style=" width:597px" href="index.php?zahl=199"><span>199</span> </a>
<a style=" width:594px" href="index.php?zahl=198"><span>198</span> </a>
<a style=" width:591px" href="index.php?zahl=197"><span>197</span> </a>
<a style=" width:588px" href="index.php?zahl=196"><span>196</span> </a>
<a style=" width:585px" href="index.php?zahl=195"><span>195</span> </a>
<a style=" width:582px" href="index.php?zahl=194"><span>194</span> </a>
<a style=" width:579px" href="index.php?zahl=193"><span>193</span> </a>
<a style=" width:576px" href="index.php?zahl=192"><span>192</span> </a>
<a style=" width:573px" href="index.php?zahl=191"><span>191</span> </a>
<a style=" width:570px" href="index.php?zahl=190"><span>190</span> </a>
<a style=" width:567px" href="index.php?zahl=189"><span>189</span> </a>
<a style=" width:564px" href="index.php?zahl=188"><span>188</span> </a>
<a style=" width:561px" href="index.php?zahl=187"><span>187</span> </a>
<a style=" width:558px" href="index.php?zahl=186"><span>186</span> </a>
<a style=" width:555px" href="index.php?zahl=185"><span>185</span> </a>
<a style=" width:552px" href="index.php?zahl=184"><span>184</span> </a>
<a style=" width:549px" href="index.php?zahl=183"><span>183</span> </a>
<a style=" width:546px" href="index.php?zahl=182"><span>182</span> </a>
<a style=" width:543px" href="index.php?zahl=181"><span>181</span> </a>
<a style=" width:540px" href="index.php?zahl=180"><span>180</span> </a>
<a style=" width:537px" href="index.php?zahl=179"><span>179</span> </a>
<a style=" width:534px" href="index.php?zahl=178"><span>178</span> </a>
<a style=" width:531px" href="index.php?zahl=177"><span>177</span> </a>
<a style=" width:528px" href="index.php?zahl=176"><span>176</span> </a>
<a style=" width:525px" href="index.php?zahl=175"><span>175</span> </a>
<a style=" width:522px" href="index.php?zahl=174"><span>174</span> </a>
<a style=" width:519px" href="index.php?zahl=173"><span>173</span> </a>
<a style=" width:516px" href="index.php?zahl=172"><span>172</span> </a>
<a style=" width:513px" href="index.php?zahl=171"><span>171</span> </a>
<a style=" width:510px" href="index.php?zahl=170"><span>170</span> </a>
<a style=" width:507px" href="index.php?zahl=169"><span>169</span> </a>
<a style=" width:504px" href="index.php?zahl=168"><span>168</span> </a>
<a style=" width:501px" href="index.php?zahl=167"><span>167</span> </a>
<a style=" width:498px" href="index.php?zahl=166"><span>166</span> </a>
<a style=" width:495px" href="index.php?zahl=165"><span>165</span> </a>
<a style=" width:492px" href="index.php?zahl=164"><span>164</span> </a>
<a style=" width:489px" href="index.php?zahl=163"><span>163</span> </a>
<a style=" width:486px" href="index.php?zahl=162"><span>162</span> </a>
<a style=" width:483px" href="index.php?zahl=161"><span>161</span> </a>
<a style=" width:480px" href="index.php?zahl=160"><span>160</span> </a>
<a style=" width:477px" href="index.php?zahl=159"><span>159</span> </a>
<a style=" width:474px" href="index.php?zahl=158"><span>158</span> </a>
<a style=" width:471px" href="index.php?zahl=157"><span>157</span> </a>
<a style=" width:468px" href="index.php?zahl=156"><span>156</span> </a>
<a style=" width:465px" href="index.php?zahl=155"><span>155</span> </a>
<a style=" width:462px" href="index.php?zahl=154"><span>154</span> </a>
<a style=" width:459px" href="index.php?zahl=153"><span>153</span> </a>
<a style=" width:456px" href="index.php?zahl=152"><span>152</span> </a>
<a style=" width:453px" href="index.php?zahl=151"><span>151</span> </a>
<a style=" width:450px" href="index.php?zahl=150"><span>150</span> </a>
<a style=" width:447px" href="index.php?zahl=149"><span>149</span> </a>
<a style=" width:444px" href="index.php?zahl=148"><span>148</span> </a>
<a style=" width:441px" href="index.php?zahl=147"><span>147</span> </a>
<a style=" width:438px" href="index.php?zahl=146"><span>146</span> </a>
<a style=" width:435px" href="index.php?zahl=145"><span>145</span> </a>
<a style=" width:432px" href="index.php?zahl=144"><span>144</span> </a>
<a style=" width:429px" href="index.php?zahl=143"><span>143</span> </a>
<a style=" width:426px" href="index.php?zahl=142"><span>142</span> </a>
<a style=" width:423px" href="index.php?zahl=141"><span>141</span> </a>
<a style=" width:420px" href="index.php?zahl=140"><span>140</span> </a>
<a style=" width:417px" href="index.php?zahl=139"><span>139</span> </a>
<a style=" width:414px" href="index.php?zahl=138"><span>138</span> </a>
<a style=" width:411px" href="index.php?zahl=137"><span>137</span> </a>
<a style=" width:408px" href="index.php?zahl=136"><span>136</span> </a>
<a style=" width:405px" href="index.php?zahl=135"><span>135</span> </a>
<a style=" width:402px" href="index.php?zahl=134"><span>134</span> </a>
<a style=" width:399px" href="index.php?zahl=133"><span>133</span> </a>
<a style=" width:396px" href="index.php?zahl=132"><span>132</span> </a>
<a style=" width:393px" href="index.php?zahl=131"><span>131</span> </a>
<a style=" width:390px" href="index.php?zahl=130"><span>130</span> </a>
<a style=" width:387px" href="index.php?zahl=129"><span>129</span> </a>
<a style=" width:384px" href="index.php?zahl=128"><span>128</span> </a>
<a style=" width:381px" href="index.php?zahl=127"><span>127</span> </a>
<a style=" width:378px" href="index.php?zahl=126"><span>126</span> </a>
<a style=" width:375px" href="index.php?zahl=125"><span>125</span> </a>
<a style=" width:372px" href="index.php?zahl=124"><span>124</span> </a>
<a style=" width:369px" href="index.php?zahl=123"><span>123</span> </a>
<a style=" width:366px" href="index.php?zahl=122"><span>122</span> </a>
<a style=" width:363px" href="index.php?zahl=121"><span>121</span> </a>
<a style=" width:360px" href="index.php?zahl=120"><span>120</span> </a>
<a style=" width:357px" href="index.php?zahl=119"><span>119</span> </a>
<a style=" width:354px" href="index.php?zahl=118"><span>118</span> </a>
<a style=" width:351px" href="index.php?zahl=117"><span>117</span> </a>
<a style=" width:348px" href="index.php?zahl=116"><span>116</span> </a>
<a style=" width:345px" href="index.php?zahl=115"><span>115</span> </a>
<a style=" width:342px" href="index.php?zahl=114"><span>114</span> </a>
<a style=" width:339px" href="index.php?zahl=113"><span>113</span> </a>
<a style=" width:336px" href="index.php?zahl=112"><span>112</span> </a>
<a style=" width:333px" href="index.php?zahl=111"><span>111</span> </a>
<a style=" width:330px" href="index.php?zahl=110"><span>110</span> </a>
<a style=" width:327px" href="index.php?zahl=109"><span>109</span> </a>
<a style=" width:324px" href="index.php?zahl=108"><span>108</span> </a>
<a style=" width:321px" href="index.php?zahl=107"><span>107</span> </a>
<a style=" width:318px" href="index.php?zahl=106"><span>106</span> </a>
<a style=" width:315px" href="index.php?zahl=105"><span>105</span> </a>
<a style=" width:312px" href="index.php?zahl=104"><span>104</span> </a>
<a style=" width:309px" href="index.php?zahl=103"><span>103</span> </a>
<a style=" width:306px" href="index.php?zahl=102"><span>102</span> </a>
<a style=" width:303px" href="index.php?zahl=101"><span>101</span> </a>
<a style=" width:300px" href="index.php?zahl=100"><span>100</span> </a>
<a style=" width:297px" href="index.php?zahl=99"><span>99</span> </a>
<a style=" width:294px" href="index.php?zahl=98"><span>98</span> </a>
<a style=" width:291px" href="index.php?zahl=97"><span>97</span> </a>
<a style=" width:288px" href="index.php?zahl=96"><span>96</span> </a>
<a style=" width:285px" href="index.php?zahl=95"><span>95</span> </a>
<a style=" width:282px" href="index.php?zahl=94"><span>94</span> </a>
<a style=" width:279px" href="index.php?zahl=93"><span>93</span> </a>
<a style=" width:276px" href="index.php?zahl=92"><span>92</span> </a>
<a style=" width:273px" href="index.php?zahl=91"><span>91</span> </a>
<a style=" width:270px" href="index.php?zahl=90"><span>90</span> </a>
<a style=" width:267px" href="index.php?zahl=89"><span>89</span> </a>
<a style=" width:264px" href="index.php?zahl=88"><span>88</span> </a>
<a style=" width:261px" href="index.php?zahl=87"><span>87</span> </a>
<a style=" width:258px" href="index.php?zahl=86"><span>86</span> </a>
<a style=" width:255px" href="index.php?zahl=85"><span>85</span> </a>
<a style=" width:252px" href="index.php?zahl=84"><span>84</span> </a>
<a style=" width:249px" href="index.php?zahl=83"><span>83</span> </a>
<a style=" width:246px" href="index.php?zahl=82"><span>82</span> </a>
<a style=" width:243px" href="index.php?zahl=81"><span>81</span> </a>
<a style=" width:240px" href="index.php?zahl=80"><span>80</span> </a>
<a style=" width:237px" href="index.php?zahl=79"><span>79</span> </a>
<a style=" width:234px" href="index.php?zahl=78"><span>78</span> </a>
<a style=" width:231px" href="index.php?zahl=77"><span>77</span> </a>
<a style=" width:228px" href="index.php?zahl=76"><span>76</span> </a>
<a style=" width:225px" href="index.php?zahl=75"><span>75</span> </a>
<a style=" width:222px" href="index.php?zahl=74"><span>74</span> </a>
<a style=" width:219px" href="index.php?zahl=73"><span>73</span> </a>
<a style=" width:216px" href="index.php?zahl=72"><span>72</span> </a>
<a style=" width:213px" href="index.php?zahl=71"><span>71</span> </a>
<a style=" width:210px" href="index.php?zahl=70"><span>70</span> </a>
<a style=" width:207px" href="index.php?zahl=69"><span>69</span> </a>
<a style=" width:204px" href="index.php?zahl=68"><span>68</span> </a>
<a style=" width:201px" href="index.php?zahl=67"><span>67</span> </a>
<a style=" width:198px" href="index.php?zahl=66"><span>66</span> </a>
<a style=" width:195px" href="index.php?zahl=65"><span>65</span> </a>
<a style=" width:192px" href="index.php?zahl=64"><span>64</span> </a>
<a style=" width:189px" href="index.php?zahl=63"><span>63</span> </a>
<a style=" width:186px" href="index.php?zahl=62"><span>62</span> </a>
<a style=" width:183px" href="index.php?zahl=61"><span>61</span> </a>
<a style=" width:180px" href="index.php?zahl=60"><span>60</span> </a>
<a style=" width:177px" href="index.php?zahl=59"><span>59</span> </a>
<a style=" width:174px" href="index.php?zahl=58"><span>58</span> </a>
<a style=" width:171px" href="index.php?zahl=57"><span>57</span> </a>
<a style=" width:168px" href="index.php?zahl=56"><span>56</span> </a>
<a style=" width:165px" href="index.php?zahl=55"><span>55</span> </a>
<a style=" width:162px" href="index.php?zahl=54"><span>54</span> </a>
<a style=" width:159px" href="index.php?zahl=53"><span>53</span> </a>
<a style=" width:156px" href="index.php?zahl=52"><span>52</span> </a>
<a style=" width:153px" href="index.php?zahl=51"><span>51</span> </a>
<a style=" width:150px" href="index.php?zahl=50"><span>50</span> </a>
<a style=" width:147px" href="index.php?zahl=49"><span>49</span> </a>
<a style=" width:144px" href="index.php?zahl=48"><span>48</span> </a>
<a style=" width:141px" href="index.php?zahl=47"><span>47</span> </a>
<a style=" width:138px" href="index.php?zahl=46"><span>46</span> </a>
<a style=" width:135px" href="index.php?zahl=45"><span>45</span> </a>
<a style=" width:132px" href="index.php?zahl=44"><span>44</span> </a>
<a style=" width:129px" href="index.php?zahl=43"><span>43</span> </a>
<a style=" width:126px" href="index.php?zahl=42"><span>42</span> </a>
<a style=" width:123px" href="index.php?zahl=41"><span>41</span> </a>
<a style=" width:120px" href="index.php?zahl=40"><span>40</span> </a>
<a style=" width:117px" href="index.php?zahl=39"><span>39</span> </a>
<a style=" width:114px" href="index.php?zahl=38"><span>38</span> </a>
<a style=" width:111px" href="index.php?zahl=37"><span>37</span> </a>
<a style=" width:108px" href="index.php?zahl=36"><span>36</span> </a>
<a style=" width:105px" href="index.php?zahl=35"><span>35</span> </a>
<a style=" width:102px" href="index.php?zahl=34"><span>34</span> </a>
<a style=" width:99px" href="index.php?zahl=33"><span>33</span> </a>
<a style=" width:96px" href="index.php?zahl=32"><span>32</span> </a>
<a style=" width:93px" href="index.php?zahl=31"><span>31</span> </a>
<a style=" width:90px" href="index.php?zahl=30"><span>30</span> </a>
<a style=" width:87px" href="index.php?zahl=29"><span>29</span> </a>
<a style=" width:84px" href="index.php?zahl=28"><span>28</span> </a>
<a style=" width:81px" href="index.php?zahl=27"><span>27</span> </a>
<a style=" width:78px" href="index.php?zahl=26"><span>26</span> </a>
<a style=" width:75px" href="index.php?zahl=25"><span>25</span> </a>
<a style=" width:72px" href="index.php?zahl=24"><span>24</span> </a>
<a style=" width:69px" href="index.php?zahl=23"><span>23</span> </a>
<a style=" width:66px" href="index.php?zahl=22"><span>22</span> </a>
<a style=" width:63px" href="index.php?zahl=21"><span>21</span> </a>
<a style=" width:60px" href="index.php?zahl=20"><span>20</span> </a>
<a style=" width:57px" href="index.php?zahl=19"><span>19</span> </a>
<a style=" width:54px" href="index.php?zahl=18"><span>18</span> </a>
<a style=" width:51px" href="index.php?zahl=17"><span>17</span> </a>
<a style=" width:48px" href="index.php?zahl=16"><span>16</span> </a>
<a style=" width:45px" href="index.php?zahl=15"><span>15</span> </a>
<a style=" width:42px" href="index.php?zahl=14"><span>14</span> </a>
<a style=" width:39px" href="index.php?zahl=13"><span>13</span> </a>
<a style=" width:36px" href="index.php?zahl=12"><span>12</span> </a>
<a style=" width:33px" href="index.php?zahl=11"><span>11</span> </a>
<a style=" width:30px" href="index.php?zahl=10"><span>10</span> </a>
<a style=" width:27px" href="index.php?zahl=9"><span>9</span> </a>
<a style=" width:24px" href="index.php?zahl=8"><span>8</span> </a>
<a style=" width:21px" href="index.php?zahl=7"><span>7</span> </a>
<a style=" width:18px" href="index.php?zahl=6"><span>6</span> </a>
<a style=" width:15px" href="index.php?zahl=5"><span>5</span> </a>
<a style=" width:12px" href="index.php?zahl=4"><span>4</span> </a>
<a style=" width:9px" href="index.php?zahl=3"><span>3</span> </a>
<a style=" width:6px" href="index.php?zahl=2"><span>2</span> </a>
<a style=" width:3px" href="index.php?zahl=1"><span>1</span> </a>
</div>
Wer sich die Schreibarbeit erleichtern will und mit php umgehen kann, hat es leicht. Ein par Zeilen Code genügen:
echo "<div id='heureka1'>
<span class='anzeige'>$zahl</span>";
$breite=650;
$stufen=30;
$breitendifferenz=round($breite/$stufen);
for($x=$stufen; $x>0; $x--) {
echo "<a style=" width:$breite"."px" href="index.php?zahl=$x"><span>$x</span> </a>";
$breite=$breite-$breitendifferenz;
}
echo "</div>"
Winamp-ZDL-Schieberegler
In meinem ewigen Tick, Graifkelemente zu vermeiden und durch CSS-Spielerein zu ersetzen, habe ich versucht, die WINAMP-Skins mit CSS nachzuahmen. Gelegenheit bot sich, nachdem ich für meine Lernkartei, die ich für meine Schüler entwickelt hatte, aus Jux ein paar winamp-ähnliche Skins schuf (existiert auch online, aber unter IE 5.5. entwickelt und noch nicht umgeschrieben, also momentan verhackstückt). Hier eine kleine, bisher nicht veröffentliche CSS-Spielerei, mit dem ich ein Dateil aus dem Winampskin von ZDL (die für mich mit Abstand genialsten und kreativsten Skins, die es gibt), und zwar den Schieberegler.
Screenshots:
Hier die Rohskizze einer CSS-Imitation (unbeweglich, stark vergrößert umgesetzt)
Quelltext des Reglerknopfes:
<span class='innen' style='width:20px; height:10px; background-color:red; border-left:40px solid #00FF00; border-right:40px solid #00FF00; text-align:center'><br>
<span style='14px; height:100%; background-color:red; border-left:3px solid black; border-right:3px solid black '>
</span><br>
</span>
<span class='innen' style='width:10px; height:4px; background-color:red; border-left:45px solid black; border-right:45px solid black; margin-top:5px '>
</span>
<span class='innen' style='width:100px; height:4px; background-color:red; '>
</span>
<span class='innen' style='width:90px; height:4px; border-left:5px solid red; border-right:5px solid red; background-color:black; margin-bottom:5px; '>
</span>
<span class='innen' style='width:100px; height:10px; background-color:#FFbF00; '>
</span>
<span class='innen' style='width:30px; height:5px; background-color:#00BF00; border-left:35px solid #007F00; border-right:35px solid #007f00'>
</span>
<div class='innen' style='width:100px; height:10px; background-color:#FFBF00; '>
</div>
Slider-Experiment mit ZDL
Hier der aktueller Entwurf einer Umsetzung der Pseudo-Grafik in einen CSS-Slider. Große Enttäuschung: es funktionierte zunächst nur im IE 6, nicht aber in Firefox. Dort bleibt das Element, das eigentlich am rechten Rand des Verweises (A HREF) kleben sollte (A ist text-align:right formatiert) am linken Rand kleben. Grund: ein A-Element ist kein Blockelement, eine (sich erweiternde) Width-Angabe und eine rechtsbündige Ausrichtung ist nicht möglich. Außer natürlich beim IE, der immer nur das macht, was ER will.
Ich habe dann statt mit der Breite mit einem Padding-Left gearbeitet. Nun geht es auch im Firefox. Allerdings funktioniert die Bewegung nach rechts nur in großen Sprüngen, nach links dagegen flüssig. Wahrscheinlich ein konzeptioneller Fehler, dem ich aber aus Zeitgürnden noch nicht nachgegangen bin.
.
Mit der Maus drüberfahren:
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
<a style='width:500"."px' href='index.php?zdl_zahl=25'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:480"."px' href='index.php?zdl_zahl=24'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:460"."px' href='index.php?zdl_zahl=23'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:440"."px' href='index.php?zdl_zahl=22'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:420"."px' href='index.php?zdl_zahl=21'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:400"."px' href='index.php?zdl_zahl=20'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:380"."px' href='index.php?zdl_zahl=19'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:360"."px' href='index.php?zdl_zahl=18'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:340"."px' href='index.php?zdl_zahl=17'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:320"."px' href='index.php?zdl_zahl=16'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:300"."px' href='index.php?zdl_zahl=15'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:280"."px' href='index.php?zdl_zahl=14'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:260"."px' href='index.php?zdl_zahl=13'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:240"."px' href='index.php?zdl_zahl=12'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:220"."px' href='index.php?zdl_zahl=11'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:200"."px' href='index.php?zdl_zahl=10'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:180"."px' href='index.php?zdl_zahl=9'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:160"."px' href='index.php?zdl_zahl=8'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:140"."px' href='index.php?zdl_zahl=7'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:120"."px' href='index.php?zdl_zahl=6'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:100"."px' href='index.php?zdl_zahl=5'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:80"."px' href='index.php?zdl_zahl=4'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:60"."px' href='index.php?zdl_zahl=3'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:40"."px' href='index.php?zdl_zahl=2'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
<a style='width:20"."px' href='index.php?zdl_zahl=1'><span class='knopf'>Hier Button (Grafik oder obige CSS-Definition) </span></a>
Matrix
Impressum: Peter Burkes 93055 Regensburg Blumenstraße 6, kontakt@burkes.de
