Ergebnis 1 bis 14 von 14
  1. #1
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    Hover Effekt Bei Buttons

    Hallo, ich mache zurzeit eine Website für eine Freunden, Nun habe ich die Links z.b Startseite mit Buttons Grafisch dargestellt und würde gerne einen Hover effekt einfügen, also das wenn die maus über den Button geht dort der hintergrund aufleuchtet bzw die schrift (also das ein anderes bild in dem moment gezeigt wird).

    Hab schon gegooglet aber nix passendes gefunden da ich mich null mit css auskenne.

    Hoffe ihr könnt mir helfen wie ich das ganze in Html / java script darstellen könnte oder eine fertige css mir liefern könnten.

    Vielen Dank im Vorraus

  2. Anzeige

    Hover Effekt Bei Buttons

    Schau dir mal diesen Bereich an. Dort ist für jeden was dabei!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren
  3. #2
    Mire Mire ist offline
    Avatar von Mire

    AW: Hover Effekt Bei Buttons

    Gibt mehrere Moeglichkeiten.. hier mal die zwei Naheliegendsten:

    -In CSS eine :hover Klasse definieren und dann in dieser Klasse zB den Background veraendern, oder einen Schatten setzen oder was auch immer. Das ist wohl das Eleganteste, und auch recht einfach fuer Links.

    -In dem Img oder Div in dem du den Button hast, eine "onmouseover" Funktion einfuegen, in der du dann das Bild gegen ein Anderes austauschst. Natuerlich muss dann auch eine "onmouseout" her, in der man das erste Bild wieder anzeigt.

    Beispiel fuer CSS: Free CSS Navigation Menu Designs at exploding-boy.com (nicht meins, aber hat mir viel beigebracht, die Seite : p)

    Beispiel fuer JS: (_tab und _tab2 jeweils dieselben Grafiken, aber mit unterschiedlichem Hintergrund)
    Code:
    <div id="menu" style="position:absolute; top:0; left:0;">
    <img onmouseover="this.src='images/gen_tab2.png'" onmouseout="this.src='images/gen_tab.png'" src="images/gen_tab.png" />
    <img onmouseover="this.src='images/adv_tab2.png'" onmouseout="this.src='images/adv_tab.png'" src="images/adv_tab.png" />
    <img onmouseover="this.src='images/abt_tab2.png'" onmouseout="this.src='images/abt_tab.png'" src="images/abt_tab.png" />
    </div>

  4. #3
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    AW: Hover Effekt Bei Buttons

    Schonmal danke nur leider funktioniert das so nicht wirklich bei mir, hatte eine neue .html datei gemacht und den pfad zu den bildern angegeben

    images\buttonstartseite.png - onmouseout
    images\buttontesthover - onmausover

    Beispiel

    Code:
    <div id="menu" style="position:absolute; top:0; left:0;">
    <img onmouseover="this.src='images/buttontesthover.png'" onmouseout="this.src='images/buttonstartseite.png'" src="images/gen_tab.png" />
    wobei ich jetzt nicht wirklich verstehe wofür

    Code:
     src="images/gen_tab.png
    also der letze tag sein soll.

  5. #4
    Mire Mire ist offline
    Avatar von Mire

    AW: Hover Effekt Bei Buttons

    Zitat M3PHISTO Beitrag anzeigen
    wobei ich jetzt nicht wirklich verstehe wofür

    Code:
     src="http://www.forumla.de/images/gen_tab.png
    also der letze tag sein soll.
    img src ist das Bild was am Anfang erscheint, ersetze "gen_tab.png" mit "buttonstartseite.png" und das sollte funktionieren.

  6. #5
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    AW: Hover Effekt Bei Buttons

    ah danke super, es funktioniert.

    Finde diese Lösung sehr einfach, hab viele möglichkeiten ausprobiert und die waren alle sehr umständlich

    /edit : hmm jetzt hab ich leider nur ein problem ich brauch den button als link und weiss jetzt nicht genau wo ich "<a href" hinsetzen soll

  7. #6
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    AW: Hover Effekt Bei Buttons

    Hmm hätte da jetzt noch ein problem, undzwar kann ich die buttons nicht verschieben mit hilfe von
    Code:
    &nbsp;
    oder
    Code:
    <br>
    die bleiben die ganze zeit auf der selben stelle und mit

    Code:
    <div align="center">
    bekomm ich die auch nicht in die mitte.

  8. #7
    Mire Mire ist offline
    Avatar von Mire

    AW: Hover Effekt Bei Buttons

    Entferne
    Code:
    style="position:absolute; top:0; left:0;"
    aus dem DIV, falls du das noch da stehen hast.. das sollte das "Problem" beheben, und du kannst die Dinger selbst positionieren.

  9. #8
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    AW: Hover Effekt Bei Buttons

    Super danke funktioniert wunderbar, jetzt hab ich nur noch ein problem (glaube ich zumindest^^)

    undzwar benutzt ich ein frameset (leftframe,topframe,mainframe und index) so links (leftframe) hab ich die navigation mit den buttons als verweis hab ich benutzt

    Code:
    <a href="beispiel.html" target="mainframe" (damit es in der mitte angezeigt wird)<img balblabla></a>
    So der mittlere frame den habe ich auch als mainframe bezeichnet nur wenn ich auf den link klicke öffnet er es immer wieder in der Linken Seite.

    ich habs mal hochgeladen damit du vielleicht besser verstehst was ich meine
    Unbenanntes Dokument

  10. #9
    Mire Mire ist offline
    Avatar von Mire

    AW: Hover Effekt Bei Buttons

    Hm, kenne mich nicht sehr gut mit Frames aus.. aber.. uh.. ich denke du hast nur einen Tippfehler. "mainframe" sollte "mainFrame" sein.. oder halt umgekehrt ; )

  11. #10
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    AW: Hover Effekt Bei Buttons

    ja das dachte ich auch zuerst aber das ist schon so richtig, naja was solls dann muss ich auf ne antwort warten aber dank dir

    /edit : ok das mit den frames hat sich erledigt, hab erfahren das die seite dann so nicht in google erscheint und muss mir jetzt ne andere lösung suchen

  12. #11
    Mire Mire ist offline
    Avatar von Mire

    AW: Hover Effekt Bei Buttons

    Code:
    <a href="index.html target="mainframe">
                       ^
    Da fehlt uebrigens noch einmal ein --> " <-- : p

    Edit: So funktionierts dann auch, wie gesagt nur Tippfehler.. Richtig:
    Code:
    <a href="index.html" target="mainFrame">
    So: Unbenanntes Dokument

  13. #12
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    AW: Hover Effekt Bei Buttons

    ah okay danke, nur hab ebend von nem kumpel erfahren das google die frame seiten nicht unterstützt weil dadurch so ne art endloschleife passiert wenn die robots/crawler auf der seite sind. deswegen Verweigert google frame seiten.

    was wiederum heißt das ich jetzt <div> <span> etc irgendwie mir beibringen muss obwohl ich keine ahnung davon habe

  14. #13
    Mire Mire ist offline
    Avatar von Mire

    AW: Hover Effekt Bei Buttons

    Zitat M3PHISTO Beitrag anzeigen
    ah okay danke, nur hab ebend von nem kumpel erfahren das google die frame seiten nicht unterstützt weil dadurch so ne art endloschleife passiert wenn die robots/crawler auf der seite sind. deswegen Verweigert google frame seiten.

    was wiederum heißt das ich jetzt <div> <span> etc irgendwie mir beibringen muss obwohl ich keine ahnung davon habe :D
    Das mit den Frames und Google halte ich fuer 'nen (lahmes) Geruecht >_<. Aber mit div's statt frames wird das eh alles schoener und dynamischer, also lass dich davon nicht abhalten ; )

  15. #14
    M3PHISTO M3PHISTO ist offline
    Avatar von M3PHISTO

    AW: Hover Effekt Bei Buttons

    joar naja, hab bisjetzt noch nicht so richtig verstanden wie ich das machen soll, und muss mir noch die ganzen tags suchen -.-. naja und weiss halt noch nicht was mit div so möglich ist

Ähnliche Themen


  1. DS Buttons: Hi Leute, meine Nintendo DS Lite Buttons sind schon sehr schwach ( das heißt, sie gehen schlechter wieder hoch). Kann ich das irgendwie...

  2. PSP Buttons austauschen?: Hi!, Also ich habe folgendes Problem! Bei meiner PSP 1004 klemmt der Quadrat Button immer... nun wollt ich den Austauschen bzw. Reparieren lassen...

  3. Mass Effekt 2(Für Ps3!): Name: Mass Effect 2 Entwickler: Bioware Produced: EA Genre: Rollenspiel Start: Winter 2009 Plattform: Multi. Quelle:News: Xbox 360: Mass Effect...

  4. Link Hover..: HaLLo !! ich hab ein probLem :whistle: aLso ich bin im moment meine Hp am aufbauen .. naja aufjedenfall möchte ich das ich bei meiner ...