Ein Hintergrundbild beim Textauswählen anzeigen

Wir haben in der Vergangenheit schon einige lustige Dinge mit Textauswahl gemacht. Wir haben einen Geheimnachrichtengenerator erstellt. Wir haben ein Ding gemacht, um nur eine bestimmte Anzahl von Zeichen auszuwählen.

In den Foren fragte Aaron Silber sich nach dem Anzeigen eines tatsächlichen Bildes mit Textauswahl. Mit CSS wissen wir, dass wir die Hintergrund**farbe** von ausgewähltem Text ändern können, wie hier.

::-moz-selection { background-color: #FFA; }
::selection { background-color: #FFA; }

Aber die tatsächlichen Eigenschaften, die mit diesen Pseudo-Selektoren verwendet werden können, sind sehr begrenzt¹. Background-image wird in keinem Browser unterstützt, der diese Pseudo-Selektoren für Textauswahl unterstützt. Aaron hat eine Testseite erstellt, um genau zu sehen, welche Eigenschaften mit ::selection unterstützt werden. Im Wesentlichen sind color und background-color die einzigen unterstützten Eigenschaften.

Also geben wir auf? Keineswegs! Es gibt ein range-Objekt (mehr dazu) in JavaScript, das eine API zum Abrufen (und in geringerem Maße zum Setzen) von Informationen über den vom Benutzer aktuell ausgewählten Text hat. Mit dieser Macht könnten wir herausfinden, was ausgewählt ist, span-Elemente darum wickeln und unsere Stile mit diesen Spans (die keine inhärenten Styling-Beschränkungen haben) anwenden. Außerdem ist die browserübergreifende Kompatibilität dafür nicht großartig, aber es gibt ein Open-Source-Projekt namens Rangy, das die Arbeit mit Ranges einfacher und browserübergreifender macht.

Eine einfache Demo (aus deren Dokumentation) beinhaltet das Hinzufügen einer Klasse um ausgewählten Text nach dem Klicken auf eine Schaltfläche

<script>
    var cssApplier;

    window.onload = function() {
        rangy.init();
        cssApplier = rangy.createCssClassApplier("someClass", true); // true turns on normalization
    });
</script>

<input type="button" value="Toggle someClass on selection" onclick="cssApplier.toggleSelection();">

Damit haben Sie eine CSS-Klasse ("someClass" im obigen Code), die Sie beliebig gestalten können.

.someClass {
   background-image: url(raptor-attack.png);
}

Offensichtlich ist das Hinzufügen eines Raptors die bestmögliche Idee.

Demo ansehen   Dateien herunterladen

---

¹ Und ::selection wurde aus der Spezifikation entfernt, daher gibt es keinen Standard, an den sich Browser halten müssen.