onclick onkeypress Header verlinken

Bueltge.de brachte mich auf eine gute Idee.
Das Header Bild ist war auch bei mir noch nicht mit der URL von webdesign-in.de verlinkt.
Gerade dies erleichtert aber auch vielen Usern sich zurecht zu finden.

Nutzt man nur onclick, hat jeder Internetuser, der die Tastatur nutzt Probleme. Onkeypress gehört zu Onclick wie ein siamesischer Zwilling zum anderen.
Die Lösung ist einfach, statt:

<div id="header">
 <div id="headerimg" onclick="location.href='http://website.domain/';" style="cursor: pointer;">
  <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?><?php bloginfo('name'); ?></a></h1>
  <!-- <div class="description"><?php bloginfo('description'); ?></div> -->
 </div>
</div>

edit: Frank machte mich darauf aufmerksam, dass ich beim Link den Blogtitel vergessen hatte. Dieser ist jetzt ebenfalls bei meinem CodeSchnipsel mit dabei. Danke Frank.
nimm:


<div id="header">
 <div id="headerimg" onclick="location.href='<?php bloginfo('url'); ?>';" onkeypress="location.href='<?php bloginfo('url'); ?>';">

<h1><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"></a></h1>

<!-- <div class="description"><?php bloginfo('description'); ?></div> -->
 </div>
</div>

Öffne Deine style.css und schreibe dort irgendwo hinein:

#headerimg{cursor:pointer;}

Onclick hilft der Maus.
Onkeypress hilft der Tastatur.
Cursor Pointer in der style.css ergibt aufgeräumteren Code 😉

Und wesentlich mehr Internetuser erfreuen sich an Deinem verlinkten Headerbild, weil es somit eher barrierefrei und usability ist.

mts

Ebenfalls informativ und lesenswert

21 Kommentare zu “onclick onkeypress Header verlinken

  1. Pingback: bueltge.de

  2. Frank

    Hallo,

    danke für den Hinweis. Ich denke, dass dir da ein kleiner Fehler unterlaufen ist. Du hast bloginfo(’name‘); in den title gesetzt, was sicher sinnvoll ist, aber so fällt der Text im Header weg. Deswegen sollte er sicher noch in deinem Codeschnippsel hinzugefügt werden:

    <?php bloginfo('name'); ?>

    LG Frank

  3. mts

    Hi Frank
    wir beide zusammen sind ein gutes Team -wage ich zu behaupten.

    Da ich den Titel woanders anzeige und nicht beim Bild habe ich den Code einfach aus meiner header.php kopiert und nicht mehr daran gedacht.

    Danke für den Hinweis.
    :)
    ich kopier dies gleich dazu.

    (wieso code in den Kommentaren nicht angezeigt wird, ist mir ein Rätsel, verboten habe ich es nicht, so änderte ich dies auf pre in Deinem .)

    lG

  4. Frank

    Das sehe ich genauso – ein Team.
    Genau das ist es, was ich am I-net liebe.

    Das Problem mit „Code“ kenne ich, hatte ich auch schon bei einigen Kommentaren.

    LG Frank

  5. Fritz

    Hi,

    ja zu onclick + onkeypress + pointer.
    Aber _so_ ist das nicht barrierefrei. Javascript Links sind nicht BF, mit ausgeschaltetem JS sehe ich zwar den hand cursor, aber beim Anklicken tut sich nichts.
    Ein Javascript Link sollte IMHO immer eine fallback Lösung beinhalten.
    Ich weiß, mit einem background image ist das kaum zu schaffen. Aber warum ein bg img? warum nicht einfach ein verlinktes img mit entsprechendem alt Attribut. Das wäre BF.

    Gruß Fritz

  6. mts

    Fritz Hi,
    ich habe nachgesehen,
    mein Zähler zeigt rechts nur die Uniquebesucher an, also jede IP wird in 24 Std nur einmal gezählt, im Hintergrund liefert er mir mehr INFO…

    ganze 13 Leute von knappe 18000 user auf webdesign-in.de hatten in den letzten Monaten JavaScript deaktiviert.

    die kann ich doch nicht vor den Kopf stoßen…

    ich suche intensivst nach neuen Studien wieviele Internetuser tatsächlich noch ohne JS aktiviert zu haben surfen.

    denn geh ich nach den Ergebnissen von webdesign-in.de, dann sind diese „ohne JS aktiviert zu haben user“ WebDesigner, die ihre Arbeit kontrollieren….

    wenn ich jedoch onclick verwende muss man laut Vorgabe onkeypress und Cursor Pointer verwenden.

    es gibt offenbar Menschen , die völlig an der Realtität vorbei Standards entwerfen, nach denen wir gemessen werden.

    Kollegen raten, mit onkeypress zu validieren , nachher wieder rauszunehmen,
    ist das *Zukunft?*

    edit:Nachtrag
    das Logo ist nicht im Quelltext verlinkt,
    ;);)

    lg

  7. Fritz

    Hi,


    ist das nicht das Logo, das Du mal mit onkeypress ausgestattet hattest? Und jetzt meinem Vorschlag folgend einfach als verlinktes img?

    Und zu den Statistiken hab ich so meine eigene Meinung (sehr ähnlich dem „trau keiner Statistik, die Du nicht selbst gefälscht hast“):
    Wie misst Du denn, ob Deine Besucher ohne Javascript daherkommen? Wie zuverlässig ist diese Messung?
    und:
    Wer aufgrund von Barrieren nicht auf meine Seiten kann, wird auch in der Statistik nicht auftauchen.
    Eine Schlußfolgerung wie: „nur 0,01% meiner Besucher benutzen den Browser xy“ ist dann schnell ins eigene Knie geschossen.

    > Kollegen raten, mit onkeypress zu validieren , nachher wieder rauszunehmen,
    ??? warum den das? was spricht denn gegen onkeypress? natürlich nur i.V.m. onclick (und letzteres wieder i.V.m. einem html fallback)

    Kollegiale Grüße
    Fritz

  8. mts

    schrieb ich auch schon beim anderen Kommentar, webdesign-in.de ist auch mit abgeschaltetem JavaScript nutzbar, insofern ist dies hier keine Barriere, insofern weiß ich wer es abgeschaltet hat und wer nicht,
    und diese Messung ist sehr genau 😉

    Onkeypress und Mozilla

    da kannst Du html Schleife noscript drin haben wie Du magst,
    😉

    und da kam ich auch erst später drauf,….
    :( leider

    lg

  9. Fritz

    [und diese Messung ist sehr genau ;)]
    verräts Du mir, wie Du misst?

    [Onkeypress und Mozilla]
    dort steht:
    „Mozilla zum Beispiel startet die Aktion, wenn man die Tabulator Taste betätigt“
    nicht alles, war irgendwo steht, muß auch richtig sein. Ich verlaß mich da lieber auf eigene Tests. Und die widerlegen diese Aussage.
    Das Thema wurde übrigens ausfühlichst in der WAIDE Liste (leider geschlossen) behandelt. Fazit dort:
    onclick und onkeypress gehören zusammen.
    und ebenso wichtig: nie (NIE) auf onclick verlassen, sondern immer einen Standard-html-link als fallback bei nicht verfügbarem Javascript.

    Gruß Fritz

  10. mts

    naja mein Mozilla startete auch die Aktion , wenn ich die Tab Taste drückte,
    das ist es ja,

    je nachdem wer was wie dort eingestellt dürfte es gehen oder nicht,

    einerseits meinst Du und viele andere auch, es gäbe soviele User, die JS nicht nutzten, gleichzeitig stellst Du meine Messungen infrage..
    also einmal gelten Messungen einmal nicht?

    😉

    lg

  11. Fritz

    Hi,

    [naja mein Mozilla startete auch die Aktion , wenn ich die Tab Taste drückte]
    hast Du mal ein Codebeispiel, oder eine Adresse für dieses Verhalten. Ich würde gerne versuchen, das nachzuvollziehen.

    [einerseits meinst Du und viele andere auch, es gäbe soviele User, die JS nicht nutzten,]

    das hab ich nicht gesagt, und das meine ich auch nicht.

    [ gleichzeitig stellst Du meine Messungen infrage..]

    Nein, ich stelle Deine Messungen NICHT in Frage!
    Ich kenne sie ja nicht.
    Aber um zu beurteilen, WAS Du da misst, und um mir ein Urteil zu bilden, müsste ich zuerst wissen, WIE Du misst.
    Ich wiederhole deshalb meine Bitte:
    Verrate mir bitte, WIE Du den Anteile der Seitenbesucher ohne/mit deaktiviertem Javascript feststellst.

    mit kollegialen Grüßen
    Fritz

  12. mts

    Hi das liefert mir mein Counter in seiner Statistik, genauso wie er mir die Betriebssysteme und die Bildschirmauflösungen liefert.

    nächtliche Grüße

  13. Fritz

    Hi mts,
    [das liefert mir mein Counter in seiner Statistik]
    und WIE stellt der counter das fest?
    Auf die Gefahr, daß ich mich wiederhole:
    (ich) glaube keiner Statistik, die ich nicht selbst gefälscht habe.

    Also meine Glaskugel sagt mir folgendes:
    1. Der counter ist selbst ein Javascript.
    Frage:
    Wie will ein Javascript feststellen, ob Besucher ohne/mit deaktiviertem Javascript Deine Seiten besuchen.
    2. Der counter kennt den Unterschied zwischen Java und Javascript nicht. Er sucht nämlich nach
    java = navigator.javaEnabled();

    Aber ich kann mich da natürlich täuschen (nach einigen Gläschen vorzüglichen Rotweins).

    Gute Nacht
    Fritz

  14. mts

    ok
    diese Messungen täuschen sich, [nehmen wir mal an]

    wie weiß man dann, dass überhaupt jemand ohne js surft?

    edit:ich sah nach: knappe 11% haben Java deaktiviert,
    also der Counter liefert Werte für Java und Javascript extra.

    lg

  15. Michael Lendvay

    Sacht mal,

    wenn ich KEIN onclick oder onkeypressed brauche sondern die Aktion standardmässig immer laufen lassen will, was nehme ich denn dann?

    Bsp.: Breite 770px

    ich will nun das permanent auf ’no4′ haben. Doch irgenwie bin ich dazu zu wenig im HTML drin. Habt ihr ne Lösung für mich?

    Danke

    Micha

  16. Pingback: Gabis BLOGhaeuschen

  17. Pingback: WP - Headerbild verlinken - bueltge.de [by:ltge.de]

  18. Frei-Gen'er

    Auch wenn dein Tipp schon älter ist – er funktioniert immer noch sehr gut :)

    Danke dir daher für die ausführliche Beschreibung (brauchte es auch noch um ein „DIV zu verlinken“, wo du dich ja in einem anderen Post gewundert hattest wer sowas bei Bing (ja, ich habe Google verlassen) sucht xD).

  19. Best

    Super, danke für den Tipp danach habe ich gesucht und es funktioniert einwandfrei wie hier Beschrieben.