michaelsinterface.de

exchange.className

Die standardkonformen Browser (Firefox, Konqueror, Mac Safari, Mozilla, Netscape, Opera, usw.) unterstützen die allgemeine Pseudoklasse :hover für alle HTML-Elemente, also z.B. li:hover, der IE aber erst seit dem Release der 7er-Version, und seine Vorgänger nur für die Hyperlinks <a> (a:hover).

Zu Zeiten des IE5.5 und IE6 war ich auf der Suche nach einer technischen Alternative, um in diesen Browserversionen ebenfalls einen "hover"-Effekt auf ein beliebiges HTML-Element anwenden zu können, und bin in Javascript auf die className-Eigenschaft des all-Objekts aufmerksam geworden.

In diesem Tutorial stelle ich diese Eigenschaft etwas näher vor, und demonstriere, wie für ein HTML-Element zwei CSS-Klassen getauscht werden können.

  • list-item 1
  • list-item 2
  • list-item 3
  • list-item 4
  • list-item 5

HTML-Element

Diese Technik lässt sich im Grunde genommen auf alle HTML-Elemente anwenden - eine Auswahl sei hier in alphabetischer Reihenfolge genannt:

  • <a>...</a>
  • <blockquote>...</blockquote>
  • <body>...</body>
  • <div>...</div>
  • <form>...</form>
  • <h1-h6>...</h1-h6>
  • <img>...</img>
  • <input>...</input>
  • <li>...</li>
  • <p>...</p>
  • <pre>...</pre>
  • <span>...</span>
  • <table>...</table>
  • <td>...</td>
  • <textarea>...</textarea>
  • <tr>...</tr>

CSS-Klasse

Im ersten Schritt werden im Stylesheet zwei CSS-Klassen (hier: .normal und .hover) angelegt und in ihnen die gewünschten CSS-Formatierungen festgelegt:

li.normal {
color: #809bb9;
list-style-type: circle;
}

li.hover {
color: #000000;
list-style-type: square;
cursor: pointer;
}

Die CSS-Klasse .normal wird mit dem Universalattribut class im HTML-Element aufgerufen:

<li class="normal">item 1</li>
<li class="normal">item 2</li>
<li class="normal">item 3</li>
<li class="normal">item 4</li>
<li class="normal">item 5</li>

Anmerkung:

Die von mir gewählten Klassen-Namen lassen sich natürlich auch umbenennen, dies ist dann aber auch in der JavaScript-Anweisung für die Event-Handler zu berücksichtigen!

Event-Handler

Zum Tauschen der CSS-Klassen sind die Event-Handler onmouseover und onmouseout= erforderlich. Sie erhalten die JavaScript-Anweisung "this.className='[className]';" und werden ebenfalls in den <li>-TAGs notiert:

<li class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">
    list-item 1
</li>

Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: exchange.className :::</title>

<style type="text/css">
<!--
li.normal {
color: #809bb9;
list-style-type: circle;
}
li.hover {
margin: 0 0 10px 0;
color: #000000;
list-style-type: square;
cursor: pointer;
}
-->
</style>

</head>
<body>

<ul>
    <li class="normal" onmouseover="this.className='hover';" onmouseout="this.className='normal';">
        list-item 1
    </li>
    <li class="normal" onmouseover="this.className='hover';" onmouseout="this.className='normal';">
        list-item 2
    </li>
    <li class="normal" onmouseover="this.className='hover';" onmouseout="this.className='normal';">
        list-item 3
    </li>
    <li class="normal" onmouseover="this.className='hover';" onmouseout="this.className='normal';">
        list-item 4
    </li>
    <li class="normal" onmouseover="this.className='hover';" onmouseout="this.className='normal';">
        list-item 5
    </li>
</ul>

</body>
</html>