Koppla piltangent att gå till en viss länk.

Avdelningen för webbrelaterad programmering och grafisk design.
Skriv svar
Dand
Inlägg: 52
Blev medlem: 2005-04-24 17:23:56
Ort: Småland/Stockholm

Koppla piltangent att gå till en viss länk.

Inlägg av Dand » 2011-10-27 21:30:31

Har sökt lite men inte hittat relevant info...

Det finns ju fotosidor med bildgallerier i form av slideshows där man kan stega fram och tillbaka mellan bilderna med piltangenterna på tangentbordet. Jag skulle vilja göra något liknande men kopplat till en vanlig hemsida (html med lite javascript). Vet inte om det över huvud taget är möjligt men det händer ofta att jag kommer till en bildsida och med ryggmärgsreflex trycker på en piltangent för att växla till nästa bild. Skulle vara skönt om det funkade. Nu händer ingenting - så kommandot skulle ju inte krocka med någon annan funktionalitet. Jag skulle "helt enkelt" vilja koppla höger- och vänsterpil till två utvalda länkar på sidan. Länkarna till nästa sida (nästa bild) och föregående sida.

Kan man?
Hur gör man / var hittar man exempel... ?

Skulle javascript funka? Man kan ju ha kommandon "on hover" och så men kan man koppla till tangentkommandon också?

Ni får ursäkta frågan om den är dum... Är inte så haj på det här... ;-)

Användarvisningsbild
Raspberry
Inlägg: 1808
Blev medlem: 2006-06-16 19:51:58

Re: Koppla piltangent att gå till en viss länk.

Inlägg av Raspberry » 2011-10-27 23:01:08

Vilken sida? Skulle gissa på något scripts för browsern, googla plugin/script + sidan + browser.
Win7 Ulti x64 | 22" Wide | E8400@3.0GHz | 4GB | HD4850 | Raptor 34GB; Spinpoint F3 1TB; My Book Essential 1TB; My Passport Essential 250 GB; Barracuda 750 GB

Dand
Inlägg: 52
Blev medlem: 2005-04-24 17:23:56
Ort: Småland/Stockholm

Re: Koppla piltangent att gå till en viss länk.

Inlägg av Dand » 2011-10-27 23:32:16

Åh, tack för snabbsvaret!!!
Men, missförstå mig rätt...
Jag syftar inte på att programera om min browser för att få kortkommandon till länkar på någon annans sida. Jag har funderingar på att på att bygga om en enkel (mycket enkel) hemsida med ett bildgalleri. Varje bild visas bara på en vanlig sida (inget flashigt för jag kan inget sådant alls) med länkar till tidigare och nästkommande bild. Men det skulle vara lite soft om länkarna var kopplade till besökarens piltangenter... Så att man enkelt kan gå framåt och bakåt mellan bilderna. Det finns ju naturligtvis coola bildgallerier (som jag inte begriper mig på) som fixar det här men jag skulle vilja göra det enklare för mig... Typ ett javascript som kopplar till tangentbordet ungefär som man kan ha ett som aktiverar länken när man håller musen över den (utan att klicka)...

Hoppas jag var tydligare nu!
;-)

Användarvisningsbild
Raspberry
Inlägg: 1808
Blev medlem: 2006-06-16 19:51:58

Re: Koppla piltangent att gå till en viss länk.

Inlägg av Raspberry » 2011-10-27 23:33:45

Första träffen på Google: http://stackoverflow.com/questions/2259 ... ous-next-p hoppas det fungerar.
Win7 Ulti x64 | 22" Wide | E8400@3.0GHz | 4GB | HD4850 | Raptor 34GB; Spinpoint F3 1TB; My Book Essential 1TB; My Passport Essential 250 GB; Barracuda 750 GB

Dand
Inlägg: 52
Blev medlem: 2005-04-24 17:23:56
Ort: Småland/Stockholm

Re: Koppla piltangent att gå till en viss länk.

Inlägg av Dand » 2011-10-28 3:45:18

Grymt!
Jag är på spåret. Borde bli bättre på att googla. Tack för tipset... Det hjälpte en hel del. Nu vet jag att det ska gå och jag har fått det att funka i Google Chrome med det sista skriptet på sidan:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>

<script type="text/javascript">
$(document).ready(function() {
document.onkeydown = function()
{
var j = event.keyIdentifier
if (j == "Right")
window.location = nextUrl
else if (j == "Left")
window.location = prevUrl
}
});

$(document).ready(function() {
var nextPage = $("#next_page_link")
var prevPage = $("#previous_page_link")
nextUrl = nextPage.attr("href")
prevUrl = prevPage.attr("href")
});

</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.google.com">Google</a>
<a id="next_page_link" href="http://www.yahoo.com">Yahoo</a>
</p>
</body>
</html>

De andra skripten begrep jag mig inte på tillräckligt bra för att få att funka. Jag testade det förslaget med "your stuff here" men med det stuffet som han hade på sidan funkade det inte alls för mig.

function leftArrowPressed() {
// Your stuff here
}

function rightArrowPressed() {
// Your stuff here
}

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
}
};

Och med your stuff syftade han väl på detta:

<script type="text/javascript">
/* KEYNAV */
document.onkeydown = function(e) {
if (! e) var e = window.event;
var code = e.charCode ? e.charCode : e.keyCode;
if (! e.shiftKey && ! e.ctrlKey && ! e.altKey && ! e.metaKey) {
if (code == Event.KEY_LEFT) {
if ($('previous_page_link')) location.href = $('previous_page_link').href;
} else if (code == Event.KEY_RIGHT) {
if ($('next_page_link')) location.href = $('next_page_link').href;}
}
});
</script>

Försökte knåpa om i koden och dela upp det i vänster- och högerskript men det gav inget. Är inte så haj på det här helt enkelt...

Men som sagt i Chrome funkar det nu och jag har lärt mig lite mer och i alla fall fått grepp om att det bör gå att få till i andra webbläsare också. Jag få väl testa mig fram. Och det har ju blivit lite lättare att söka nu när jag vet ungefär vad jag ska söka efter.

TACK!

Dand
Inlägg: 52
Blev medlem: 2005-04-24 17:23:56
Ort: Småland/Stockholm

Re: Koppla piltangent att gå till en viss länk.

Inlägg av Dand » 2011-10-28 4:10:53

En sak är säker: Grymt skönt att ha tangentbordskontroll!

Man blir bortskämd ganska snabbt känner jag.

Nu vill jag kunna koppla fler tangenter till olika länkar... Men jag måste få grepp om hur man bygger för fler webbläsare än bara Chrome...

Skriv svar