Unsichtbare Links

sir.hacks.alot

Aktives Mitglied
Thread Starter
Dabei seit
10.03.2005
Beiträge
2.408
Reaktionspunkte
115
Hallo,

ich erstelle gerade eine Galerie mit Lightbox2. für jedes Bild das in der Lightbox Slideshow erscheinen soll muss ich einen Link angeben:
Code:
<a href="meinbild.jpg" rel="lightbox[group]"><img src="thumbnail.jpg"></a>"
Nun möchte ich mehr Bilder in der Slideshow haben als ich Thumbnails auf der Seite anzeige. Dafür wäre es natürlich praktisch, wenn ich einfach am Ende der Seite einen Stapel unsichtbare Links einfügen könnte, die auch keinerlei Platz wegnehmen und nicht klickbar sind.
Ist das mit CSS irgendwie möglich einen Link derart zu gestalten?
 
Link einfügen, eine neue Klasse zuweisen.
Im CSS die Klasse wie folgt definieren:
Code:
    position: absolute;
    left: -9999em;
    width: 1em;
    overflow: hidden;

Dann ist der Link bei normalen Browser nicht sichtbar, weil außerhalb des sichtbaren Bereichs. Für Screenreader aber noch lesbar, was bei
Code:
visibility: hidden;
und
Code:
display: none;
nicht der Fall ist.
 
  • Gefällt mir
Reaktionen: sir.hacks.alot
Danke das tuts.
Aber warum funktioniert das so? Ich bin noch nicht so hundertprozentig in CSS eingearbeitet und will natürlich auch alles verstehen was ich in meiner Styledatei stehen habe.
 
Also die Position ist absolut zum Browserfenster gesetzt.
Dabei ist der Abstand nach Links bei -9999em was weit außerhalb des linken Fensterrandes liegt (ist ja auch logisch).
Die Breite des Links ist 1em (damit er bei seeeeehr langen Linktexten nicht länger als 9999em werden kann).
Der Overflow wird auf hidden gesetzt, damit wird jegliches Scrollverhalten verhindert.

Die Optionen mit visibility und display würden bei dir auch funktionieren, nur wie ich bereits schrieb ist das ergonomisch betrachtet schlecht für Nutzer mit Screenreadern.
 
Ich glaub eigentlich, dass Nutzer von Screenreadern generell nicht soo sehr an JPGs interessiert sind…
 
Wenn man schon Display None macht braucht man die Positionierung auch nicht mehr das könnte bei Druckern übrigens für Probleme sorgen
 
Code:
<a href="meinbild.jpg" rel="lightbox[group]"><img src="thumbnail.jpg" /></a>
<a href="meinbild_2.jpg" rel="lightbox[group]"></a>
<a href="meinbild_drei.jpg" rel="lightbox[group]"></a>
<a href="meinbild_zweiundvierzig.jpg" rel="lightbox[group]"></a>

Unsichtbar und funktioniert. Ganz ohne CSS ;)
 
Zurück
Oben Unten