Anzeige

Mouseover hier möglich?

Mouseover hier möglich? | PSD-Tutorials.de

Erstellt von colabirne, 19.04.2006.

  1. colabirne

    colabirne Noch nicht viel geschrieben

    Dabei seit:
    09.12.2004
    Beiträge:
    27
    Geschlecht:
    männlich
    Ort:
    Berlin!
    Software:
    CSII
    Mouseover hier möglich?
    Hallochen,
    zuerst hoffe ich, daß meine Frage hier an richtiger Stelle gepostet ist. Aber da ich von dem, was ich vorhabe zu tun, im Grunde überhaupt keine Ahnung habe *g*, weiß ich leider auch nicht, ob das eher eine "html&css"-frage ist ...

    Also:
    Ich habe mir gedacht `colabirnchen, mach doch mal eine webseite!´ und habe das dann auch mit Hilfe von templates halbwegs gebacken bekommen. Meinen (nicht vorhandenen) Fähigkeiten entsprechend mit Frontpage.
    Jaaaa, ich weiß ...
    Ich wills jetzt ja auch vernünftig machen.
    Aber ich habe trotzdem mit dem angefangen, was mir Spaß macht, nämlich Photoshoppen *g*.
    Nun würde ich gerne in meinem "Design" folgenden Mouseoverefekt haben:
    [​IMG]
    Ist das überhaupt realisierbar?
    Ich meine, daß sowohl der Button eingedrückt wird und die Schrift erscheint?

    Ich bin für jeden Kommentar oder hilfreichen Link dankbar ...

    bis denn,
    colabirne
     
    #1      
  2. 8ung3st

    8ung3st Guest

    Mouseover hier möglich?
    Hallo

    Mit Photoshop geht das schon mal gar nicht, wenn dann mit ImageReady.
    Fireworks geht auch aber ich denke am besten ist noch Javascript.
    Wenn ich mist geschrieben habe, dann bitte um Berichtigung. *lach*

    lg Cat
     
    #2      
  3. FreakD

    FreakD Aktives Mitglied

    Dabei seit:
    24.02.2006
    Beiträge:
    693
    Geschlecht:
    männlich
    Ort:
    Pegnitz / Bayern
    Software:
    Photoshop CS6
    Kameratyp:
    Canon EOS 1100D
    Mouseover hier möglich?
    Erstellen kannst du den Button im Photoshop schon, einmal mit und einmal ohne Hover Effekt!
    Dann speicherst du 2 Bilddateien ab! Einmal mit Hovereffekt, und einmal ohne!

    Und dann per rollover in die HP einbauen!

    Des geht mit CSS und mit Javascript!
     
    #3      
  4. Mermei

    Mermei Aktives Mitglied

    Dabei seit:
    01.11.2005
    Beiträge:
    438
    Geschlecht:
    männlich
    Mouseover hier möglich?
    und css ist auf jeden fall vorzuziehen!!!

    =)

    gruss mermei
     
    #4      
  5. creative-artist

    creative-artist Noch nicht viel geschrieben

    Dabei seit:
    28.03.2006
    Beiträge:
    38
    Mouseover hier möglich?
    css wäre vorzuziehen, aber ich bin mir nicht sicher, ob per pseudoklasse
    hover mehrere bilder auswechseln kann. ich denke eigentlich nicht, muss mal
    gucken.
    mit javascript ist das kein problem, aber dann bist du darauf angewiesen,
    dass javascript aktiviert ist.
    barrierefreier ist auf jedenfall javascript.

    gruss creative-artist
     
    #5      
  6. creative-artist

    creative-artist Noch nicht viel geschrieben

    Dabei seit:
    28.03.2006
    Beiträge:
    38
    Mouseover hier möglich?
    sorry meinte css :)
     
    #6      
  7. kleinerVampir

    kleinerVampir Aktives Mitglied

    1
    Dabei seit:
    28.01.2006
    Beiträge:
    1.465
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Photoshop CS5 | Notepad++
    Kameratyp:
    CANON EOS350D
    Mouseover hier möglich?
    CSS

    [php:1:936ad17fba]
    <style>
    a { background-image:url(button_normal.gif); width:120px; height:30px }
    a:hover { background-image:url(button_maus_drauf.gif); }
    </style>
    [/php:1:936ad17fba]

    EDIT: Der Code gehört in die HTML Datei zwischen <HEAD> und </HEAD>
     
    #7      
  8. meccenandy

    meccenandy Aktives Mitglied

    1
    Dabei seit:
    10.02.2006
    Beiträge:
    539
    Geschlecht:
    männlich
    Ort:
    Ludwigsfelde
    Software:
    psd, illu, ind, fla
    Kameratyp:
    Canon EOS 450d
    Mouseover hier möglich?
    ja genau CSS

    der code von kleinervampir ist da genau richtig :wink:

    Gruß Andy
     
    #8      
  9. Eskayp

    Eskayp Something

    Dabei seit:
    29.01.2006
    Beiträge:
    235
    Geschlecht:
    männlich
    Mouseover hier möglich?
    Der Code von KleinerVampir ist nicht ganz richtig, da dieser ja nur den Hover-Effekt des Buttons realisiert, nicht aber den Text "Das Team" zusätzlich "hinschreibt" (bzw. durch Bildaustausch erscheinen lässt).

    In diesem Fall musst Du also wirklich auf JS zurück greifen. Ob das allerdings mit Frontpage in dieser Form möglich ist, kann ich Dir leider nicht sagen, da ich mit dem Programm nicht vertraut bin.
     
    #9      
  10. colabirne

    colabirne Noch nicht viel geschrieben

    Dabei seit:
    09.12.2004
    Beiträge:
    27
    Geschlecht:
    männlich
    Ort:
    Berlin!
    Software:
    CSII
    Mouseover hier möglich?
    Hi,
    erstmal vielen Dank für eure bisherigen Antworten!

    Ja, ich will das eigentlich auch so machen ... hatte da ein Tut gelesen, wo das gar nicht sooo schwierig geklungen hatte *g*

    Hmm ... dann wäre es wohl besser, auf javascript zu verzichten.

    *lol* ich glaube, ich habe bei meinem letzten "fontlöschanfall" doch eine weggehauen, die ich noch gebraucht hätte ... ich sehe da nur Hyroglyphen. Aber per editor hab ich´s entziffert. Vielen Dank!
    Bleibt nur die Frage, ob das so geht, weil doch mein "button_maus_drauf.gif" die Schrift beinhalten soll und deswegen viel größer ist, als der eigentliche button ...

    Ja! Genau das meinte ich *g*
    Dann geht´s also doch nur mit Javascript?
    Hm ... mist, ich fand das eigentlich voll schön so, aber dann muß ich die Menügestaltung wohl nochmal überdenken ...
    Es soll ja am Ende für jeden Besucher gleich gut und unkompliziert sein ...

    Aber trotzdem ganz lieben Dank nochmal für eure Hilfe!

    bis denn,
    colabirne
     
    #10      
  11. creative-artist

    creative-artist Noch nicht viel geschrieben

    Dabei seit:
    28.03.2006
    Beiträge:
    38
    Mouseover hier möglich?
    es bleibt dir leider nichts anderes übrig.
    entweder javascript oder du wartest auf css3.
    dort dürfte es möglich sein, da man mehrere hintergrund bilder auf ein div-tag legen kann.

    mfg creative-artist
     
    #11      
  12. redM

    redM Nicht mehr ganz neu hier

    Dabei seit:
    09.02.2006
    Beiträge:
    115
    Geschlecht:
    männlich
    Mouseover hier möglich?
    das geht auch ohne Javascript nur mit css

    http://redm.pytalhost.de/cssbutton/

    der Link selbst wird als Textlink eingegeben, bei dem sich das Hintergrundbild und die Textfarbe beim Hover ändert.
     
    #12      
  13. vertigo

    vertigo Noch nicht viel geschrieben

    Dabei seit:
    06.12.2005
    Beiträge:
    25
    Ort:
    Oberwaltersdorf
    Mouseover hier möglich?
    möglicherweise versteh ich was falsch aber ich glaub die anforderung war anders gemeint:
    wenn man über einen der 7 buttons fährt soll jeweils ein anderer menüpunkt angewählt sein und deshalb ein andrer text stehen.

    wobei ich mir einbild sowas aber mit css auch schon gesehen zu haben... ich glaub unter css-imagemaps oder so.
     
    #13      
  14. redM

    redM Nicht mehr ganz neu hier

    Dabei seit:
    09.02.2006
    Beiträge:
    115
    Geschlecht:
    männlich
    Mouseover hier möglich?
    Wer um alles in der Welt sollte denn auf 3Pixel große Menüpunkte klicken??
    naja, wenns schöö macht........

    aber hast Recht @vertigo
    das liesse auch mit css ohne java realisieren.

    zb: mit einem Bild, auf dem alle Variationen untereinander vorhanden sind, aber nur jeweils eine im sichtbaren Bereich liegt.
    Beim Hover wechselt dann nicht das Bild selbst sondern nur die Position-
    der Entsprechende Bildausschnitt rutscht in den sichtbaren Bereich
     
    #14      
  15. vertigo

    vertigo Noch nicht viel geschrieben

    Dabei seit:
    06.12.2005
    Beiträge:
    25
    Ort:
    Oberwaltersdorf
    Mouseover hier möglich?
    so hab ich mir das auch dacht... aaaaber mir fällt grad ein: es muss ja jeder der punkte ein eigener a:hover-tag sein, aber der text soll immer an der selben stelle stehen... hmmm geht das trotzdem?
    lg vertigo
     
    #15      
  16. kleinerVampir

    kleinerVampir Aktives Mitglied

    1
    Dabei seit:
    28.01.2006
    Beiträge:
    1.465
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Photoshop CS5 | Notepad++
    Kameratyp:
    CANON EOS350D
    Mouseover hier möglich?
    Das funktioniert sicherlich. Also hab ich das jetzt so richtig verstanden ... Buttons normale größe - ich geh mit der Maus drauf - der Button wird größer und es steht ein Text drin - ich geh mit der Maus wieder runter und es sieht alles normal aus ... richtig ? Wenn ja dann stimmt mein Code oben , muss nur etwas geändert werden, damit du in jedem Button auch den richtigen Text stehen hast. Wenn ich das so richtig verstanden hab dann wäre es praktisch wenn man die Buttons hätte und dann wüsste wieviele das sein müssen... dann könnte man dir das ganz einfach zeigen :)

    LG
     
    #16      
  17. vertigo

    vertigo Noch nicht viel geschrieben

    Dabei seit:
    06.12.2005
    Beiträge:
    25
    Ort:
    Oberwaltersdorf
    Mouseover hier möglich?
    seh ich das richtig und man muss hier mit negativen margin-properties arbeiten damit der text beim rollover immer an derselben stelle steht? und die margin-werte sind für jeden button unterschiedlich - oder steh ich da jetzt total auf der leitung?
    :roll:
     
    #17      
  18. colabirne

    colabirne Noch nicht viel geschrieben

    Dabei seit:
    09.12.2004
    Beiträge:
    27
    Geschlecht:
    männlich
    Ort:
    Berlin!
    Software:
    CSII
    Mouseover hier möglich?
    Also doch?

    Tut mir leid, wenn ich das blöd erklärt hatte, ich versuchs nochmal *g*
    So hatte ich mir mein "Design" vorgestellt:
    [​IMG]

    Die buttons sollten am liebsten so funktionieren, daß ich jeden einzeln anklicken kann(*g*) und daß aber jeder zusätzlich auch einen eigenen text bekommt:

    normal -> [​IMG]
    geklickt -> [​IMG]
    oder so -> [​IMG]
    Bei dem geklickten weiß ich nicht, ob variante a) oder b) richtig ist ...

    Und mein Problem besteht ja auch haupsächlich darin, daß ich nicht weiß, ob man einem button von z.B. 20x20 px ein "geklickt.gif" zuweisen kann, daß z.B. 500x20 px groß ist (500 weil ja bei dem nicht nur der eigentliche button anders aussehen soll, sondern auch am anderen Rand der Text).

    Entschuldigt, wenn ich hier für Verwirrung gesorgt habe und wie gesagt:
    Vielen, vielen Dank für eure Hilfe!

    bis denn,
    colabirne


    btw ...
    ... niemand *g* das hier sind doch nur die thumbs
     
    #18      
x
×
×