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
Amazon-Vergleichstabellen erhöhen die Affiliate-Einnahmen
Amazon-Vergleichstabellen: Wer im Internet kaufen will, vergleicht zunächst Preise und Produkteigenschaften. Hier ist bei vielen Interessenten Amazon die erste Wahl. Gleichzeitig bietet der Branchenriese ein interessantes Partnerprogramm für Empfehlungen an. Wer sich damit ein zusätzliches Einkommen sichern möchte, bietet seinen Besuchern spezielle Amazon-Vergleichstabellen auf seiner Webseite an. So findet der Kunde schneller die relevanten Informationen […]
Amazon startet den 10. Prime Day am 16. und 17. Juli
Prime Day 2024: Vom 16. bis 17. Juli haben Prime-Mitglieder exklusiven Zugang zu einer Vielzahl von Angeboten in verschiedenen Kategorien wie Bekleidung, Elektronik, Küche & Haushalt und Spielzeug. Neue Deals werden während des gesamten Zeitraums veröffentlicht, um Prime-Mitgliedern am zehnten Prime Day stets etwas Neues zu bieten. Die ersten Angebote sind bereits verfügbar. Weitere Produkte […]
Amazon Oster-Angebote – erste Angebote sind verfügbar
Amazon Oster-Angebote: Ostern steht vor der Tür. Eine gute Gelegenheit, um die Wohnung oder den Arbeitsplatz bunter zu gestalten. Auch der Frühjahrsputz steht vor der Tür. Die Amazon Osterangebote vom 20. bis 25. März bieten attraktive Rabatte auf Elektronik, Haus & Garten, Spielwaren und mehr. Schneller Versand inklusive! Die ersten Angebote sind bereits verfügbar – […]
Das neue MacBook Air 2024 mit M3 Chip bei Amazon
MacBook Air 2024. Apple präsentierte überraschend die neuen MacBook Air Modelle mit dem leistungsstarken M3 Chip. Neben der besseren Hardware, die deutlich schneller ist als die Rechner der Konkurrenz, wurde vor allem die Tatsache begrüßt, dass das Macbook endlich mit zwei externen Monitoren funktioniert. Erfreulich ist, dass die neuen MacBooks bereits bei Amazon bestellt werden […]
Keine Kommentare vorhanden