Henry K.: Aufblizen der Seite als Weiterleitung

Hallo ihr Lieben,

ich habe eine Frage. Ich erstelle gerade eine Seite für einen Fotografen, der sich eine Startseite wünscht. Ich möchte, dass, wenn man auf die Startseite klickt, es scheint als würde es kurz blitzen, und dann auf die eigentliche Seite zu gelangen.
Wie kann ich also einen solchen Übergang erstellen. Welche Möglichkeiten habe ich mit HTML und CSS das zu realisieren (mit einfachen Mitteln) oder gibt es ein fertiges JavaScript aus dem Netz, was ich adaptieren könnte?

http://wiki.github.com/madrobby/scriptaculous/effect-highlight

Diesen Link habe ich gefunden - weiß aber nicht, wie ich das auf die ganze Seite einbauen kann ... als Übergang quasi.

Ich hoffe ihr wißt rat.
Die besten Grüße!!

  1. Soetwas müsste sich auch über Pseudoklassen realisieren lassen. Du kannst die Darstellung "während des Klicks" bestimmen (müsste :active sein glaube ich, ggf. mal die geläufigen durchprobieren).
    Wenn du dann einen dunklen Link hast kannst du ihn selber sowie seinen Hintergrund für die Klick-Dauer weiß machen... oder so.

    --
    sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
    1. Danke!

      Weißt du vielleicht auch, wie ich ihm sagen, dass er nicht nur den Link bzw. den container während des KLICKs weiß macht, sondern den ganzen Bildschirm?

      Soetwas müsste sich auch über Pseudoklassen realisieren lassen. Du kannst die Darstellung "während des Klicks" bestimmen (müsste :active sein glaube ich, ggf. mal die geläufigen durchprobieren).
      Wenn du dann einen dunklen Link hast kannst du ihn selber sowie seinen Hintergrund für die Klick-Dauer weiß machen... oder so.

      1. Hallo Henry

        Weißt du vielleicht auch, wie ich ihm sagen, dass er nicht nur den Link bzw. den container während des KLICKs weiß macht, sondern den ganzen Bildschirm?

        Du schriebst:

        Ich möchte, dass, wenn man auf die Startseite klickt, es scheint als würde es kurz blitzen, und dann auf die eigentliche Seite zu gelangen.

        Es befinden sich auf der Seite also keine sonstigen Links, sondern die gesamte Seite soll als Link fungieren.
        Dann lege den Link mittels position:absolute über die gesamte Seite.
        Das könnte so funktionieren:

        html, body {  
          margin:0;  
          padding:0;  
          height:100%;  
        }  
        a {  
         position: absolute;  
         top:0;  
         right:0;  
         bottom:0;  
         left:0;  
         height:100%;  
         width:100%;  
        }  
        a:active {  
         background-color: #fff;  
        }
        

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
      2. Danke!

        Weißt du vielleicht auch, wie ich ihm sagen, dass er nicht nur den Link bzw. den container während des KLICKs weiß macht, sondern den ganzen Bildschirm?

        Dafür weiß ich akut keine Lösung, allerdings dürfte das body-Element ebenfalls :active sein, wenn irgendein Link darin :active ist (denke ich zumindest, muss ich gleich mal ausprobieren).
        Also wenn man body:active entsprechend definiert sollte es eigentlich klappen.
        Alternativ könnte man auch innerhalb des Links einen unsichtbaren fix positionierten Kasten setzen, welchen man :active einblendet...
        Aber ich probiere das mal eben aus.

        So, ausprobiert, Variante1 geht, Variante2 nicht, weil irgendwie (zumindest bei mir in K-Meleon) der Link nicht mehr ausgeführt wird, vermutlich weil er vom <div> überlagert wird. Wie auch immer, hier meine Test-Seite:

        <html>  
        <head>  
        	<title>Foto-Effekt</title>  
         <style type="text/css">  
          body {  
           background-color:#000000;  
           color:#FFFFFF;  
          }  
          a {  
           color:#FFFFFF;  
          }  
          body:active {  
           background-color:#FFFFFF;  
          }  
          .unsichtbar {  
           display:none;  
           position:fixed;  
           background-color:#FFFFFF;  
           left:0;  
           top:0;  
           width:2000;  
           height:2000;  
          }  
          a.link2:active .unsichtbar {  
            display:block;  
          }  
         </style>  
        </head>  
        <body>  
          <ul>  
          <li><a class="link1" href="http://de.selfhtml.org">Link1</a></li>  
          <li><a class="link2" href="http://de.selfhtml.org"><div class="unsichtbar"></div>Link2</a></li>  
          </ul>  
        </body>  
        </html>  
        
        
        --
        sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(