navigatie knop > terug naar vorige pagina

[Pellekaart]

Ik probeer aan een 'driehoek'knopje dat ik gemaakt heb een funktie te koppelen.
Maar het werkt niet zoals ik het zou willen. Nu heb ik ook weinig verstand van scripts maar probeer er een oplossing voor te vinden.
Als het knopje werkt wil ik er ook een met 'history.go(+1), dat je dus naar een volgende (foto)pagina kunt gaan.

in html heb ik nu;

<div id="driehoekklein" onclick="location.href='history.go(-1)'" style="cursor: pointer;"></div>

driehoekje in CSS;

}


div#driehoekklein {
border-left-width: 0.7em;
border-left-style: solid;
border-left-color: rgba(153,255,255,1);
border-bottom-width: 0.7em;
border-bottom-style: solid;
border-bottom-color: rgba(153,255,255,1);
border-right-width: 0.7em;
border-right-style: solid;
border-right-color: rgba(255,0,0,1);
top: 450px;
width: 25px;
border-top-width: 0.7em;
border-top-style: solid;
border-top-color: rgba(153,255,255,1);
float: left;
left: 50px;
position: absolute;
z-index: 9999;

}
div#driehoekklein:hover {
border-left-width: 0.8em;
border-left-style: solid;
border-left-color: rgba(153,255,255,1);
border-bottom-width: 0.8em;
border-bottom-style: solid;
border-bottom-color: rgba(153,255,255,1);
border-right-width: 0.8em;
border-right-style: solid;
border-right-color: rgba(0,204,51,1);
top: 450px;
width: 25px;
border-top-width: 0.8em;
border-top-style: solid;
border-top-color: rgba(153,255,255,1);
float: left;
left: 45px;
position: absolute;
background-color: rgba(153,51,153,1);
cursor: pointer;
z-index: 9999;
}

-------
Dit scriptje werkt overigens wel;
<a href="#" onclick="history.go(-1)">Vorige pagina</a>

Maar het is mijn bedoeling om dit niet met tekst te doen maar met in CSS gemaakt driehoekje (zoals hierboven)

Dit had ik eerder opgelost door elke pagina door te verwijzen, dus per pagina te veranderen.
Maar dat is altijd wat meer werk dan dat je er een mooi scriptje voor zou hebben.

 

[Pellekaart]

opgelost

Ik heb er nu het volgende van gemaakt, en het werkt tot zover ik het kan zien nu;

<div id="button" onclick="history.go(-1)" style="cursor: pointer;">vorige foto</div>

Dankwoord; bedankt Pel!

 

[csshunter]

Hoi Pel,

Opgelost
Het werkt tot zover ik het kan zien nu. (post nr. #2)
Als het knopje werkt wil ik er ook een met 'history.go(+1), dat je dus naar een volgende (foto)pagina kunt gaan. (post nr. #1)

Terugbladeren

• Het knopje met history.go(-1) werkt in zoverre, dat je keurig teruggaat naar de vorige bezochte pagina (= de terugknop van de browser).
• Maar de vorige bezochte pagina is niet automatisch de vorige foto-pagina.
• Als die vorige bezochte pagina de vorige foto-pagina was, gaat het goed.
• Ben je op een andere manier op een foto-pagina aanbeland (bv. via Google), dan gaat dat knopje niet naar de vorige foto-pagina, maar terug naar de Google-resultaten of waar de bezoeker ook vandaan kwam.

Heenbladeren

• De history.go() functie kan alleen heen en weer bladeren in de history! (= ook weer: gelijk aan de achteruit / vooruit knop van de browser).
• D.w.z. je kan bv. 5 bezochte pagina's terugbladeren met steeds history.go(-1), en dan weer 3 vooruit met history.go(+1).
• Maar je blijft heen en weer rangeren waar je al geweest bent!
• Als je heen wilt linken naar een pagina waar de bezoeker nog niet geweest is, dan kan dat dus niet met history.go(+1).
• Want dat is toekomst, en nog geen history.

Toch naar de echte vorige en volgende foto-pagina?
Dat kan wel met een ander soort javascriptje:

• Nodig is dat de fotopagina's allemaal hetzelfde heten, met uitzondering van een volgnummer.
• Bv. fotopagina1.htm, fotopagina2.htm, enz.
• Dan laat je javascript uitzoeken welk volgnummer de actuele pagina heeft, en bij het knopje "vorige" een functie aanroepen die van het volgnummer 1 aftrekt, om vervolgens de URL van die pagina te gebruiken in de link.
• Dat kan met optellen van 1 ook voor de "volgende" knop: altijd prijs (behalve als de bezoeker javascript uit heeft staan; daarvoor zou je naar een overzichtspagina kunnen laten verwijzen).
• Verder moet er nog een handrem ingebouwd worden voor als je op de eerste resp. laatste fotopagina bent: bij de eerste mag je niet terug, bij de laatste mag je niet vooruit.
• Of je maakt er een carrousel van, dat met een klik op "vorige" op de eerste doortuft met de laatste en dan achteruitloopt, resp. met "volgende" op de laatste weer vrolijk van voren af aan begint.

Als je op php draait, kan het ook serverside met een php-functie (dan werkt het ook als de bezoeker javascript uit heeft staan).

Met vriendelijke groet,
CSShunter

 

[Pellekaart]

Bedankt CSShunter!

Het is natuurlijk erg fijn als je iets maakt dat goed werkt.
Maar het was inderdaad niet helemaal zoals ik het voor ogen had.

Ik moet daar inderdaad een soort javascriptje voor maken, als ik dat eenmaal heb en kan gebruiken scheelt me dat heel veel tijd weer.
De fotopagina's zijn al logisch genummerd.
Nu kan ik zelf nog niet zoiets schrijven en zal zo'n scriptje moeten zoeken of vragen aan iemand het te maken voor me.

Op dit moment moet ik het maar even per pagina aanpassen, dat deed ik hiervoor ook.
Maar dat is natuurlijk wel veel meer werk..

groeten Pellekaart