Image Replace bei :active

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

  • Image Replace bei :active

    Hi,

    ich habe eine Navigation die wie folgt aussieht (Codeausschnitt):
    Code:
    <a href="?load=1"><div class="button-home_"></div></a>
    der dazugehörige CSS Code:
    Code:
    .button-home_ {
    	position:absolute;
    	left:20px;
    	top:91px;
    	width:153px;
    	height:19px;
    	background-image:url(images/button_home.gif);
    }
    
    .button-home_:hover {
    	background-image:url(images/button_home_hover.gif);
    }
    Der hover Effekt funktioniert, nur möchte ich, dass das bild button_home_hover.gif auch angezeigt wird, wenn der Link gerade aktiv ist!
    Habe schon einiges ausprobiert, aber habs nicht hinbekommen.

    Jemand eine Idee?

  • #2
    Re: Image Replace bei :active

    ...gerade aktiv ist!...
    Was ist mit :active ??

    Kommentar


    • #3
      na, :active hast du schon genannt.

      Nur, dass du vermutlich was ganz anderes meinst, nämlich dass der User gerade auf der Seite ist.

      Das ließe sich nur über JavaScript steuern (vergleiche jeden Link mit der location) oder aber - was üblicher ist - Serverseitig (oder hardcoded) eine Klasse current zuweisen.

      Kommentar


      • #4
        gäbe es denn eine möglichkeit das ganze umzuschreiben?
        momentan steht da ja
        Code:
        .button-home_:hover
        wenn man den code aber so umschreibt, dass
        Code:
        .button-home_ a:hover
        funktioniert, wäre es ganz einfach ein :hover dahinter zu hängen.

        nur wie schreibt man das um?

        Kommentar


        • #5
          1. Häää?
          2. Was hat das mit dem Problem zu tun?

          Kommentar


          • #6
            genau das ist ja das problem ^^
            momentan ist der hover effekt nicht mit dem link verknüpft, sondern mit dem <div>!
            wäre er aber mit dem link verknüpft, könnte ich einfach :active benutzen.
            nur ich habe es nicht hinbekommen das mit dem link zur verknüpfen!

            weiß nicht genau wie ich das ausdrücken soll :x

            Kommentar


            • #7
              Dann gib doch dem link einfach die klasse .button-home_

              Mit deinem :active problem hat das aber trotzdem nichts zu tun, das das ist wie schon gesagt auch etwas anderes als das der Benuzter derzeit auf der Seite ist.
              Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

              Kommentar


              • #8
                Dann gib doch dem link einfach die klasse .button-home_
                Wozu?

                a:active .button-home_

                Kommentar


                • #9
                  Code:
                  <a href="?load=4" class="button-home_"></a>
                  habe ich jetzt im Menü stehen.
                  Dem CSS Code habe ich das hier hinzugefügt:
                  Code:
                  .button-home_:active {
                  	background-image:url(images/button_home_hover.gif);
                  }
                  hover funktioniert noch, aber :active nicht!
                  kann sein, dass ich gerade irgendwas total verpeile... bin nicht sehr bewandert in CSS :/

                  Edit:
                  Code:
                  a:active .button-home_ {
                  	background-image:url(images/button_home_hover.gif);
                  }
                  funktioniert auch nicht!

                  Kommentar


                  • #10
                    Zeig mal ne Online-Version.

                    Und wozu diese überflüssigen Unterstriche?

                    Kommentar


                    • #11
                      die unterstriche hat Photoshop beim Slicen eingebaut ^^
                      Online Version:

                      http://www.matthias-henning.de/render04/
                      CSS: http://www.matthias-henning.de/render04/style.css

                      habe das ganze bis jetzt nur am Imprint und Home button getestet!

                      Kommentar


                      • #12
                        Wozu?

                        a:active .button-home_
                        Hä, ich denke der Effekt soll sich nur auf den Link beziehen, und nicht auf ein Element innerhalb vom Link ôO
                        Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                        Kommentar


                        • #13
                          Online Version:
                          Bei mir funktionierts!
                          Sicher dass du nicht doch die gerade besuchte Seite meinst?

                          Hä, ich denke der Effekt soll sich nur auf den Link beziehen, und nicht auf ein Element innerhalb vom Link ôO
                          Wenn dem so sein sollte, dann frage ich mich, warum das selbe bild sich beim Hover auf das div beziehen sollte. Nur so.

                          OffTopic:
                          BTW: Schalt mal Bilder im Browser aus! Ambesten nachdem die seite geladen wurde, über developer-toolbar -> images -> disable. Der Effekt ist super!

                          Kommentar


                          • #14
                            Original geschrieben von TobiaZ
                            Bei mir funktionierts!
                            Sicher dass du nicht doch die gerade besuchte Seite meinst?
                            vielleicht drück ich mich wegen meiner unwissenheit unklar aus (sry ):
                            Ich möchte, dass das Bild, das beim Rollover angezeigt wird, auch angezeigt wird, wenn der jeweilige Button bzw Link gerade aktiv ist!

                            Kommentar


                            • #15
                              Das sagen wir doch die ganze zeit

                              Aktiv != Benutzer ist auf der Seite

                              Aktiv == Benutzer hat den gerade angeklickt und die neue Seite wird angefordert
                              Nur wenige wissen, wieviel man wissen muss, um zu wissen, wie wenig man weiß.

                              Kommentar

                              Lädt...
                              X