met toets naar een andere pagina.

Status
Niet open voor verdere reacties.
H

hahaHans

Gebruiker
Lid geworden
24 jan 2006
Berichten
46
Ik heb een HTML pagina met een heleboel kleine foto's. Elke foto is aanklikbaar en gaat dan naar een HTML pagina met de vergroting. Als ik op die vergroting klik dan ga ik terug naar de pagina met kleine foto's.
Het is nu de bedoeling dat, als ik op een pagina met een grote foto ben, ik met de -> pijltjestoets naar de volgende pagina ga en met de <- pijltjestoets naar de vorige pagina.

Dus de vraag in het kort: Hoe ga ik naar een bepaalde pagina na het indrukken van een bepaalde toets?
 
Bedoel je dat je dan naar de pagina gaat met de volgende vergroting?
Waarom gebruik je niet een eenvoudig javascript, zodat je alleen de volgende foto ziet, en je geen volledige pagina moet maken en laden?
Heb dat hier, mits kleine aanpassing aan jouw wensen, kant en klaar staan.

Greetz : Jer:cool:en.
 
JeroenE zei:
Bedoel je dat je dan naar de pagina gaat met de volgende vergroting?
Waarom gebruik je niet een eenvoudig javascript, zodat je alleen de volgende foto ziet, en je geen volledige pagina moet maken en laden?
Heb dat hier, mits kleine aanpassing aan jouw wensen, kant en klaar staan.

Greetz : Jer:cool:en.
Klik om te vergroten...
 
Wat wil je meer weten over mijn eerste reactie op jouw vraag? :)

Greetz : Jer:cool:en.
 
Laatst bewerkt:
dank je JeroenE

Hoi JeroenE,

Dank je voor je hulp. Ik weet nog niet of het zal werken want het kost me wat meer tijd om dat te testen dan ik nu beschikbaar heb.
Ik had op het web al wel een andere gedeeltelijke oplossing gevonden. Hieronder staat de code van een pagina die een grote foto laat zien en door middel van een scriptje door het indrukken van een , of een . naar de vorige of de volgende gaat. Helaas werkt dat alleen in IE explorer en niet in Firefox.
Ik ga zeker uitproberen of jouw methode voor mij werkt. Je beschrijving klinkt goed.Ik zal het via dit forum laten weten zogauw ik iets heb. In ieder geval bedankt zover.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jaar 2, kwartaal 2, begin fotograferen.</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<link href="../../../stijl.css" type="../../../text/css" rel="stylesheet">
</head>
<body>
<center><a href="../../../22tek_fot.htm#foto1"><img src="9005.jpg" border="0"></a></center>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var key = new Array();
key[','] = "9006.htm";
key['.'] = "9010.htm";
function getKey(keyStroke) {
isNetscape=(document.layers);
eventChooser = (isNetscape)? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
for (var i in key) if (which == i) window.location = key;
}
document.onkeypress = getKey;
// End -->
</script>

</body>
</html>
 
Wat browserdetectie betreft, ben ik niet gevorderd genoeg met javascript, al heb ik het vorige script, met wat moeite, zelf kunnen schrijven.
Er is hier echter iemand op helpmij.nl die je perfect zal kunnen helpen met het script dat je hierboven meegaf, en die persoon is Egel.
Hij is hier een expert in, en ik heb al heel veel van hem geleerd.

Alles wat in vorige bijlagen achter // staat is uitleg wat je kan doen om het script aan te passen. Je kan die uitleg nadien gewoon verwijderen.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
:rolleyes::o:)

Met keystroke had ik nog nooit gewerkt maar het lijkt me zeker wel eens handig om te gebruiken. Je leert een hoop op het helpmij forum!

Met isNetscape = (!document.all); werkt het script ook met Firefox.

Maar het is beter om niet zozeer op browser te testen maar op de functies of objecten die je ook echt gebruikt. Als een browser die ondersteund dan werkt het ook.
Code: 
<script language="JavaScript">
 <!--

  var key = new Array();
  key[','] = '9006.htm'; key['<'] = key[','];
  key['.'] = '9010.htm'; key['>'] = key['.'];

  function getKey(keyStroke) {
   if (typeof(event) == 'object') {
    eventChooser = event.keyCode;
    } else if (typeof(keyStroke) == 'object') {
    eventChooser = keyStroke.which;
    } else {
    eventChooser = 0;
    };
   which = String.fromCharCode(eventChooser).toLowerCase();
   if (typeof(key[which]) == 'string') window.location.href = key[which];
   };

  document.onkeypress = getKey;

 // -->
</script>
Alleen dan heb je wel aparte pagina's voor elke grote foto. Het lijkt me handiger om 1 fotopagina te maken waar alle grote fotonamen in een Array staan en waar je naartoe linked met foto.html?0 foto.html?1 enz.. Met de , en . toets vervang je dan alleen de foto door de vorige of volgende in de reeks.

Ik maak wel even een werkende versie... .

Heb je een link naar waar je pagina op internet staat? Dat werkt altijd makkelijker.


Vr.Gr. Egel.
 
Laatst bewerkt:
Hiermee kun je 1 html gebruiken voor alle grote foto's:
Code: 
var key = new Array();
key[','] = -1; key['<'] = key[','];
key['.'] = +1; key['>'] = key['.'];

var photo = new Array(
9006,
9005,
9008,
9010,
9012,
9014,
'');

var max = photo.length - 2;
var nr = 0;

function show(x) {
 nr += x;
 if (nr < 0) nr = max;
 if (nr > max) nr = 0;
 document.thePhoto.src = '../../../' + photo[nr] + '.jpg';
 };

function firstPhoto() {
 var ls = unescape(location.search).replace(/\?/g,'');
 for (var i = 0; i < max; i++) if (ls == photo[i]) nr = i;
 show(0);
 };

function getKey(keyStroke) {
 if (typeof(event) == 'object') {
  eventChooser = event.keyCode;
  } else if (typeof(keyStroke) == 'object') {
  eventChooser = keyStroke.which;
  } else {
  eventChooser = 0;
  };
 var which = String.fromCharCode(eventChooser).toLowerCase();
 if (typeof(key[which]) == 'number') show(key[which]);
 };

document.onkeypress = getKey;
Zie bijlage.

Je linked er naartoe met: foto.html?9005

Alle grote foto's staan in de Array photo:
var photo = new Array(
9006,
9005,
9008,
9010,
9012,
9014,
'');

Als de fotonaam geen nummer is moet het tussen hoge komma's: 'naam',


Vr.Gr. Egel.
 

Bijlagen

mijn probleem is veel meer dan alleen opgelost.

Beste Egel,

Ik ben heel blij met je hulp. Het is met je script die meerdere foto's vanuit een html file laat zien precies mogelijk om te doen wat ik wilde op een veel gemakkelijkere manier dan ik voor mogelijk had gehouden. Ik zal dit zeker veel gaan gebruiken. In eerste instantie had ik dit nodig voor mijn portfolio, een opsomming van al mijn werk dat ik op een DVD wil presenteren en was het niet de bedoeling om dit op internet te gaan zetten. Maar ik ga dit ergens in de toekomst ook op mijn website www.hhdesign.nl toepassen.
Een klein vraagje misschien nog: is het mogelijk om de pijltjestoetsen te gebruiken voor de navigatie in plaats van de punt en de komma? Ik heb het geprobeerd met &lt; en &lt en '&lt;' maar op die manier lukte het me niet.

Nogmaals, Egel en JeroenE, hartstikke bedankt voor jullie hulp.
 
hahaHans zei:
Een klein vraagje misschien nog: is het mogelijk om de pijltjestoetsen te gebruiken voor de navigatie in plaats van de punt en de komma?
Klik om te vergroten...
Ja: :)
Code: 
var photo = new Array(
 9006,
 9005,
 9008,
 9010,
 9012,
 9014,
 '');

var max = photo.length - 2;
var nr = 0;

function show(x) {
 nr += x;
 if (nr < 0) nr = max;
 if (nr > max) nr = 0;
 document.thePhoto.src = '../../../' + photo[nr] + '.jpg';
 document.thePhoto.title = 'Foto: ' + photo[nr] + ' \nKlik voor het overzicht';
 };

function firstPhoto() {
 var ls = unescape(location.search).replace(/\?/g,'');
 for (var i = 0; i < max; i++) if (ls == photo[i]) nr = i;
 show(0);
 };

function getKey(keyStroke) {
 var keyNr = 0;
 if (typeof(event) == 'object') {
  keyNr = event.keyCode;
  } else if (typeof(keyStroke) == 'object') {
  keyNr = keyStroke.which;
  };
 switch(keyNr) {
  case 37: show(-1); break;
  case 38: history.back(); break;
  case 39: show(+1); break;
  case 40: break;
  };
 };

document.onkeydown = getKey;
Zie bijlage. Met de omhoog cursur ga je nu terug gaan naar het overzicht.

Op deze pagina vond ik dat je onkeydown moet gebruiken, met deze pagina kun je de nr's van alle toetsen zien.


Vr.Gr. Egel.
 

Bijlagen

Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan