• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

onMouseover

Status
Für weitere Antworten geschlossen.
M

MichaSG

Neues Mitglied
So, ich stehe vor meinem nächsten Problem. Und zwar habe ich meine Navigation nun mit folgendem Code eingebaut:
Code: 
          <ul id="nav">
              <li> <a href="index_db.htm"><img onMouseover=src="img/s_dark_blue/navi/button_home_on.png" onMouseout=src="img/s_dark_blue/navi/button_home_off.png" src="img/s_dark_blue/navi/button_home_off.png" border="0" alt="home" /> </a> </li>
              <li> <a href="http://mbolli.mb.ohost.de/wbblite"><img onMouseover=src="img/s_dark_blue/navi/button_forum_on.png" onMouseout=src="img/s_dark_blue/navi/button_forum_off.png" src="img/s_dark_blue/navi/button_forum_off.png" border="0" alt="forum" /> </a> </li> <br class="clearer"/>
          </ul>
          </div>

Nun, ich hätte gerne, dass denn der aktivierte Button auch als aktiviert angezeigt wird. Sprich, in diesem Falle button_forum_on.png bleibt. Ausreichend erklärt? :)
 
so:

Code: 
onmouseover="this.src='img/s_dark_blue/navi/button_home_on.png';" onmouseout="this.src='img/s_dark_blue/navi/button_home_off.png'"

Schau dir am Besten mal noch die Funktion von EventHandlern wie onmouseover an.
 
Hat leider nicht geklappt bzw. ich habe es nicht geschafft. Wie muss der Code denn zum Schluss aussehen? Also, wo muss ich deine Zeilen einsetzen bzw. ersetzen?
 
Hi,

Wozu brauchst du den Eventhandler um den aktiven Menüpunkt anzuzeigen, wenn Javascript abgeschaltet ist passiert doch da nichts.

Regel da doch einfach mit CSS:
Code: 
#navigation a:hover,
#navigation a:focus  {
    color:white;
    background-color:black;
}

#navigation a:hover,
#navigation a:focus,
#startseite #navi01,
#galerie #navi02,
#impressum #navi03  {
    color:white;
    background-color:black;
} /*--aktiven Menüpunkt hervorheben--*/

Jede HTML-Seite bekommt eine id z.B. <body id="startseite"> .
Jeder Menuepunkt bekommt eine id.

Die erste Formatierung legt das normale Verhalten beim hovern fest.
Die zweite sorgt dafür, das auf der Seite auf der du dich gerade befindest der entsprechende Menüpunkt hervorgehoben bleibt.

Falls du noch Menülisten in anderen Containern hast, mußt du das natürlich nach dem gleichen Schema wie oben formatieren.

Damit der Link bei der Seite auf der du dich gerade befindest nicht auf sich selber zeigt, fügst du weiter oben in deiner CSS bei allgemeiner Linkformatierung unterhalb von a:active noch:

Code: 
a strong  {
    color:white;
    background-color:black;
}

ein.

Im Quellcode schreibtst du dann bei der entsprechenden Seite statt
a href folgendes:
Code: 
<li id="navi01"><a><strong>Startseite</strong></a></li>

Menüpunkt der aktuellen Seite bleibt hervorgehoben aber beim hovern zeigt der Link nicht auf sich selber.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben