Die 4-Wege Navigation (also das navigieren im Widget ohne den virtuellen Cursor) kann im Widget so funktionieren:
Die Runtime springt von Link zu Link je nachdem in welche Richtung der User auf dem Joypad des Handys klickt. Man kann sich das wie einen unsichtbaren Mauszeiger vorstellen, der dann auf die jeweiligen Navigationselemente fokussiert.
Interessanterweise springt der unsichtbare Zeiger aber auch auf -Tags.
Folgendes Beispiel:
... < img src="einbild.png"> < a id="quitbutton">Quit ...
Dann müsste der User 2mal auf seinem Joypad nach unten klicken bis der Anchor-Tag aktiviert wird und der Zustand “hover” gesetzt wird. Der unsichtbare Mauszeiger springt erst zu dem Bild, dieses hat keinen “hover”-Zustand also sieht man keine Veränderung, erst beim nächsten Klick sieht man, dass überhaupt etwas beim Klicken passiert.
Das ist nervig und umgehen kann man das, indem man die Bilder z.B. als Div mit einem background-image anzeigt. Dann wird im Beispiel oben das Bild nicht angesprungen, sondern direkt der Link, was dem Handybenutzer auch logischer erscheinen wird.
#einbild_container{
background-image: url(einbild.png);
width: bildbreite;
height: bildhöhe;
background-repeat: no-repeat;
}
< div id="einbild_container">
< a id="quitbutton">Quit