<area shape>

[irato]

Hallo zusammen,

ich möchte bei einer Dia-Show keine Navigationselemente über dem Bild einblenden, stattdessen möchte ich per <area shape> verschiedene Bereiche des Bildes zur Steuerung verwenden.
So weit so gut.
Jetzt gibt es leider auch sehr kleine Bilder und da wird das zu fummelig.
Ich möchte also den gesamten Anzeigebereich in verschiedene Areas aufteilen, unabhängig von der Bildgröße.

I.wie komme ich da nicht weiter.
JavaScript scheint auch keine Lösung zu sein!

Eigentlich müsste es doch via css funktionieren, indem verschiedene prozentual aufgeteilte DIVs klickbar gemacht werden...

Jemand einen Gedankenanstoß, Lösung oder Tipp?

So long!

[Gunnar Bittersmann]

@@irato:

nuqneH

Ich möchte also den gesamten Anzeigebereich in verschiedene Areas aufteilen

Die da wären?

unabhängig von der Bildgröße.

Das heißt, sie clickbaren Bereiche sollen (in Pixel) immer gleich groß sein? Wo sollen sie positioniert sein?

Qapla'

[irato]

@Qapla'

verschiedene rechteckige Areas für :

• Home
• Bild vor
• Bild zurück
• Ordner weiter...

Das heißt, sie clickbaren Bereiche sollen (in Pixel) immer gleich groß sein?

Relativ ja, absolut nein.
Prozentual abhängig von der Anzeigefläche -jeweils abhängig von der Größe des Browserfensters.

Wo sollen sie positioniert sein?

Die Anzeigefläche in 6 gleichgoße Rechtecke aufteilen, mit Sicherheitsabständen.

Oberes Linkes Sechstel = Home
Mittleres Linkes Sechstel = Bild zurück
etc.

So long!

[irato]

Sorry!
eine Dusche am Abend und schon war ich wieder locker:

css:
.click_a {
position:fixed;
z-index:20;
left: 0px;
top: 0px;
width:50%;
height:33%;
}

html
<div class="click_a" id="click_a">
<a href="dia.php" title="Click A"><img src="_img/clear.gif" ></a>
</div>

wobei das gif ziemlich groß und transparent ist.

Sorry für die Umstände, vlt. nützt es ja jemand!

So long!

[irato]

Sorry!

kleine Änderung, das mit dem großen transparenten GIF haut nicht hin, da es auch außerhalb des DIV-Containers klickbar ist.

Der css-Teil bleibt wie gehabt:

.click_a {
position:fixed;
z-index:20;
left: 0px;
top: 0px;
width:50%;
height:33%;
}

Der html-Teil muss wie folgt lauten:

<a href="nextpic.php" title="Click A"><div class="click_a" id="click_a"></div></a>
so ist der sich automatisch an das Ausgabefenster anpassende Bereich, als Link anklickbar.

Sorry für die erneuten Umstände, aber wenn, dann soll es auch funzen :)

So long!