Loading...   Upload Image

Hover Effekt??Forum » Webzone » (X)HTML & CSS » Hover Effekt??

Neues Thema verfassen Neues Thema

  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    21.09.2009 um 14:10 Uhr

    hey
    ich benutze Adobe Photoshop CS4 und bin grad dabei ein neues lay zu erstellen nur kapier ich des mit dem Hover Effekt irgendwie nicht könnt mir jemand helfen ich hab schon ein tutorial gelesen nur nix kapiert.
    Danke



  • HRJelUser ist offline
    Newbie



    Registriert: 27.03.2008
    Beitraege: 3

    22.09.2009 um 20:53 Uhr

    Habe zwar kein Photoshop CS4, allerdings ist das ganz einfach.
    Sagen wir mal, du möchtest für deine Navigation deiner Homepage (Navi = besteht aus gelinkten Bildern) Hover-Effekte benutzen.
    Du erstellt ein Bild, auf dem zum Beispiel "Home" steht.
    Das speicherst du als home.png (oder home.jpg). Dann machst du etwas anderes aus dem Bild. Zum Beispiel kannst du dieses "Home" durchstreichen, einen Tintenfleck hinzusetzen, die Schrift verändern (Farbe, Schriftart, fett/kursiv) etc.
    Das speicherst du dann als home_.png, home2.png, home_hover.png etc. ... der Dateiname ist eigentlich egal.

    Dann fügst du das samt Code in deine Homepage ein.

    Hast du das mit dem Erstellen der Bilder verstanden? Falls nein, frag ruhig. Ich habe eh keine Hobbies D":
    Der Code muss ja hier irgendwo als Tutorial zu finden sein. ;)

    xoxo, jel. :>



  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    23.09.2009 um 13:48 Uhr

    das mit dem code ist grad bei mir das problem ich kapier nicht wo ich das bild einfügen muss danke das du überhaupt geantwortet hast :)



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    25.09.2009 um 17:06 Uhr

    Wie schaut denn dein code aus?



  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    25.09.2009 um 17:31 Uhr

    hey hier ist mein Index, ich hab deeshalb mein index mit gegeben weil immer wenn ich den header cod mit den links in mein index packe erkennt er die links nciht aber immer wenn ich das unten stehene script rausmache funkt es wider ist mein Index irgend wie falsch??

    
    
    paramore+
    
    
    
    
    



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    25.09.2009 um 19:53 Uhr

    Also du musst einfach folgenden validen Mini-Java-Script-Code anstelle deiner verlinkten Bild-Elemente einfügen (funktioniert - ist auch bei meiner Website im Einsatz) - bei deaktiviertem Javascript funktioniert der Link immer noch, der Hover-effekt alledings nicht:

    <a href="LINKADRESSE"><img style="border: 0px solid ; width: BILDGÖSSE; height: BILDHÖHE;" alt="TAG" id="IMAGE_ID_1" src="BILD_NORMAL" onmouseover='document.getElementById("id="IMAGE_ID_1" " ).src="BILD_HOVER"' onmouseout='document.getElementById("IMAGE_ID_1 " ).src="BILD_NORMAL"' align="top"/></a>

    Wichtig: Das Hover-Bild (wenn man mit der Maus darüber fährt) muss genauso groß sein, wie das andere. Die IMAGE_ID muss bei jedem Link anders sein! (Innerhalb des Links gleich)



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 25.09.2009 um 19:54 Uhr ...
  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    25.09.2009 um 21:36 Uhr

    was ist die IMAGE_ID??



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    26.09.2009 um 18:57 Uhr

    Das ist einfach eine einmalige Zahl pro Seite/eine Buchstabenkombination - du kannst eigentlich alles nehmen, Leerzeichen o.ä. würde ich allerdings vermeiden. Der Übersicht halber beginne ich immer mit 000 und höre dann mit 999 auf ;)



  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    26.09.2009 um 20:21 Uhr

    also irgendwie geht es immer noch nicht des ist die zeile wo cih gerade editiert habe schaust du dir die mal bitte an und sagst was ich wieder falsch gemacht habe
    ps danke für deine geduld mit mir :)

    
    			TAG



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    26.09.2009 um 22:20 Uhr

    
    News
    


    So sollte es funktionieren ;)



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 26.09.2009 um 22:21 Uhr ...

[ 1 ] 2 » ... Letzte » Seite 1 von 2


Affiliates:   Pat DG  •   The Seduction  •   Design Grafixx  •   Gallery Yuri  •   Blue-Graphics  •   Colorful Gfx  •   Chibi Graphics  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider