Ankündigung

Einklappen
Keine Ankündigung bisher.

Bild per hover ändern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bild per hover ändern

    Hallo,
    ich bin blutige Anfängerin und möchte gerne meine eigene Webseite programmieren.

    Nun habe ich aber folgendes Problem.
    Ich habe ein Menü:

    | Home | New| usw.

    Dabei sind | Trennzeichen und sie sind Bilder. Nun möchte ich wenn mit der Maus über Home gefahren wird das sich das Trennzeichen rechts und links ändern.

    Geht das überhaupt? Und wenn ja wie?


    Vielen Danke jetzt schon mal.
    Falls das Thema hier falsch ist bitte verschieben.
    Liebe Grüße


  • #2
    Moin.

    Schau mal hier:

    stu nicholls dot com | javascript and CSS home page
    Stu Nicholls | CSSplay | CSS only menus

    imho beste Beispielseite für CSS Menüs (rund um CSS). Da findest Du ne Menge Beispiele zu deinem Thema.

    Wolf29

    P.S. http://www.lmgtfy.com/?q=css+hover+bild
    while (!asleep()) sheep++;

    Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

    Kommentar


    • #3
      Hi,

      Ich hab die Links von Wolf29 jetzt nicht durchgesehen, falls dort ähnliches gemacht wird.
      Ich mache es immer so, wenn ich Buttons/Navigationspunkte als Bild nutze, daß ich die Bilder in doppelter Höhe erstelle
      und per background-Eigenschaft im CSS die Position anpasse.

      Als Beispiel bei einem Button von 50x20 Pixel erstelle ich eine Grafik von 50x40 und lege in den oberen 20 Pixel den Standardbutton ab und in den unteren den Hover-Button.
      Den A-Tag definiere ich dann im CSS folgendermassen:
      Code:
      A.meinbtn {
        width:50px; height:20px;
        background:url(./pfad/zum/button.jpg) top;
        float:left;
        display:block;
      }
      
      A.meinbtn:hover { background-position:bottom; }
      Um ein wenig auf Braille zu achten setze ich noch ein
      Code:
      A I { display:none; }
      in das CSS und kann dann den Anchor mit
      Code:
      <a class="meinbtn" href="#" target="_self"><i>Home</i></a>
      den Button setzen.
      Das hat den Vorteil, daß bei deaktiviertem CSS die Navigation trotzdem ohne Einschränkung nutzbar ist.

      Wie gesagt: Mag sein, daß die Links von wolf29 das ähnlich machen.
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar


      • #4
        @Arne Drews: Ja, machen Sie, aber man muss etwas suchen! Du hast ja praktisch schon die Lösung geliefert!

        Wolf29
        while (!asleep()) sheep++;

        Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

        Kommentar


        • #5
          Na dann, sorry.
          Aber sie muß es ja noch verstehen, um es auf Ihre Button anwenden zu können.
          1:1 kopieren wird nicht funzen...
          Competence-Center -> Enjoy the Informatrix
          PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

          Kommentar


          • #6
            Das versteh ich nicht so ganz.
            Ich änder damit doch immer nur den gleichen Button oder?
            Ich möchte gerne ein einfaches Bild nur ändern.

            Also zb aus :
            |Home|News|

            *Home*News|

            machen wenn ich über Home gehe.

            Kommentar


            • #7
              ...meine Links hattest Du nicht angeschaut, oder? Dann schau nochmal hier:

              WebDesign - Tips und Tricks: Bildwechsel clever mit CSS

              Wolf29

              P.S. Außerdem finde ich es auch recht gut erklärt von Arne Drews. Was ist daran unklar?
              while (!asleep()) sheep++;

              Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

              Kommentar

              Lädt...
              X