Mouseover mit CSS bei Grafiken

  • huhu :muetze:

    die überschrift verrät eigtl schon alles was ich brauche.
    Ich bräucht n kleines Beispiel fürn Mouseovereffekt mit css bei Grafiken..

    Es darf kein einziges stück javascript dabei sein!

    Hab kein passendes im internet gefunden :ueberleg:

    Dankee :danke:

  • Ich bastel dir mal schnell was zusammen... was ganzzzzz einfaches ;)

    Da ist wohl jemand schneller...

  • bluerose mach du es mal für ihn bitte
    hab hier das problem mit html
    Matze hast du irgentwas wie ich html anzeigen kann?

  • Das werde ich aber genauso haben... zumindest hier...

    Aber erst einmal ne einfache Frage: Mouseover mit direkt einer Grafik oder mit Text und einer Grafik im Hintergrund?

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Rollover mit CSS - Beispiel 5</title>
    <style>
    a { display:block;
    background-image:url(button.gif);
    width:120px; height:30px }
    a:hover { background-image:url(button_on.gif); }
    </style>
    </head>
    <body>
    <h1>Bild-Button mit CSS</h1>
    <p><a href="#">&nbsp;</a></p>
    </body>
    </html>

    mach das mal irgentwo sichtbar und guck mal ob du sowas meinst

  • danke, aber da habe ich das problem das ich nicht weiß wie ich das einstellen soll wenn ich mehrere unterschiedliche grafiken platzieren will :ueberleg:

  • hast du schon mal bei selfhtml nachgeschaut?
    die haben ne suchfunktion und auch beispiele die man herauskopieren kann.

  • @ gamer, oke danke :danke:

    @schwabi, des beispiel is glaub ich von selfhtml,.. des hab ich dort auch gefunden und hatte des problem mit den mehreren grafiken..

    aber gamer probierts ja :D

  • es gibt nix was es bei selfhtml nicht gibt, man muss halt manchmal auch ein klein wenig suchen und die beispiele anschauen.

  • ja hab ich doch :P
    da war ne seite mit vielen beispielen für mouseovereffekte mit css..

    un da war nur das eine mit den grafiken des hier schon geschrieben wurd.. un da war nix mit mehreren...

  • Ich hab hier einen Code, den habe ich für meine Bewerbungsseite genommen:

    [COLOR=#87CEEB]Link: Hier kommt die URL vom Bild hinein, was beim mouseover angezeigt werden soll.[/COLOR]

    [COLOR=#FF0000]Link 2: Hier wird die Unterseite für das Menü verlinkt[/COLOR]

    [COLOR=#2E8B57]Link 3: Hier kommt die URL vom Bild rein, das ohne mouseover angezeigt wird[/COLOR]

    Bei einem neuen mouseover-Bildlink wird der gesamte text kopiert, die Links nach namen der entsprechenden buttons und der unterseite geändert.

    Wichtig:
    [COLOR=#D2691E]"wechselmich1"[/COLOR] diese beschriftung muss bei jedem neuen button geändert werden, zB in "wechselmich2", "wechselmich3" damit der code die buttons zuordnen kann.

    Ich hoffe, ich konnte dir damit ein wenig helfen.

    So kannst du ein ganzes mouseover butonmenü erstellen.

  • Ich hab hier einen Code, den habe ich für meine Bewerbungsseite genommen:

    ---------------------------------------------------
    [COLOR=#4169E1]Link: Hier kommt die URL vom Bild hinein, was beim mouseover angezeigt werden soll.[/COLOR]

    [COLOR=#FF0000]Link 2: Hier wird die Unterseite für das Menü verlinkt[/COLOR]

    [COLOR=#2E8B57]Link 3: Hier kommt die URL vom Bild rein, das ohne mouseover angezeigt wird[/COLOR]

    Bei einem neuen mouseover-Bildlink wird der gesamte text kopiert, die Links nach namen der entsprechenden buttons und der unterseite geändert.

    Wichtig:
    [COLOR=#D2691E]"wechselmich1"[/COLOR] diese beschriftung muss bei jedem neuen button geändert werden, zB in "wechselmich2", "wechselmich3" damit der code die buttons zuordnen kann.

    Ich hoffe, ich konnte dir damit ein wenig helfen.

    So kannst du ein ganzes mouseover butonmenü erstellen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!