HTML Richtungschalter in HTML

[Revolution]

Hallo zusammen,

Ich stehe gerade etwas auf dem Schlauch wie kann ich einen art Richtungsschalter in HTML Programieren. Sprich ich möchte vier möglichkeiten etwas über eine Webseite in eine richtung zu Steuern. Wie macht man sowas, finde dazu nichts im Netz.

 

[Snooty]

Du meinst, dass du bspw. eine Box (div) bewegen kannst?

 

[Madman1209]

Hi,

verstehe ich nicht ganz. Einfach vier Button, einer mit "Hoch", einer mit "Runter", einer mit "Rechts", einer mit "Links"? Oder was genau meinst du? Wie ein Steuerkreuz?

Abgesehen davon: für Steuern wird HTML alleine nicht reichen

VG,
Mad

 

[Revolution]

Im prinzip will ich so einen Schalter in HTML

http://german.industrialswitchsocke...tton-industrial-rotary-disconnect-switch.html

Einfach ne Grafik dann drüber legen und duch klicken wie normale, HTML Buttons benutzen für Übergabewerte.

 

[coolmodi]

Dafür brauchst du Javascript. Nötige Elemente anlegen (HTML und CSS) und dann mit JS aufs click event reagieren und den Schalter animieren, und Aktionen ausführen. https://www.w3schools.com/jsref/event_onclick.asp

Edit: Achso, wenn es einfach nur ein normaler button sein soll, einfach mit einem Bild, dann reicht auch HTML (und CSS). Kannst dann z.B. einfach ein Bild als Inhalt des Buttons nutzen.

<!-- statt -->
<button>Button</button>
<!-- einfach -->
<button><img src="bild.png"/></button>

 

[Mr.Baba]

Was genau willst du machen?
Hab es aus dem industrialswitchsocket link heraus nicht kapiert

 

[kim88]

Theoretisch kannst du auch einfach ein Bild hochladen und per Image Map einzelne Regionen im Bild definieren. Wenn man auf Region 1 klickt passiert XY, wenn man auf Region 2 klickt passiert Z.

Image Maps kann man direk Online kreieren z.B. hier:
https://www.image-map.net

Das ganze ist allerdings nicht responsive, es gibt zwar JS Libarys die Image Maps repsonisve runter rechnen, aber naja.

Die schönere Lösung ist da definitiv mit HTML und CSS was zu bauen, im Grunde ist da ja ein Schalter mit 3 Optionen (könnte man im Hintegrund mit Radio Buttons machen) und einfach eine Grafik generieren (vllt sogar in SVG) die man in hin und her bewegen kann oder so.