Beiträge von Sempervivum

Hier müsste deine Frage beantwortet werden:

https://stackoverflow.com/questions/2753…with-javascript

Zitat

Das Diagramm werd ich wahrscheinlich über php machen

Das ist eine Möglichkeit und immer dann angebracht, wenn Du nichts an Animationen oder Interaktivität brauchst. Ich habe vor ein paar Wochen mit jpgraph einige Diagramme angefertigt und das hat ganz gut funktioniert:

https://jpgraph.net

Hast Du genau in den Einstellungen des Drucken-Dialoges nachgesehen?

Wenn es nicht geht, können wir immer noch ein img-Tag mit object-fit verwenden.

                    <tr height="25">
                        <td align="center" class="anfahrt" rowspan="12">
                            <div class="anfahrtsbild">
                                <img src="routenmap.png">
                            </div>
                        </td>
                    </tr>

            div.anfahrtsbild {
                width: 470px;
                height: 650px;
                overflow: hidden;
                /* background-image: url(images/routenmap.png);
                background-size: cover;
                background-position: center center; */
            }

            div.anfahrtsbild img {
                height: 650px;
                width: 470px;
                object-fit: cover;
                object-position: center center;
            }

Fertiger Code kommt immer gut an. Forenregeln und Eigeninitiative - egal. Womit wir, BTW, einen der "üblichen Verdächtigen" von hier:

Intervalle nehmen keinen gemeinsamen Einfluss vanilla JS

identifiziert hätten.

Wenn ich mir den String ansehe, kommt mir der Verdacht, dass es JSON-kodierte Daten sind. Wo kommt der String denn her? Du ersetzt Anführungszeichen, die in deinem Beispiel nicht zu sehen sind. Kann es sein, dass dein String so aussieht:

{"Peter": 0.998, "Uwe": 0.872541254, "Beate": 0.72, "Maria Dana": 0.854745}

PS: Ich hatte übersehen, dass Du das CSS nach screen und print getrennt hast. Du musst die selbe Änderung auch in dem Abschnitt für @media print { machen.

Ich kenne das von meinem Browser, dass man das Drucken der Hintergrundbilder ausschalten kann um Tinte/Toner zu sparen. Sieh mal nach, ob Du das in deinem Browser auch findest. Wenn nicht, müssen wir statt des Hintergrundbildes ein img-Tag nehmen und object-fit.

Das wäre möglich aber zunächst kannst Du es einfach in dem CSS ändern, das Du jetzt hast, d. h. dieses:

div.anfahrtsbild {width: 470px; height: 650px; overflow: hidden;}

durch das ersetzen, das ich vorhin gepostet habe.

CSS:

            div.anfahrtsbild {
                width: 470px;
                height: 650px;
                overflow: hidden;
                background-image: url(routenmap.png);
                background-size: cover;
                background-position: center center;
            }

Im HTML kannst Du dann das Bild weg lassen:

                     <tr height="25">
                        <td align="center" class="anfahrt" rowspan="12">
                            <div class="anfahrtsbild"></div>
                        </td>
                    </tr>

Es fällt auf, dass Du eine feste Größe für das Div angegeben hast und dass es deshalb nicht responsiv ist. Aber ich nehme an, dass Du es für deinen Monitor so eingerichtet hast.

Dann versuche eine der beiden Möglichkeiten aus Posting #4.

Kein Problem, Du brauchst den Elementen nur eine Klasse zu geben, dann kannst Du sie individuell gestalten:

<figure class="figure1">
    <img src="img1.jpg">
</figure>
<figure class="figure2">
    <img src="img2.jpg">
</figure>

.figure1 {
    width: 200px;
    height: 200px;
}
.figure2 {
    width: 100px;
    height: 100px;
}

Die selbe Klasse kannst Du natürlich mehreren Elementen geben.

Selbstverständlich gibt es auch Scrollbalken im figure-Tag, Du brauchst ihm nur ein overflow: auto; zu geben, dann blendet der Browser bei Bedarf die Scrollbalken ein.

Hallo marja und willkommen im Forum!

Zunächst nur eine Kleinigkeit:

Zitat

das Bild in einem Rahmen (nehme ich div dazu?)

Es wird mit einem div funktionieren, aber als Container für Bilder und die Informationen dazu gibt es in HTML5 das figure-Tag.

Für Drehen, Verkleinern und Vergrößern informiere dich über CSS-transform, z. B. hier:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Transformationen

Wenn ich das richtig verstehe, möchtest Du, dass das Bild mittig ist und die Tabellenzelle ganz ausfüllt. Und bist bereit zu akzeptieren, dass dann etwas abgeschnitten wird. Dann wäre es am einfachsten, wenn Du das Bild als Hintergrund anlegen würdest. Informiere dich hier und konzentriere dich auf background-size: cover;:

https://wiki.selfhtml.org/wiki/CSS/Eigen…background-size

Würde aber auch mit object-fit gehen, siehe hier:

https://wiki.selfhtml.org/wiki/CSS/Eigen…-fit#object-fit

Ein iFrame? Du scherzt!

Zitat

Eigentlich möchte ich kein Javascript oder CSS verwenden sondern nur HTML5.

Warum denn das?

Hallo Basti, da bin ich leider überfragt. X-Box und Playstation kenne ich nur dem Namen nach. Ich halte es aber für unwahrscheinlich, dass Javascript oder ein Plugin mit vertretbarem Aufwand Wurfbewegungen erkennen können.

Da wirst Du wohl an ein wenig Mathe nicht vorbei kommen:

// xCenter und yCenter sind die Koordinaten des Mittelpunktes der Darts-Scheibe
// x und y sind die Koordinaten des Mittelpunktes des Fadenkreuzes
var deltaX = x - xCenter, deltaY = y - yCenter;
var dist = hypot(deltaX, deltaY); // der Abstand
var angle = asin(deltaY / dist); // der Winkel im Bogenmass
var deg = angle / Math.PI * 180; // der Winkel in Grad

(ungetestet). Aus dem Winkel und dem Abstand ist es dann kein Problem, das Feld zu berechnen.

BTW: Es hat mich interessiert und ich habe heraus gefunden, dass man mit getBoundingClientRect() problemlos die Koordinaten eines (SVG-)Elementes ermitteln kann, siehe hier:

https://stackoverflow.com/questions/1915…-an-svg-element

Ja, bei SVG ist das schon anders. Ich sehe jedoch noch ein ganz anderes Problem:

Ich kenne die Spielregeln von Darts leider nicht, aber sicherlich musst Du doch prüfen, ob der Pfeil ein bestimmtes Feld getroffen hat bzw. ein bestimmtes Kreissegment. Da ein solches Kreissegment jedoch als Element gar nicht existiert, sondern nur der ganze Kreis, kannst Du, wenn Du die Koordinaten des ganzen Elementes prüfst, nur heraus bekommen, ob der ganze Kreis bzw. das umschließende Quadrat getroffen wurde und nicht ein einzelnes Segment.

Jedenfalls, wenn ich deinen Code richtig interpretiere, ich habe nicht bis ins letzte Detail hinein geschaut.