Javascript – Menübuttons weich ein und ausblenden
Dieses komplette Beispiel beschreibt wie man Grafische Menübuttons weich ein und ausblenden kann, der Effekt sieht sehr schön bei horizontalen Menüleisten aus – wird hier noch etwas mit Schatteneffekten gearbeitet entsteht der Eindruck eines gedrückten Schalters.
Ein komplettes Beispiel mit Erläuterungen
Vorwort:
Das Javascript welches den Effekt erzeugt stammt von der Webseite http://www.roy.whittle.com/, dort sind auch noch einige Javascripte mehr – alle mit Beispielen dokumentiert – zu finden.
So soll/kann es fertig aussehen:
Demo ansehen wird in neuem Fenster geöffnet.
1. Schritt, erstellen der Menübuttons in einem Grafikprogramm
Erstellen Sie in Ihrem Grafikprogamm zunächst das Design der Menüleiste. Teilen Sie dann die Grafik in die einzelnen Buttons und speichern Sie diese ab. Die Menübuttons sollten nach dem Schema „name.gif“ und „name_over.gif“ abgespeichert werden.
menue1.gif
menue1_over.gif
2. Schritt, einfügen des HTML Codes in eine Webseite
a) Der Code im <head> Bereich der Seite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<style type="text/css">
body {
margin: 5px 0 5px 0;
}
</style>
<script language="JavaScript" src="rollovers.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
JSFX.Rollover("home", "images/menue1_over.gif");
JSFX.Rollover("galerie", "images/menue2_over.gif");
JSFX.Rollover("forum", "images/menue3_over.gif");
JSFX.Rollover("download", "images/menue4_over.gif");
JSFX.Rollover("web", "images/menue5_over.gif");
JSFX.Rollover("kontakt", "images/menue6_over.gif");
//-->
</script>
</head>
<body>
Das Javascript welches den Effekt ermöglicht Hier nötigenfalls die URL anpassen bei rollovers.js
Die Angaben zum Menü ID Name und der entsprechenden „over“ GrafikHierbei gilt: Jeder Menüpunkt muss einen eindeutigen Namen erhalten, z.B. download. Dahinter wird die jeweilige „over“ Grafik angegeben.
b) Der Code im <body> Bereich der Seite
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="40%" style="background:#FFFFFF url(images/menuebg.gif);"> </td>
<td><img src="images/menuetrenn.gif" alt="" width="2" height="44" border="0"></td>
<td style="background:#FFFFFF url(images/menue1.gif);"><a href="index.html" onmouseover="JSFX.fadeIn('home')" onmouseout="JSFX.fadeOut('home')"><img src="menue1.gif" width="96" height="44" border="0" class="imgFader" id="home" alt=""></a></td>
<td><img src="images/menuetrenn.gif" alt="" width="2" height="44" border="0"></td>
<td style="background:#FFFFFF url(images/menue2.gif);"><a href="index.html" onmouseover="JSFX.fadeIn('galerie')" onmouseout="JSFX.fadeOut('galerie')"><img src="menue2.gif" width="96" height="44" border="0" class="imgFader" id="galerie" alt=""></a></td>
<td><img src="images/menuetrenn.gif" alt="" width="2" height="44" border="0"></td>
<td style="background:#FFFFFF url(images/menue3.gif);"><a href="index.html" onmouseover="JSFX.fadeIn('forum')" onmouseout="JSFX.fadeOut('forum')"><img src="menue3.gif" width="96" height="44" border="0" class="imgFader" id="forum" alt=""></a></td>
<td><img src="images/menuetrenn.gif" alt="" width="2" height="44" border="0"></td>
<td style="background:#FFFFFF url(images/menue4.gif);"><a href="index.html" onmouseover="JSFX.fadeIn('download')" onmouseout="JSFX.fadeOut('download')"><img src="menue4.gif" width="96" height="44" border="0" class="imgFader" id="download" alt=""></a></td>
<td><img src="images/menuetrenn.gif" alt="" width="2" height="44" border="0"></td>
<td style="background:#FFFFFF url(images/menue5.gif);"><a href="index.html" onmouseover="JSFX.fadeIn('web')" onmouseout="JSFX.fadeOut('web')"><img src="menue5.gif" width="96" height="44" border="0" class="imgFader" id="web" alt=""></a></td>
<td><img src="images/menuetrenn.gif" alt="" width="2" height="44" border="0"></td>
<td style="background:#FFFFFF url(images/menue6.gif);"><a href="index.html" onmouseover="JSFX.fadeIn('kontakt')" onmouseout="JSFX.fadeOut('kontakt')"><img src="menue6.gif" width="96" height="44" border="0" class="imgFader" id="kontakt" alt=""></a></td>
<td><img src="images/menuetrenn.gif" alt="" width="2" height="44" border="0"></td>
<td width="40%" style="background:#FFFFFF url(images/menuebg.gif);"> </td>
</tr>
</table>
Erläuterungen hierzu:
<td style="background:#FFFFFF url(images/menue1.gif);">
<a href="index.html" onmouseover="JSFX.fadeIn('home')" onmouseout="JSFX.fadeOut('home')">
<img src="menue1.gif" width="96" height="44" border="0" class="imgFader" id="home" alt="">
</a></td>
Geben Sie hier als Hintergrundbild die „normale“ Grafik an
Geben Sie hier das Verweisziel des Linkes an
Geben Sie 3 mal den Linl ID Name an, so wie im Code von a) notiert
Geben Sie jeder Menügrafik die CSS Zuweisung class=“imgFader“
Ich habe dann zur besseren Trennung der Buttons voneinander noch kleine Trennergrafiken eingefügt (images/menuetrenn.gif).
3. Weitere Anpassungsmöglichkeiten und Download der Beispiele
a) Die Geschwindigkeit der Ein und Ausblendung anpassen
Passen Sie dazu in der rollover.js die Werte an:
var FadeInStep = 14; var FadeOutStep = 3;
b) Andersfarbige „over“ Grafiken
Schön sieht es u.U. auch aus wenn die „over“ Grafiken andersfarbig gestaltet sind siehe dieses Beispiel
c) Download
Download der Beispiele
Weitere Beiträge
Aktuelle Desktop-Betriebssysteme im Vergleich für Webmaster
Aktuelle Desktop-Betriebssysteme unterscheiden sich für Webmaster vor allem bei Entwicklungs-Tools, Sicherheit, Automatisierung und Kosten. Entscheidend ist weniger das „schnellste“ System, sondern welches Betriebssystem den eigenen Web-Workflow am effizientesten unterstützt. Webmaster arbeiten typischerweise mit Code-Editoren, Browser-Developer-Tools, lokalen Webservern, Versionsverwaltung und Automatisierungsskripten. Betriebssysteme beeinflussen, wie reibungslos diese Werkzeuge zusammenspielen, wie stabil und sicher sie laufen und wie […]
Interaktiver Businessplaner 2026 für Kindle Scribe – Planen, Ziele erreichen, Erfolg steigern
Immer mehr Menschen möchten sich online ein nachhaltiges Einkommen aufbauen. Digitale Geschäftsmodelle bieten heute viele Chancen mit vergleichsweise geringem Startkapital. Etsy‑Shop‑Betreiber, digitale Nomaden und Online‑Autoren verfolgen dabei klare wirtschaftliche Ziele. Ohne strukturierte Planung bleibt langfristiger Erfolg jedoch meist dem Zufall überlassen. Ein digitaler Businessplaner auf dem Kindle Scribe bringt die gewünschte Lösung. Für eine minimale […]
Windows 11 Shortcuts: Die wichtigsten Tastaturbefehle für schnelleres Arbeiten
Profis kennen die wahre Stärke von Tastaturbefehlen unter Windows 11. Wer effizient arbeiten möchte, nutzt Shortcuts statt ausschließlich der Maus. Windows 11 bietet zahlreiche neue Funktionen mit passenden Tastenkombinationen. Microsoft setzt weiterhin konsequent auf bewährte und neue Shortcuts. Diese Befehle gehören fest zum Betriebssystem und steigern die Produktivität spürbar.
Amazon Black Friday Woche 2025: Große Rabatte bei Audible, Kindle Unlimited, Paramount+ und Amazon Hardware
Die Amazon Black Friday Woche 2025 läuft vom 20. November bis 1. Dezember und bringt zahlreiche Sparmöglichkeiten in allen Kategorien. Neben klassischen Produktangeboten profitieren Sie in diesem Jahr besonders von vergünstigten digitalen Abos und Services. Amazon bietet exklusive Rabatte auf Audible, Kindle Unlimited, Paramount+ sowie auf viele hauseigene Amazon-Geräte. Damit wird die Vorweihnachtszeit ideal für Technik- und Medienfans, die kräftig […]
Keine Kommentare vorhanden