Beiträge von Sempervivum

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.

Mit jCanvas kannst Du ganz leicht Kreisbögen zeichnen:

https://projects.calebevans.me/jcanvas/docs/arcs/

gleich das erste Beispiel.

Ich finde jedoch nichts, wie man feststellen kann, ob ein Koordinatenpaar innerhalb eines solchen Kreisbogens liegt. Da ist wohl auch angesagt, es selbst auszurechnen. Wenn es ausreicht, die Farbe eines Feldes zu ermitteln, kann man das jedoch in Canvas sehr leicht, weil man Zugriff auf die RGB-Werte hat.

Zitat

Da ist so wieso Ende für mich. Bin eigentlich ganz gut in Mathe , doch bei Kreis ,Dreieck und Winkel und co hört es leider auf bei mir.

Ich kann mich dunkel erinnern, dass Du mal irgend eine Aufgabe mit Winkelfunktionen selber gelöst hattest.

Zitat

Wäre es eigentlich einfacher die ganze Dartscheibe mit Canvas zu machen ?

Da bin ich mir gar nicht mal sicher. Ich habe früher mal mit jCanvas solche Kreissegmente gezeichnet und das wurde ganz gut unterstützt und war relativ einfach. Nicht jedoch die Prüfung, ob ein Koordinatenpaar in einer Form liegt. Außer bei Klick, aber das geht ja bei dem Fadenkreuz nicht.

Auf jeden Fall hat Canvas den Nachteil, dass es nicht verlustfrei skaliert werden kann.

PS: Ich sehe gerade, dass die Felder keine Elemente sind, sondern dass Du das mit Dasharray gelöst hat. Dann wird das mit checkIntersection wohl nicht gehen.

Man könne es aber sicherlich händisch berechnen: Zunächst den Abstand vom Mittelpunkt und dann den Winkel. Daraus könnte man dann sicher berechnen, welches Feld getroffen wurde.

Mit checkIntersection müsste es auch gehen, aber leider ... nicht von Firefox untersützt.

https://stackoverflow.com/questions/4174…-and-javascript

Die Lösung findest Du hier:

https://stackoverflow.com/questions/1752…-not-displaying