Interaktives Bild - JS?

[Dsdxb]

Hi,

ich habe ein Bild was so aehnlich aussehen soll, wie auf der angehaengten Grafik. Der Grossteil des Bildes ist statisch (soll fuer den User als Erklaerung funktionieren) und ich kann es als Bild, SVG oder sogar per CSS erzeugen (was auch immer die Anwendung spaeter einfacher macht).

Jetzt moechte ich aber einen Teil des Bildes (rot) interaktiv machen. Der User soll einen Slider verschieben koennen (rot) und je nach Position soll er einen bestimmten Wert anzeigen (in meinem Fall wieviele gruene Balken er beruehrt, aber da das zugrundeliegende Bild eh statisch ist wuerde es mir schon reichen, wenn er je nach position auf dem Bild einen bestimmten Wert anzeigt. Das ganze soll auch mobil funktionieren. (waere der Slider an der gelben Position soll er dann ne 1 anzeigen)

Wie realisiere ich sowas grob? Ist das ueberhaupt JavaScript oder geht das auch mit CSS? Ich braeuchte wiedermal nur ein paar Schupser in die richtige Richtung, den Rest erarbeite ich mir dann selbst (weiss nur gar nicht wo ich ansetzen soll)

Vielen Dank wieder einmal

image.png

[tomBuilder]

ist das ein einfacher range slider ?
google treffer:
https://codepen.io/seanstopnik/pen/CeLqA

[Dsdxb]

Hallo tom,

Das war der input der mir gefehlt hat. Vielen Dank. Habs damit schon geloest und nen netten Slider inkl Umrechnung und allem. Vielen Dank

[tomBuilder]

Schön Dsdxb ,

der vollständigkeit halber sei noch erwähnt, komplexe interactive bilder macht man mit canvas:

wie:

http://gyu.que.jp/jscloth/
https://codepen.io/soulwire/full/Ffvlo
http://www.effectgames.com/demos/canvascycle/

übersicht:

https://project-awesome.org/raphamorim/awesome-canvas

[Dsdxb]

Das kannte ich nicht. Sehr beeindruckend. In meinem Fall natuerlich mit Kanonen auf Spatzen geschossen, aber sieht wirklich spektakulaer aus