Skip to main content

Alles für die Homepage... Scripte, Templates, Workshops und Support

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

CODE:
<!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

CODE:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="40%" style="background:#FFFFFF url(images/menuebg.gif);">&nbsp;</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);">&nbsp;</td>
</tr>
</table>

Erläuterungen hierzu:

CODE:
<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:

CODE:
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 Black Friday Woche startet

amazon black friday woche 2023

Auch in diesem Jahr präsentiert Amazon während der Black Friday Woche wieder erstklassige Schnäppchen in allen Kategorien. Kundinnen und Kunden können sich auf einzigartige Geschenkideen und interessante Angebote für die bevorstehende Weihnachtszeit freuen. Darüber hinaus gibt es eine Vielzahl weiterer Produkte mit attraktiven Preisnachlässen – und das elf Tage lang. Ab Freitag, den 17. November […]

Mit eigenem Buch zum Expertenstatus

buchautor dirk kreuter erfolgreicher autor bestseller

Eigenes Buch. Nutzen Sie diese sensationelle Chance, ihre Reputation zu steigern und Bestsellerautor zu werden. Haben Sie sich auch schon immer gefragt, wie bekannte Größen der Wirtschaft es immer wieder schaffen, Bestseller zu landen? Nun, es gibt kein Geheimrezept für den Erfolg als Autor. Doch eins ist sicher: Sie müssen Ihre Leser begeistern und fesseln […]

Amazon Black-Friday-Woche vom 17. bis 27. November

Amazon

Amazon Black-Friday-Woche. Der Shopping-Monat November beginnt und damit auch die Vorweihnachtszeit. Den Anfang macht der Singles Day Shopping am 11. November. Gefolgt vom Black Friday. Natürlich ist auch Amazon an diesem Tag wieder mit vielen Angeboten am Start. Schnäppchenjäger sollten sich daher die Zeit vom 17. bis 27. November vormerken. Die ersten Angebote sind bereits […]

Empfehlung: Die besten Midjourney Prompts

midjourney prompts

Midjourney Prompts. Künstliche Intelligenz (KI) ist heutzutage ein heiß diskutiertes Thema. Midjourney trägt zweifellos zu diesem Erfolg bei. Es handelt sich um einen benutzerfreundlichen KI-Generator, der hochwertige Bilder mit verschiedenen Motiven erzeugt. Der Zugriff auf Midjourney erfolgt ausschließlich über Textbefehle an einen Discord-Bot. Durch die Verwendung dieser Befehle, auch Prompts genannt, können neue KI-generierte Bilder […]


Ähnliche Beiträge



Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *