Dynamische Formatvorlagen mit DHTML

Dynamische Formatvorlagen mit DHTML

In-line-Formatvorlage: dieses Element wird rot, wenn sich der Mauszeiger darüber bewegt.

Über Zuweisung an Class-Name: dieses Element ändert sein Class-Attribut, wenn sich der Mauszeiger darüber bewegt.

...und hier Wechsel zwischen fetter und normaler Schrift, wenn sich der Mauszeiger darüber bewegt.

Sourcecode:

<head>

<style type="text/css">
 .yellow1 {background: yellow; }
 .yellow2 {background: lightgreen; font-weight: bold; }
</style>

</head>

<body>

<p onmouseover="this.style.backgroundColor = 'red';" onmouseout="this.style.backgroundColor = '';">
  In-line-Formatvorlage: dieses Element wird rot, wenn sich der Mauszeiger darüber bewegt.
</p>

<p onmouseover="this.className = 'yellow1';" onmouseout="this.className = '';">
  Über Zuweisung an Class-Name: dieses Element ändert sein Class-Attribut, wenn sich der 
  Mauszeiger darüber bewegt.
</p>

<p onmouseover="this.className = 'yellow2';" onmouseout="this.className = 'yellow1';">
  ...und hier Wechsel zwischen fetter und normaler Schrift, wenn sich der Mauszeiger darüber bewegt.
</p>

</body>

Hinweis:
Für Verweise auf www-Adressen gibt es in HTML das a-Element. In Verbindung mit onmouseover (also <a onmouseover...) werden solche Verweise von Suchmaschinen im Web nicht gefunden und sollten daher nicht verwendet werden.

Also statt:

 <a onMouseOver="window.status='www.pressenet.info'; return true" onMouseOut="window.status=''; 
    "href="http://www.pressenet.info/">Pressenet</a>
dieses verwenden:
 <a href="http://www.pressenet.info/" title="www.pressenet.info">Pressenet</a>
Sponsoren und Investoren

Sponsoren und Investoren sind jederzeit herzlich willkommen!
Wenn Sie die Information(en) auf dieser Seite interessant fanden, freuen wir uns über eine kleine Spende. Empfehlen Sie uns bitte auch in Ihren Netzwerken (z. B. Twitter, Facebook oder Google+). Herzlichen Dank!

Nach oben Sitemap
Impressum & Kontakt