Buttons mit Linien verbinden

    Hallo zusammen


    Wie ihr im Bild sehen könnt habe ich ein Tischtennis Tisch dargestellt mit verschiedenen Button drauf. Anhand dieser Buttons kann angeklickt werden wie der Gegner die Bälle platziert hat. Nun möchte ich eine Funktion hinzufügen welche die Buttons automatisch mit einer Linie verbinden sobald sie gedrückt werden. Das heisst, der erst gedrückte Button sollte mit dem zweiten verbunden werden, der zweite mit dem dritten und so weiter. Anhand dessen sollte man dann schlussendlich eine Übersicht des ganzen Ballwechsel bekommen. Hat einer eine Idee wie ich diese Linien beim Drücken der Buttons einzeichnen kann? Habe euch im Anhang noch ein Bild der Homepage hochgeladen. Der Httml Code werde ich auch gleich noch hinzufügen.

    <body>
    <main>
    <div class="grid-container">
    <div class="item1">
    <button class="schlagarten"> ruckhand</button>
    </div>
    <div class="item2">
    <button class="schlagarten"> vorhand</button>
    </div>
    <div class="item3">
    <button class="schlagarten"> mitte</button>
    </div>
    <div class="item4">
    <button class="schlagarten"> mitte</button>
    </div>
    <div class="item5">
    <button class="schlagarten"> vorhand</button>
    </div>
    <div class="item6">
    <button class="schlagarten"> ruckhand</button>
    </div>
    <div class="item7">
    <div class="umrandung"> <div>
    </div>
    <div class="item8">
    <div class="umrandung"> <div>
    </div>
    <div class="item9">
    <div class="umrandung"> <div>
    </div>
    <div class="item10">
    <div class="umrandung"> <div>
    </div>
                
    </div>
    </main>


    So sieht der Html Code aus ich habe es mit einem Grid Container dargestellt.

    Linien zeichnen, die wahrscheinlich auch diagonal sein können, ist möglich mit HTML und CSS aber nicht zu empfehlen, weil zu umständlich. Ich empfehle statt dessen, das mit einer SVG-Grafik zu machen, dann kannst Du ganz direkt eine Linie durch Start- und Endpunkt definieren.


    Erweitere doch mal deine Grafik mit einigen solcher Linien, damit man es sich besser vorstellen kann. Ich weiß nicht genau, ob diese von der Tischkante ausgehen sollen oder von der Mitte der Fläche mit dem Text, oder ...

    Das Ziel ist, dass die Linien von der Mitte der jeweiligen Buttons ausgehen. Nach einem erspielten Ballwechsel sollen dann die Linien wieder verschwinden indem ich auf Punkt oder Fehler klicke. Ansonsten gäbe es zu viele Linien und es wäre unübersichtlich. Ungefähr so habe ich mir das vorgestellt:

    Hi,


    noclue:
    Kannst du bitte zukünftig deinen Quellcode in die Code Tags einfügen? So können wir Hilfesteller diesen besser lesen und dir auch besser helfen.
    Diese findest du in der Editornavigation an der 3.ten Stelle von rechts (</>).

    Danke dir.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden