✔ Grafik - Links "dritteln"

[alter_Sack]

Hallo,

ich bin gerade dabei ein paar Photos auf unserer Webseite einzubinden.
"über" den Images hätte ich gerne die Navigationslinks gelegt.
Also z.B. im linken Drittel einen "zurück-Link", im mittleren Drittel den "Full-size-Link" und im rechten den "nächsten-Link".
Könnte man hier mit 3 div-Elementen arbeiten ?
Brauch ich hier transparente "Platzhalter" oder geht das auch ohne ?

Ich hab auch schon über ImageMaps nachgedacht,
http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm
aber da muss ich exakte Koordinaten angeben und bei wechselnden Bildgrössen, ist das auch nicht gerade das wahre.

Hat da jemand eine elegante Lösung für mich ?

Besten Dank schonmal im voraus.

 

[Layna]

Achtung, keine Garantie für komplette Richtigkeit da freihand-geschrieben :

<div>
<div>
<div class="drittel">Zurück</div>
<div class="drittel">FullSize</div>
<div class="drittel">Weiter</div>
</div>
<img ... />
</div>

.drittel {
width: 33%;
float: left;
}

Nicht getestet, aber Prinzipiell sollte es das tun was du willst .

 

[alter_Sack]

Hallo Larayna,

besten Dank schonmal.
Kannst du mir noch verraten, wie ich die Klasse .drittel jeweils als ganzes "klickbar" machen kann ?

 

[Layna]

In dem Fall kleine änderung (vorsicht, nicht alle Browser erkennen die gesammte breite an, in denen muss man dann noch immer genau den Text klicken!):

<div>
<div>
<a class="drittel">Zurück</a>
<a class="drittel">FullSize</a>
<a class="drittel">Weiter</a>
</div>
<img ... />
</div>

.drittel {
width: 33%;
 float: left;
}

Achtung: wieder nicht getestet! Es kann sein dass du dem .drittel noch ein position: oder display: mitgeben musst (muss damit selbst immer etwas experimentieren).
Sollte aber soweit gehen .

Ciao,
Larayna.

 

[alter_Sack]

Guten Morgen,

also ich hab jetzt einiges mit div-Elementen versucht, aber ich krieg es nicht gebacken.

Vielleicht hab ich das ganze auch nur falsch beschrieben und wir reden aneinander vorbei ...

Wenn man mit der Maus über eines der div-Elemente fährt, sollte "vor, full oder next" erscheinen.
Ich hab dies schon bei einigen Gallerys gesehen und jetzt wo ich es brauche finde ich es nicht mehr ...

Hier mal eine Skizze wie ich mir das vorstelle:

 

[Layna]

Moin Moin .
Ach soooooo, das ding soll erscheinen!
Na dann:
Ich hoffe ich ahbe dich jetzt richtig vertsanden dass du mit "über dem Bild" oben drüber wie höher auf dem bildschirm meintest.
In diesem Fall:

<div>
<div>
<span><a href="#" class="drittel">Ein Drittel</a></span> 
<span><a href="#" class="drittel">Ein Drittel</a></span> 
<span><a href="#" class="drittel">Ein Drittel</a></span>
</div>
</div>

span a.drittel, span a.drittel:link,  span a.drittel:visited {
width: 33%;
display: block;
float: left;
text-align: center;
color: Red;
height: 30px;
background-color: red;
}


span a.drittel:active, span a.drittel:focus, span a.drittel:hover {
	color: Black;
}

musst halt die Hintergrund- und Schriftfarbe des linkes gleich setzen bis jemand drauf klicken will.

 

[alter_Sack]

Hallo Larayna,

besten Dank für deine Hilfe. Aber leider wird das nix.

Mit "über dem Bild" meinte ich, dass die drei div's das Bild komplett überdecken.
Ich sitz jetzt schon 2 Tage über dem Dreck und krieg es nicht hin.
Mittlerweile hab ich ehrlich gesagt, auch keine Lust mehr weiter daran zu arbeiten.
Also lass es gut sein, ich werde die Links ober- oder unterhalb hinlegen und fertig.

Wie gesagt, besten Dank für deine Hilfe !

 

[d2wap]

Die PonyGallery für Joomla macht das genauso... schau dir doch mal deren Quellcode an.. ist allerdings mit JS geschrieben....
und ich empfehle fertige Lightboxes (google. lightbox)...

 

[alter_Sack]

Yeahaaaa,

und wenn du glaubst es geht nicht mehr, kommt von d2wap die Lightbox her ...

Scheint als ob ich mich doch nochmal aufraff ... Lightbox 2 wird's wohl werden !
http://www.huddletogether.com/projects/lightbox2/

Besten Dank !