hover-buttons

[martin]

hallo,

kann mir jemand einen tipp geben wie ich diese buttons:
http://de.selfhtml.org/javascript/beispiele/buttons.htm
mit der active-eigenschaft entwerfen kann?
kenn mich mit javascript überhaupt nicht aus.

gruß
martin

[Konrad L. M. Rudolph]

Moin,

kenn mich mit javascript überhaupt nicht aus.

brauchst Du auch nicht, denn so etwas macht mal über CSS: stelle einfach das normale Bild per CSS als Hintergrundbild für den Link ein ('background: url(bild-pfad-hier)').
Das Hover-Bild kommt dann in den Hover-Stil des Links. Außerdem musst Du die Breite und Höhe des Links setzen.
Beispiel:

a#home {
    background: url(home.png);
    display: block;
    width: 100px;
    height: 40px;
}

a#home:hover {
    background: url(home-hover.png);
}

(ungetestet)

lg, Konrad -

[martin]

Moin,

kenn mich mit javascript überhaupt nicht aus.

brauchst Du auch nicht, denn so etwas macht mal über CSS: stelle einfach das normale Bild per CSS als Hintergrundbild für den Link ein ('background: url(bild-pfad-hier)').
Das Hover-Bild kommt dann in den Hover-Stil des Links. Außerdem musst Du die Breite und Höhe des Links setzen.

hi,

ich hatte es vorher mit css gemacht, allerdings ist javascript beim hovern schneller, ist mir aufgefallen, deswegen bin ich auf javascript umgestiegen. gibt es denn keine möglichkeit mit js?

[Konrad L. M. Rudolph]

Moin,

ich hatte es vorher mit css gemacht, allerdings ist javascript beim hovern schneller,

Nein, definitiv falsch. Eher andersherum. Das einzige, was man durch JS erreichen kann, ist ein Vorladen der Bilder, das kann man durch geschicktes CSS aber ebenfalls erzielen, indem man um die <a>-Marken herum einen <div> packt, dem man als Hintergrundbild das Hover-Bild des Links zuweist.

ist mir aufgefallen, deswegen bin ich auf javascript umgestiegen. gibt es denn keine möglichkeit mit js?

Doch aber für so etwas ist JavaScript nicht da, für so etwas verwendet man CSS.

lg, Konrad -

[martin]

Moin,

ich hatte es vorher mit css gemacht, allerdings ist javascript beim hovern schneller,

Nein, definitiv falsch. Eher andersherum. Das einzige, was man durch JS erreichen kann, ist ein Vorladen der Bilder, das kann man durch geschicktes CSS aber ebenfalls erzielen, indem man um die <a>-Marken herum einen <div> packt, dem man als Hintergrundbild das Hover-Bild des Links zuweist.

versteh ich nicht, kannst du mir beispiel code zeigen? währe echt nett.

[Konrad L. M. Rudolph]

Moin,

versteh ich nicht, kannst du mir beispiel code zeigen? währe echt nett.

HTML:

<div id="home"><a href="/"></a></div>

CSS:

#home {
    background: url(home-hover.png);
}

#home a {
    background: url(home.png);
    display: block;
    width: 100px;
    height: 40px;
}

#home a:hover {
    background: url(home-hover.png);
}

ebenfalls ungetestet, sollte aber klappen.

lg, Konrad -

[martin]

erst ma danke für den beispielcode.
nur leider bringt das nicht viel, habe immer noch beim ersten hovern ein zucken im bild, welches ich mit js nicht habe.

[dbenzhuser]

Tach

versteh ich nicht, kannst du mir beispiel code zeigen? währe echt nett.

Naja, man kann das Hover-Bildchen schon vorher irgendwo eingebunden haben, es nur hinter anderen Elementen verstecken.
Oder, auch nicht schlecht, man verwendet nur ein Bild, in dem sowohl die normale Darstellung, als auch das Hoverbild hintereinander abgelegt sind. Anstatt das Bild auszutauschen, wird es über background-position so verschoben, dass man den anderen Teil sieht.

..................................
  |               |                |
  |     Bild      |   Hoverbild    |
  |               |                |
  ................|.................

Dann gibt es kein Problem mehr, dass das Hoverbild erst geladen werden muss.

Tschö,
dbenzhuser