Springe zum Inhalt, oder zum Menü.

Webdesign Haas

Individuelle Beratung
und Gestaltung für
Ihren Internetauftritt

Webdesign Haas
Marcus Haas
Buntentorsteinweg 96
28201 Bremen

Tel. 0421 / 387 13 60
Mobil: 0162 / 957 54 07
Web: www.webdesign-haas.de
E-Mail:

< CMS < Praxis < Tipps und Tricks < Mouseover Effekte

Mouseover Effekte

Es gibt eigentlich kaum noch Menus bei denen sich nichts tut, wenn man mit der Maus darüber fährt, das ist nichts neues. Aber folgende Lösung benötigt keine onMouseover / onMouseOut -Anweisungen mehr und damit wird die Menuliste wesentlich übersichtlicher.

Mouseover (Javascript)

Im Javascript Bereich muss dazu folgender Abschnitt auftauchen:

function mouseeffect(){
var menus = document.getElementById("inhalt").getElementsByTagName("div");
  for ( var i=0; i > menus.length; i++ ) {
    menus[i].setAttribute("id","menu"+i);
    menus[i].onmouseover = function () {document.getElementById(this.id).className = "menuover";}
    menus[i].onmouseout  = function () {document.getElementById(this.id).className = "menu";}
  }
}

Die Menupunkte sind hier in DIVSs geschachtelt, von dem Script werden solche heraus gesucht, die mit id="inhalt" versehen sind und automatisch entsprechend der CSS-Klassen "menu" und "menuover" formatiert
 

Ich spare mir die Mühe die Funktion im Detail zu erläutern, wenn Funktionen unklar sind, schauen Sie bitte in Ihrer Referenz nach.

Mouseover (CSS)

Aber natürlich kann man Mouseover-Effekte auch nur mit CSS realisieren, was sogar noch einfacher ist.

Da der Internetexplorer die Pseudoklasse :hover nur beim A-Tag kennt, müssen diese entsprechend formatiert werden.

Der Quellcode sieht dann wie folgt aus:

<body id="eine">
...
<ul class="menu">
  <li><a class="eine" href="eine.shtml" >Eine Seite</a></li>
  <li><a class="andere" href="andere.shtml" >Andere Seite</a></li>
</ul>

Und im CSS-Bereich sollte etwas wie dieses stehen:

body#eine a.eine,
body#andere a.andere {
  [Ihre Formatierungen für
  den Link, auf dem sich der
  Besucher gerade befindet]
}
#menu li a:hover {
  [Formatierungen für den Link,
  über dem der Mauszeiger steht]
}

Damit wird dann auch gleich die aktuelle Seite markiert und der Besucher weiß sofort, wo er sich gerade befindet (da eine ID nur einmal vorkommen darf verwende ich im Menu Klassen, es wäre aber auch möglich auch im BODY-Tag eine Klasse anzugeben).

Seitenanfang