|
Animierte Buttons sorgen für einen coolen Effekt, indem die Buttongrafik ausgetauscht
wird, wenn die Maus über den Button fährt oder die Maustaste gedrückt wird.
Einige Buttonsgrafiken zum animieren stehen auf meiner
Button Seite unter der
Rubrik Web Grafiken zum Download bereit.
Zwischen den <HEAD></HEAD> Tags |
In der Variablen dir steht der Pfad zum Verzeichnis
welches die Buttongrafiken enthält.
<SCRIPT LANGUAGE="JavaScript">
<!-- START
dir="../grafiken/buttons/set_02/";
// Die schon unter Abfrage auf verwendeten Browser
// vorgestellte Funktion ist hier erforderlich da das
// Script unter MSIE Version 3 Fehlermeldungen erzeugt.
function browsertest() {
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if ((browserName == "Netscape" && browserVer >= 3) ||
(browserName == "Microsoft Internet Explorer" && browserVer >=4 )) {
return(true);
} else {
return(false);
}
}
// Jetzt folgen die Funktionen die für den Austausch
// der Grafiken verantwortlich sind.
function active(imgName){
if (browsertest()) {
img1 = eval(imgName + "akt.src");
document [imgName].src = img1;
}
}
function inactive(imgName){
if (browsertest()) {
img2 = eval(imgName + "pas.src");
document [imgName].src = img2;
}
}
function down(imgName){
if (browsertest()) {
img3 = eval(imgName + "dwn.src");
document [imgName].src = img3;
}
}
// Start des Hauptprograms. Die Variablen
// blankbluepas, blankblueakt, blankbluedwn
// enhalten die Grafiken die jeweils die Zustände
// passiv (Normalzustand), aktiv (Maus über dem Button)
// und down (Maustaste gedrückt) darstellen.
if(browsertest()) {
blankbluepas = new Image(); blankbluepas.src = ""+dir+"blankbluepas.gif";
blankblueakt = new Image(); blankblueakt.src = ""+dir+"blankblueakt.gif";
blankbluedwn = new Image(); blankbluedwn.src = ""+dir+"blankbluedwn.gif";
}
// ENDE -->
</SCRIPT>
Einbindung in die HTML Seite |
Die Einbindung erfolgt folgendermaßen (Bitte nicht das NAME Attribut
im Image Tag übersehen):
<A HREF="anim_buttons01.html"
onMouseover="active('blankblue');return true"
onMouseout = "inactive('blankblue');"
onMousedown= "down('blankblue')"
onMouseup= "active('blankblue');return true">
<IMG SRC="../grafiken/buttons/set_02/blankbluepas.gif"
WIDTH=135 HEIGHT=35 BORDER=0
ALT="Animierter Button" NAME="blankblue"></A>
|
