Mouseover-effekt

    Hallo Zusammen,

    ich würde gerne einen besonderen Mouseover-effekt programmieren, hab aber null Ahnung wie man das macht.

    Kann mir da jemand helfen?

    Vielen Dank für Eure Antworten.

    Gruß
    Posi

    kommt drauf an was du genau unter "besonders" verstehst.

    wenns mit css umsetzbar is (ises meistens) dann würd ich mal
    nach a:hover sehen....

    ein link wird ja so definiert

    Code
    <a href="....">der text</a>

    auf das a element kannste 4 varianten anwenden.
    eine davon ist "hover" - das überfahren.

    in css kannst dann z.b. angeben

    Code
    a:hover { color:#ff000; text-decoration:underline; font-weight:bold; }

    dann sind alle links beim mouse-over rot, unterstrichen und fett geschrieben.


    mehr dazu findest z.b. auch hier: http://www.css4you.de

    Ich habe mit Photoshop einen Button im Glasdesign gezeichnet. Unter was besonderes verstehe ich, dass z.B. dieser Glasbutton von unten beleuchtet wird, wenn man mit der Mouse drüber fährt.

    ok... sowas is mit css nur bedingt möglich. dazu musst dann schon erstmal
    den von unten beleuchteten glasbutton ebenfalls in photoshop erstellen...

    Hi,

    das wäre dann ein grafisches Menü.
    Dann solltest du mit PS eine Grafik machen, die beide Linkzustände enthält.
    Der jeweils benötigte Zustand wird dann ganz einfach über background-position ins Bild geschoben.

    Ist mit CSS überhaupt kein Problem. ;)

    koslowski

    Hi,

    Zitat von driver

    kleine erläuterung gibts hier auch...
    http://www.1ngo.de/web/buttons.html

    ähem...., *räusper*...., nix gegen Ingo, der kennt sich wirklich gut aus, aber das Tut ist imho leider unbrauchbar.

    Begründung:
    Die Verwendung von Tabellen widerspricht jeglicher Semantik und ist absolut unnötig. Tabellen sind für tabellarische Daten da und für sonst nix.
    Ein Menü ist eine Aufzählung von Links und gehört somit in eine ul.

    Grafische Menüs werden oft ja auch verwirklicht, damit man den Links eine schöne Schrift geben kann, die die Browser i.d.R. aber nicht zur Verfügung haben.

    Sumas können mit Bildern aber nix anfangen, sie folgen den Links und deshalb muss der Linktext trotzdem im Markup stehen, damit er von Sumas indexiert werden kann.
    Außerdem wäre der Screenreaderuser bei abgeschalteten Grafiken aufgeschmissen.

    Ich stell gleich mal ein Tut für ein grafisches Menü hier rein, was all dies berücksichtigt, muss nur mal gucken, wo ich das noch hatte.

    musst mal ganz durchlesen *G*

    die tabelle wird unten durch divs ersetzt. is immerhin n fortschritt.
    wobei des ganze dann natürlich zu ner divsuppe verkommen könnte...

    Hi driver,

    Zitat von driver

    musst mal ganz durchlesen *G*
    die tabelle wird unten durch divs ersetzt. is immerhin n fortschritt.
    wobei des ganze dann natürlich zu ner divsuppe verkommen könnte...

    hab ich, ich hatte kein Problem.
    Aber auf jemand der sich noch nicht so auskennt, könnte das verwirrend wirken.
    Ne divsuppe ist auch nicht nötig bei grafischen Menüs.

    Hi,

    wir erstellen ein einfaches grafisches Menü.

    Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
    Normalzustand ist oben in der Grafik, der Hoverzustand darunter.


    Doctype ist "strict" um immer im Standardmodus zu sein.
    Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

    Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
    Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

    XHTML:

    Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:

    <a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
    overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
    Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):

    Code
    a,
 strong  {
      position:relative;
      overflow:hidden;
      display:block;
      width:100%;
      height:40px;
}

    Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:

    Der gehoverte Zustand wird definiert:

    Code
    #navi01 a:hover span,
#navi01 a:focus span,
#navi02 a:hover span,
#navi02 a:focus span,
#navi03 a:hover span,
#navi03 a:focus span  {
    background-position:0 -40px;
}

    Es wäre ja ein Wunder, wenn der IE sich damit zufriedengeben würde.
    Er hat aber plötzlich vergessen, beim überfahren des Links aus dem Pfeil eine Hand zu machen.
    Das wird ihm per CC wieder beigebracht:

    Code
    <!--[if lte IE 7]>
  <style type="text/css">
   ul a span  {
    cursor:pointer;
}
  </style>
<![endif]-->

    Hoffe es ist verständlich beschrieben. :)

    koslowski

    Hallo driver,

    Zitat von driver

    @ koslowski
    guter beitrag. kannst da evtl auch einen dafür im skript-archiv erstellen ?
    denk des kann ma öfter mal brauchen...

    danke. :oops:

    Du meinst die Sparte in der Programmier/Entwicklungsabteilung??
    Kann ich machen. :)

    Ach ja, ich hab auch noch ein Tut zu Gilder/Levin erstellt, weil man das mit der "Überschrift durch Bild ersetzen und trotzdem Überschriftentext im Markup" ja auch öfter braucht.

    Wäre sowas auch fürs Scriptarchiv interessant?

    koslowski

    Vielen Dank, ich glaube Ihr habt mir sehr geholfen. Ich muss mich jetzt erst mal da durchackern.
    Dieses Forum darf nie sterben und ich hoffe, dass ich irgenwann auch mal jemandem hier helfen kann, denn bislang war ich aufgrund der wenigen Kenntnisse nur der Nehmer.

    Danke