Wie kann ich Punkte auf einem Bild auf meiner HTML-Seite markieren, nachdem der Benutzer auf das Bild geklickt hat. Ich möchte einige Punkte auf einem Bild auf der Seite anzeigen, sobald der Benutzer das gewünschte Ding klickt.Markierungspunkte auf einem Bild
0
A
Antwort
3
Platzieren Sie diese "Punkte" als img
Elemente, absolut positioniert, über das Originalbild. Sie können ihre X-, Y-Koordinaten angeben, indem Sie die CSS-Eigenschaften 'links' und 'oben' verwenden.
Wenn das ursprüngliche Element img
relativ positioniert ist, können Sie die Koordinaten in Bezug auf das Bild angeben, auf das Sie die Markierungen setzen.
1
Wenn Sie alte Browser nicht unterstützen müssen, werfen Sie einen Blick auf die HTML5 canvas element.
- https://developer.mozilla.org/en/Canvas_tutorial/Using_images und
- https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
könnte in diesem Fall nützlich sein.
Verwandte Themen
- 1. Text auf einem Bild
- 2. Tooltips auf einem Bild
- 3. Bild angezeigt auf einem Panel-
- 4. C# Mehrfachauswahl auf einem Bild
- 5. So zeigen Sie die Markierungspunkte im Liniendiagramm mit C#
- 6. Problem mit PNG-Bild oben auf einem Bild in CSS?
- 7. Fügen Sie ein Bild auf einem Header-Bild (Wordpress)
- 8. WPF Cursor auf einem teilweise transparenten Bild
- 9. Text auf einem Bild Knopf in C#
- 10. Erstellen von Textüberlagerung auf einem Bild
- 11. Drucken String auf einem Bild in Java
- 12. Hyperlinks auf einem Bild oder einer Karte
- 13. Bild erscheint nicht auf einem Etikett
- 14. Bild verschwommen auf einem anderen Gerät
- 15. kann nicht getWidth() auf einem Bild
- 16. Eine Schaltfläche auf einem Bild anzeigen HTML
- 17. Erstellen einer Leinwand auf einem SVG (oder einem anderen Bild)
- 18. Mehrere CSS auf Hover-Effekte auf einem Bild
- 19. Ein Bild in einem anderen Bild finden
- 20. Fabric.js: Bild Kontrollen hinter einem Overlay-Bild
- 21. Slider mit einem Bild ein Bild
- 22. Bild nicht auf Bild Slider
- 23. Ich möchte ein Bild in einem ext.js modalen Fenster auf Klick auf ein Bild zeigen
- 24. Android - Bildansicht von einem Bild zu einem anderen Bild
- 25. Ein Bild in einem Bild finden
- 26. Put PNG Bild auf Bild aufgenommen
- 27. Bild flackern auf Hintergrundbild
- 28. Kleines Bild auf ein größeres Bild
- 29. Erzeuge Farbpalette aus einem Bild
- 30. Bild in einem CGContextRef anzeigen