Image-Map und Lightbox2

[thuemmy]

Hallo Forum,

zur Zeit versuche ich für einen Kleingartenverein einen Übersichtsplan mit freien Kleingärten zu erstellen. Meine erste Idee, die ich schon umgesetzt habe, ist ein Image-Map. Beim Klick auf einen freien Garten soll dann in Lightbox2 ein Bild gezeigt werden. Das Problem ist natürlich, dass ich ja im area-Tag das rel-Attribut setzen muss und dieses Attribut erzeugt im Validator natürlich einen Fehler.

Dass ich den Fehler mit dieser Art der Umsetzung nicht wegbekomme ist mir klar, aber gibt es vielleicht einen komplett anderen Ansatz oder gibt es vielleicht einen Lighbox-Clone, der ohne das rel-Attribut auskommt (was ich mir aber nicht vorstellen kann)?

Das hier ist der erste Ansatz: Freie Gärten Wer das validiert, der erste Fehler ist vom Hoster verursacht, nur der zweite gehört mir :-?

Gruß thuemmy

 

[threadi]

Man könnte das Attribut per JavaScript setzen. Das müsste per onload geschehen und erst danach dürften die Lightbox-Funktionen starten um das Attribut zu suchen und den Link entsprechend anzupassen.

 

[thuemmy]

Hallo threadi,

danke für die schnelle Antwort. Jetzt hast Du mich voll auf dem falschen Fuß erwischt, denn JavaScript gehört nicht zu den Dingen, wovon ich wirklich Ahnung habe, oder anders gesagt, keine Ahnung.

Wenn ich das richtig verstehe, dann meinst Du das onload-Ereignis der Seite? Aber dann würde es ja beim Validieren trotzdem mit an den Validator ausgeliefert werden. Oder habe ich jetzt das ganze total falsch verstanden?

Gruß thuemmy

 

[threadi]

Nein, per JavaScript gesetzte/eingefügte Elemente und Attribute sieht der HTML-Validator nicht da der HTML-Validator kein JavaScript ausführt.

Und ja, ich meinte den onload-Eventhandler.

 

[Sempervivum]

Du könntest auch eine Lightbox mit Javascript-API verwenden und das Fenster mit Javascript öffnen. Z. B. Slimbox2, siehe hier:
jQueryAPI - slimbox - Calling Slimbox 2 functions from Javascript - The ultimate lightweight Lightbox clone - Google Project Hosting
Würde dann so aussehen:

<area onclick='jQuery.slimbox("url_des_bildes");'

Viel Erfolg und viele Grüße - Ulrich

 

[thuemmy]

Hallo threadi,

vielen Dank für die Antwort. Werde mir mal überlegen, ob ich das so mache, weil der Fehler wird zwar nicht mehr ausgeliefert, dafür generiert ihn dann der Client.

Gruß thuemmy

 

[thuemmy]

Hallo Sempervivum,

das was Du schreibst hört sich gut an. Werde ich gleich mal nachgucken. Wäre auf jeden Fall die sauberere Lösung.

Gruß thuemmy

 

[thuemmy]

So, ich habe jetzt mal die Lösung von Sempervivum umgesetzt und es funktioniert wunderbar, zumindest im FF und Chrome, im IE8 klappt es leider nicht. Da mir die JavaScript-Kenntnisse total fehlen, um das Script eventuell zu fixen, werde ich mich mal an den Lösungsvorschlag von threadi ranmachen.

Hier die Lösung mit Slimbox: http://gartentest.ohost.de/gartenfrei/gartenfrei-slimbox.htm

Gruß thuemmy

 

[Sempervivum]

Der Link geht nicht: "Die Verbindung zum Server wurde zurückgesetzt, während die Seite geladen wurde.".
Komisch, bei mir geht's einwandfrei im IE8. Hast Du auch Slimbox 2 verwendet?
Slimbox 2, the ultimate lightweight Lightbox clone for jQuery · digitalia.be

Slimbox 1.8 scheint tatsächlich nicht zu funktionieren mit IE8, wie man sieht, wenn man diese Seite probiert:
Slimbox 1.8 for MooTools 1.3 Demo

 

[thuemmy]

Moin Sempervirum,

dass der Link bei Dir nicht funktioniert ist komisch, bei mir funktioniert er. Hat mich beim Schreiben aber schon gewundert, dass der Link nicht "umgesetzt" wurde. Hier jetzt nochmal der Link, in der Hoffnung, dass er jetzt funktioniert: Freie Gärten . Weiterhin komisch ist, dass bei mir die Slimbox 1.8 Demo mit dem IE8 funktioniert.

Was ich herrausgefunden habe ist aber folgendes. Wenn ich die Seite nach dem Aufruf im IE8 aktuallisiere funktioniert alles so, wie es soll. Das liegt vermutlich daran, dass ich im FF einen Werbeblocker installiert habe im IE8 nicht und beim ersten Aufruf wird ein, vom Hoster eingebundenes, Werbescript eingeblendet, beim Aktuallisieren wird die Werbung nicht mehr eingeblendet und die slimbox arbeitet anstandslos. Ich vermute, dass es eventuell daran liegt, dass das Werbescript einen Schuss hat.

Gegenüber meiner gestrigen Behauptung mit dem Chrome; der verhält sich genauso wie der IE8.

Werde mich heute nachmittag nochmal ranmachen.

Vielen Dank schonmal an dieser Stelle für Eure Hilfe
Gruß thuemmy

 

[thuemmy]

So, ich habe das gestern mal mit xampp lokal getestet im IE und Chrome funktioniert das einwandfrei.

Danke nochmal für die Hilfe.

Gruß thuemmy