"Popup" aus Klickfunktion a:active bauen?

[Hephaistos]

Hallo,

Leider weiß ich nicht genau, wie das heißt, wonach ich suche. Ich versuche mal es grundsätzlich zu erklären:

Ich habe auf meiner Homepage Textlinks, die mit a:hover ein kleines Feld erscheinen lassen, das den Link mit einer Farbe überdeckt und an seinerstatt ein Bild anzeigt. Jetzt will ich aber, dass dieses Bild zum Überdecken des Textes nicht bei einem hover, sondern nur bei einem Klick erscheint. Also habe ich einfach a:active benutzt. Wenn man jetzt klickt und hält, passiert genau das, was ich will; logischerweise verschwindet das Bild aber wieder, wenn ich die Maustaste loslasse und die Funktion kehrt wieder auf den Ausgangstextlink zurück. Wie verhindere ich das?

Beim ersten Klick soll das Bild erscheinen und dort bleiben, beim zweiten Klick soll es wieder verschwinden; so ähnlich wie ein kleines Popup, das innerhalb der Seite selbst funktioniert.

Das nächste Problem ist, dass wenn ich einen Link benutze, die jeweilige Seite komplett neugeladen wird, bzw also wieder nach oben scrollt, wenn ich kein Ziel definiere. Ich brauche kein Ziel, ich habe ja nur das Popup-Feld damit gesteuert. Am besten wäre es reinen Text, oder eben einen komplett ziellosen Link zu benutzen.

CSS

Code: Alles auswählen

#draufklick a .showcase {
display: none;
}

#draufklick a:active .showcase {
display: block;
background: #F2F2F2;
border: 3px solid #dddddd;
color: #000;
}


HTML

Code: Alles auswählen

<div id="draufklick">
    <a>Beschreibungstext
        <span class="showcase"><div class...(Bild wird eingefügt)></div>
        </span>
    </a>
</div>


Ich möchte ungern die Lösung wählen, die gesamte Seite jeweils neu zu gestalten, einmal mit offenem Popup und einmal mit geschlossenem und das jeweils mit echten Hyperlinks verbinden, da ich doch einige von diesen Feldern benutzen will und nicht gleich 10 Versionen meiner Startseite haben möchte.

Wie könnte ich soetwas realisieren? Mit einer if-Schleife, die zwischen "An" und "Aus" wechselt nach jedem Klick? Gibt es vielleicht eine ganz andere Funktion in CSS, die sich ein "Bereits-geklickt" merken kann bis zum nächsten Klick?

Vielen Dank und viele Grüße,
Hepha

[Hephaistos]

Edit: Wie ihr vielleicht schon gesehen habt, ist in meinem HTML Coder der Link nur mit <a>...</a> gestaltet. Ich kannte zwar bis jetzt nur echte Links mit "a href", allerdings behebt meine Version schonmal das Problems, der neuladens der Seite. Im Moment kann man über den Link einen hover setzen (ich lasse ihn unterstreichen) und wenn man klickt, wird die Seite NICHT neu geladen. Allerdings ändert sich der Cursor nicht in ein "Klick-Symbol" sondern in das "Text-Markierungs-Zeichen"; das soll aber das kleinste Problem sein.

[sejuma]

Sieh dir mal das an: http://www.ohne-css.gehts-gar.net/0071.php
Damit müssten sich zumindest Teile deiner Anforderungen lösen lassen.

[Hephaistos]

Danke für den Link! Ich habe es vorhin ausprobiert und ehrlich gesagt, passiert bei diesem Beispiel das gleiche wie bei meinem eigenen Code. Ich kann zwar die ganzen Bilder verstecken und auf Klick erscheinen lassen, jedoch nur wenn ich die Maustaste festhalte. In den Anmekrungen stand in dem Tutorial das wäre nur ein Problem bei bestimmten Versionen von Safari, Opera und noch einem browser, aber ich benutze Firefox, von daher wunder ich mich schon ein wenig. Ich kann auch nicht nachvollziehen, wo in dem Code für das Fotoalbum festgelegt ist, dass nach dem Klick das jeweilige Bild sichtbar bleiben soll und nicht zurückkehrt zu :hidden...