Silke: aktiver Zustand eines rollovers schon bei eintritt auf die Seite

Hallo --

Unter folgendem Link könnt ihr den bisherigen Stand meiner Arbeit sehen:
http://www.frankjuettner.de/testCSS/bautenbock.htm

Ich möchte jetzt allerdings, dass man das erste Bild incl. rotem Balken (aktiver Zustand) schon bei Eintritt auf die Seite sieht.

Es geht wohl nur mit JavaScript, aber ich weiss leider nicht wie...

Ich hoffe, jemand hier kann mir helfen.

  1. Ich hoffe, jemand hier kann mir helfen.

    Ich bin jetzt erst mal für 1-2 Stunden weg, schaue aber danach gleich wieder hier im Forum vorbei. Also bitte nicht wundern, wenn ich nicht gleich antworte - ist nicht böse gemeint.

    1. Schade, kann mir denn niemand hier weiterhelfen?

      1. Hi Silke,

        Schade, kann mir denn niemand hier weiterhelfen?

        Nur Geduld, meist stellen sich Antworten auch erst einen Tag später ein. Ich habe vorhin schon überlegt, aber ich glaube, dass was du willst ist schlichtweg nicht ganz so möglich.
        Der rote Balken erscheint ja nur beim hovern, wenn der Link aktiv ist, wird es ja grau (im Übrigen hovern dann nur noch die folgenden Links, nicht mehr die vorangegangenen, warum weiß ich nicht).
        Das Einzige, was mir einfällt, wäre den ersten Link quasi hart zu setzen, dass heißt das Bild einblenden und den Balken rot machen.

        Beispiel für das Bild.

          
         #Bock #foto01 a img { /*das große bild ist unsichtbar*/  
          position: absolute;  
          display: block;  
          height: 280px;  
          width: 368px;  
          border-width: 0;  
          top: -270px;  
          left: -458px;  
         }  
        
        

        Allerdings bleibt es dann immer im Hintergrund, die anderen Bilder legen sich nur drüber.

        Mhm ...

        Ferner wollte ich dich fragen, ob die Links tatsächlich welche werden wollen, oder ob du sie nur zum hovern brauchst, wenn ja, kannst du auch das Listenelement hovern und brauchst den unschönen Umweg über a href="#" nicht.

        ciao
        romy

        1. Der rote Balken erscheint ja nur beim hovern, wenn der Link aktiv ist, wird es ja grau (im Übrigen hovern dann nur noch die folgenden Links, nicht mehr die vorangegangenen, warum weiß ich nicht).

          Mit welchem Browser hast du das getestet? Im FF funktionierts wunderbar. Wahrschienlich wieder ein IE-Problem...

          Das Einzige, was mir einfällt, wäre den ersten Link quasi hart zu setzen, dass heißt das Bild einblenden und den Balken rot machen.
          Allerdings bleibt es dann immer im Hintergrund, die anderen Bilder legen sich nur drüber.

          Ja, soweit war ich auch schon... Wenn das erste Bild "hart" gesetzt ist, dann erscheint es auch immer, wenn ich zwischen zwei Balken mit der Maus bin. Das "flackert" dann ziemlich unruhig, wenn man sich die Bilder der Reihe nach anschauen möchte.

          Ferner wollte ich dich fragen, ob die Links tatsächlich welche werden wollen, oder ob du sie nur zum hovern brauchst, wenn ja, kannst du auch das Listenelement hovern und brauchst den unschönen Umweg über a href="#" nicht.

          Die Links brauche ich eigentlich nur zum hovern, aber ohne den a href funktionierts nicht... ich habs eben mal ausprobiert...
          Vielleicht liegts an der Art, wie ich die großen Bilder einblende - ich mache das nur mit CSS... siehe auch diese Seite:
          http://meyerweb.com/eric/css/edge/popups/demo2.html

          1. Hi Silke,

            Der rote Balken erscheint ja nur beim hovern, wenn der Link aktiv ist, wird es ja grau (im Übrigen hovern dann nur noch die folgenden Links, nicht mehr die vorangegangenen, warum weiß ich nicht).
            Mit welchem Browser hast du das getestet? Im FF funktionierts wunderbar. Wahrschienlich wieder ein IE-Problem...

            Stimmt mit dem FF geht es, mit dem Exploren nicht. Aber dafür bleibt das Bild im FF nie stehen, sondenr nur, wenn man mit der Maus drauf ist.

            Ja, soweit war ich auch schon... Wenn das erste Bild "hart" gesetzt ist, dann erscheint es auch immer, wenn ich zwischen zwei Balken mit der Maus bin. Das "flackert" dann ziemlich unruhig, wenn man sich die Bilder der Reihe nach anschauen möchte.

            Ja, das ist unschön!

            Die Links brauche ich eigentlich nur zum hovern, aber ohne den a href funktionierts nicht... ich habs eben mal ausprobiert...
            Vielleicht liegts an der Art, wie ich die großen Bilder einblende - ich mache das nur mit CSS... siehe auch diese Seite:
            http://meyerweb.com/eric/css/edge/popups/demo2.html

            Der IE kann es wohl nicht, FF sollte es könne, da bin ich aber zu wenig bewandert.

            Mhm, als Lösung fiele mir dann nur noch komplett Javascript ein:
            Du würdest dann onMouseOver und onMouseOut verwenden und deine Bilder damit ein und ausblenden. Ist halt nicht so schön, da müsstest du dir noch eine Lösung zusätzlich ohne javascript einfallen lassen.

            getElementByID

            ciao
            romy

            1. Hi romy,

              du könntest natürlich auch hinter die Links javascriptfunktionen legen, welche die Bilder jeweilig aus- und einblenden, dann hast du das problem mit dem Startbild nicht mehr, da du es so ausblenden kannst.

              ciao
              romy

              1. du könntest natürlich auch hinter die Links javascriptfunktionen legen, welche die Bilder jeweilig aus- und einblenden, dann hast du das problem mit dem Startbild nicht mehr, da du es so ausblenden kannst.

                Ja, das werde ich jetzt mal ausprobieren - nachdem ich mit meinem Sohn spazieren war...

                Ich melde mich dann wieder.

                1. Also, ich habe jetzt die Bilder per JS ein- und ausgeblendet. Das Ergebnis siehst du hier:
                  http://www.frankjuettner.de/testCSS/bautenbock.htm

                  Was jetzt noch schön wäre, wenn der erste Balken gleich im rollover-Zustand wäre (=rot), da ja auch das erste Bild sichtbar ist...

                  1. Hi,

                    Was jetzt noch schön wäre, wenn der erste Balken gleich im rollover-Zustand wäre (=rot), da ja auch das erste Bild sichtbar ist...

                    dafür (da Du sowieso JS verwendest) könnte man einen onLoad event verwenden

                    siehe http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=onLoad

                    Gruss

                    Maulwurf

                  2. ohje, diese betagten marcromedia-Funktionen hast du dir ausgesucht :(

                    Seinerzeit brachte man damit den IE4 und Netscape Navigator unter einen Hut, aber heute ...?

                    Schade nix mehr von der eleganten CSS-Variante übrig geblieben.

                    Was jetzt noch schön wäre, wenn der erste Balken gleich im rollover-Zustand wäre

                    das wird man auch noch hinkriegen (vielleicht schaffe ich es morgen noch, einen Entwurf vorzustellen)

                    bleibt noch offen, welches Angebot für deaktiviertes JS vorgesehen ist?

                    fg planB

                  3. hallo,

                    inspiriert durch Silkes Design, stelle ich hier eine Galerie vor.

                    ohne aktives JS wird ein scrollbarer Bereich definiert.
                    mit JS werden ein paar style-Anweisungen geändert und die Bildauswahl durch onmouseover gesteuert.

                    fg planB

                    1. ohne aktives JS wird ein scrollbarer Bereich definiert.
                      mit JS werden ein paar style-Anweisungen geändert und die Bildauswahl durch onmouseover gesteuert.

                      Super - genauso wollte ich es haben!
                      Jetzt muss ich nur noch durchsteigen, wie du das gemacht hast... und dann versuchen, das ganze bei mir einzubauen.

                      Uff - ich gebe mein bestes...

                      Danke!

                      1. hallo,

                        Jetzt muss ich nur noch durchsteigen, wie du das gemacht hast... und dann versuchen, das ganze bei mir einzubauen.

                        sollte ich doch noch das ganze erklären müssen?
                        Mir erscheint sowohl der CSS- wie auch der Script-Teil so einfach und übersichtlich, dass ich gar nicht weiss, wo sich Verständnisschwierigkeiten ergeben könnten¿?

                        fg planB

          2. hallo,
            fast hätte ich gestern schon mal was geschrieben

            Seite sieht ganz schick aus, aber ...

            • für langsame Verbindung ist die Seite zu gross, habe die Elemente überfahren, aber nix passiert, erst im 2. Anlauf gemerkt, dass da doch noch was ist.
            • alte IE's brauchen noch ein extra CSS (padding problem)

            Der rote Balken erscheint ja nur beim hovern, wenn der Link aktiv ist, wird es ja grau (im Übrigen hovern dann nur noch die folgenden Links, nicht mehr die vorangegangenen, warum weiß ich nicht).

            Mit welchem Browser hast du das getestet? Im FF funktionierts wunderbar. Wahrschienlich wieder ein IE-Problem...

            ohne js kommt man wohl nicht weiter. Der IE braucht in den Links noch ein:
            onclick="return false"

            Wenn dann schon js nötig ist, um das 1. Bild anzuzeigen, dann kann man die Bildgalerie auch gleich ganz in js machen und hat weitere Möglichkeiten.

            • Text zum Bild
            • Bild bleibt stehen, auch wenn der Cursor das Bedienelement verlässt

            mein Fazit:

            Bildgalerie mit CSS/hovern: Sackgasse

            fg plan_B