Dr. Web Team 6. August 2003

Javascript: Virtueller Textmarker

Kein Beitragsbild

Bei langen Texten freut sich der Leser, wenn er ohne Umschweife zu Kernaussagen geführt wird. Das kann man mit Fettschrift machen oder subtiler mit einem virtuellen Textmarker. CSS und Javascript in Personalunion machen’s möglich.

Zwei Klassen benötigen wir. Auf Knopfdruck tauscht Javascript mit deren Hilfe die Hintergrundfarbe aus. Das wirkt so, als hätte der Webdesigner die relevanten Textpassagen mit einem Textmarker angestrichen. Die Farbe Gelb eignet sich am besten dazu.

Live-Demo in neuem Fenster

Nur Wichtiges lesen

Der Quelltext:

 <head>
    <script language="JavaScript" type="text/JavaScript">
    var aktiviert = -1;
    function changehervorheben() {
    if (aktiviert == 1){document.getElementById("text").className =
    'nichthervorheben';
    }else{document.getElementById("text").className = 
    'jetzthervorheben';}
    aktiviert *= -1;
    }
    </script>
    <style>
    .nichthervorheben .hervorheben {background:#FFFFFF;}
    .jetzthervorheben .hervorheben {background:#FFFF00;}
    </style>
    </head>
    <body bgcolor="#F4F4F4">
    <a href="#" onclick="changehervorheben()"><img
    src="wichtigen-text-zeigen.gif" border="0"></a>
    <br><br>

    <div class="nichthervorheben" id="text" style="width:464px;font-family:arial;">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
    diam nonummy nibh euismod <span class="hervorheben">tincidunt
    ut laoreet</span> dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis ut consequat. </p>
    <p>Duis eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat facilisis <span class="hervorheben">at
    qui blandit praesent luptatum zzril delenit</span> augue te feugait
    nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
</body>

Eine wichtige Textpassage wird ganz einfach mit dem Span-Befehl gekennzeichnet:

      <span class="hervorheben">besonders
wichtiger Text</span>

Das gilt für beliebig viele Textpassagen, doch man es aber übertreibt, ist der Nutzen schnell wieder dahin.

Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück