onclick ohne echten Link

[slide]

Hallo,
ich habe eine kleine Bildergalerie in der ich Bilder mit Link habe.
<a href="#" onlick="showimg(img1)"><img.../></a>
Mit diesem wird eine Großansicht in einem DIV geöffnet.

Nun stört mich, dass bei einem klick darauf der Browser an den Anfang der Seite geschickt wird.
(Wird da eigentlich die Seite neu geladen, oder nur der Anzeigebereich nach oben gescrollt?)

Aber bei einem a ohne href fehlt der "Hand"-Mousecursor. Ich weiss auch nich ob das zulässig ist nach Standards.

Gibt es eine Möglichkeit, den Link so zu schreiben, dass die Position des Anzeigebereichs nicht geändert wird?

Und wenn nicht:
Ich kann ja das onclick attribut auch einfach in den <img> schreiben, da fehlt aber auch der "Hand"-Mauscursor. Wie füge ich den per onmouseover hinzu?

Oder gibt es eine viel einfachere Lösung an die ich nicht gedacht habe?
Es soll sich wie ein normaler Link verhalten, allerdings die Position so lassen wie es ist und einfach die JS-Funktion ausführen.

[molily]

<a href="#" onlick="showimg(img1)"><img.../></a>

Nun stört mich, dass bei einem klick darauf der Browser an den Anfang der Seite geschickt wird.

Das ist klar, solange du die Standardaktion nicht unterdrückst, wird erst der click-Handler ausgeführt und dann die URI im href-Attribut aufgerufen. Und # werten die Browser nunmal als Sprung zum Dokumentanfang.

Ich kann ja das onclick attribut auch einfach in den <img> schreiben, da fehlt aber auch der "Hand"-Mauscursor. Wie füge ich den per onmouseover hinzu?

Den fügst du per CSS hinzu: <http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm#cursor@title=cursor: pointer;>

Oder gibt es eine viel einfachere Lösung an die ich nicht gedacht habe?

Mit return false die Standardaktion unterdrücken:
onclick="bla(); return false;"

Wenn du das JavaScript auslagerst und den Event-Handler via JavaScript registrierst, dann notiere am Ende der Handler-Funktion return false.

Die Nutzung von a ist gar nicht so falsch, weil du im href-Attribut die Adresse des Großbildes angeben kannst und das Attribut dann im JavaScript auslesen kannst. Hier ein schönes Beispiel für eine zugängliche Galerie, die auch ohne JavaScript funktionieren kann:
https://forum.selfhtml.org/?t=183494&m=1215951

Mathias

[Patrick Andrieu]

Hallo molily!

Hier ein schönes Beispiel für eine zugängliche Galerie, die auch ohne JavaScript funktionieren kann:
https://forum.selfhtml.org/?t=183494&m=1215951

Vielen Dank für die Blumen weiter unten. Doch der JS-Code enthält eine Variable zu viel (var diff), die noch (ja, ich war etwas faul und habe meinen bereits existieren Code nur für Jürgen angepasst) aus dem Usprungscode stammt: http://www.atomic-eggs.com/roaster/20040228/index2.shtml. Dort wird »diff« für die Blätterfunktion gebraucht. Stört der Funktionalität des Beispiels für Jürgen nicht, ich erwähne es nur des Perfektionismus halber ;)

[2]

Nun »etwas« off-topic, weil es »sowas für das Forum« schon mal gab, und sich das Tabellen-Layout-in-CSS-neu-schreiben langsam zu meiner Spezialität [1] mausert (habe gerade noch eine Seite dieser ach so genialen »Web-Arbeitgeber« in Arbeit für die Liste), überlege ich mir, ob man das vielleicht in einem Artikel, vielleicht in der Art »so lieber nicht - aber besser so« zusammenfassen könnte.

[1] Wer das aufruft, sollte sich, wenn vorhanden, die Zeit nehmen, in den Erläuterungen zu lesen, was für Patzer sich diese »Profis der Usability« erlauben.

[2] Ein Artikel über die Kombination von JS für die Darstellung und Perl&SSI/PHP für das Auslesen der Verzeichnis und serverseitiges Schreiben der Thumbs-Verlinkungen wäre doch auch nicht schlecht oder? Hoffentlicht liest der Enginiör mit, ich finde seinen Thread mit Tom nicht mehr.

Viele Grüße aus Frankfurt/Main,
Patrick

[Patrick Andrieu]

Hallo molily!

Hier ein schönes Beispiel für eine zugängliche Galerie, die auch ohne JavaScript funktionieren kann:
https://forum.selfhtml.org/?t=183494&m=1215951

Ich habe das in der zweiten Fußnote meiner ersten Antwort an Dich nun realisiert: https://forum.selfhtml.org/?t=183494&m=1216457

Viele Grüße aus Frankfurt/Main,
Patrick

[Gunnar Bittersmann]

@@slide:

<a href="#" onlick="showimg(img1)"><img.../></a>

http://community.de.selfhtml.org/zitatesammlung/zitat350

Nun stört mich, dass bei einem klick darauf der Browser an den Anfang der Seite geschickt wird.

Ja, '<a href="#">' ist in den allermeisten Fällen völliger Unsinn.

Wenn es denn unbedingt ein 'a'-Element mit 'href'-Attribut sein soll, dessen Funktionalität nur mit JavaScript gegeben ist, dann bietet sich '<a href="javascript:;" onclick="showimg(img1)">' an.

Besser ist natürlich, im 'href'-Attribut steht ein Link, der ohne JavaScript angesprungen wird, wie molily schon sagte.

Wenn ohne JavaScript keine Funktionalität gewünscht sein sollte (warum auch immer?), ist das 'a'-Element eigentlich überflüssig: Das 'img'-Element kann auch den 'onclick'-Handler verpasst bekommen.

Live long and prosper,
Gunnar

[molily]

dann bietet sich '<a href="javascript:;" onclick="showimg(img1)">' an.

Das öffnet in älteren Gecko-Browsern die JavaScript-Konsole. Besser javascript:void(0).

Wenn ohne JavaScript keine Funktionalität gewünscht sein sollte (warum auch immer?), ist das 'a'-Element eigentlich überflüssig: Das 'img'-Element kann auch den 'onclick'-Handler verpasst bekommen.

Mit a-Element ist die Galerie auch mit Tastatur bedienbar.

Mathias

[suit]

Mit a-Element ist die Galerie auch mit Tastatur bedienbar.

Dann sollte aber ggf. hinter dem href-Attribut die Detailseite der Grafik (oder wie auch immer) verlinken, damit man ohne JavaScript nicht ganz so blöd dasteht.

[Gunnar Bittersmann]

@@suit:

»» Mit a-Element ist die Galerie auch mit Tastatur bedienbar.

Dann sollte aber ggf. hinter dem href-Attribut die Detailseite der Grafik (oder wie auch immer) verlinken, damit man ohne JavaScript nicht ganz so blöd dasteht.

Das sagte molily doch.

Live long and prosper,
Gunnar

[Dirk Dorweiler]

Hoi.

Wenn ohne JavaScript keine Funktionalität gewünscht sein sollte (warum auch immer?), ist das 'a'-Element eigentlich überflüssig: Das 'img'-Element kann auch den 'onclick'-Handler verpasst bekommen.

Argument Pro 'a': Wenn man (auch) im IE6 per CSS "hovern" möchte.

Grüße

[Gunnar Bittersmann]

@@Dirk Dorweiler:

»» Wenn ohne JavaScript keine Funktionalität gewünscht sein sollte (warum auch immer?), ist das 'a'-Element eigentlich überflüssig: Das 'img'-Element kann auch den 'onclick'-Handler verpasst bekommen.

Argument Pro 'a': Wenn man (auch) im IE6 per CSS "hovern" möchte.

Nö. Wenn die Funktionalität nur mit JavaScript zur Verfügung steht, dann sollte ohne JavaScript auch kein Hover-Effekt vorhanden sein. Und mit JavaScript geht’s ja dann auch im IE 6.

Das Argument von molily ist da stichhaltiger.

Live long and prosper,
Gunnar