Op mijn website http://www.kristofdevos.be zie je vogeltjes waarop je kunt klikken. Als je over een vogeltje hovert heb je de indruk dat er een andere afbeelding hovert, maar eigenlijk is dit dezelfde die x-aantal pixels naar links verschuift waardoor zijn hover-state zichtbaar wordt.

Nu wil ik dat de aangeklikte vogeltjes rood blijven. Maar als ik in mijn CSS definieer dat de visited (net zoals de hover) x-aantal pixels naar links moet blijft hij gewoon zwart. Is er een andere manier om ze na het aanklikken toch rood te laten? Het lukt me op geen enkele manier om de vogeltjes een 'visited' state te geven. Dit zou de finishing touch voor de site moeten zijn...

Dat zal je zo niet lukken…

De klik op de link wordt immers door het lightbox script onderschept, zodat deze er zijn truukje er mee kan uithalen. Volgens de browser is de link dan dus ook nog niet bezocht, met als gevolg dat de  ':visited' pseudo class niet niet geldt. Je zult het dus met javascript moeten oplossen…

Je kan JavaScript een cookie laten aanmaken als op de link wordt geklikt. Als JavaScript dan een cookie vind laat je je afbeelding d.m.v. CSS een aantal pixels naar links schuiven.

Als je niets van JavaScript weet kan je ook scripts van bepaalde site's halen, zoals http://www.javascriptzoeker.nl, http://www.robsdomein.nl en http://www.leejoo.nl (zelf ook wel eens gebruikt )

Hey Steve07, ik ben geen 'krak' in die dingen. <p>Kan je iets specifieker zijn over welk script ik kan gebruiken?

Als je reeds bezochte linkjes niet na het sluiten van het document bewaard hoeven blijven, hier een simpel scriptje voor je dat een ' _visited' class toe te voegt aan de reeds bestaande class naam bij een click event. Dit doet het scriptje alleen met linkjes die 'scrollover' in de class naam hebben.

window.onload=function()
{
 links = document.getElementsByTagName('a');

 for (var i = 0; i < links.length; i++){
   if (links[i].className.indexOf('scrollover') >= 0){
     links[i].onclick = function(){
       this.className += this.className.indexOf('_visited') >= 0 ? '' : ' _visited';
     }
   }
 }
}

Rest je nog ._visited class te stylen in je css...

Hey Kaydie, merci voor de tip.
Alleen, als ik dit doe werkt de visited, maar werkt lightbox niet meer De afbeelding opent gewoon in het browservenster ipv in de box.

Zo zou het wel moeten werken…

Event.observe(window, 'load', function(){
 var links = document.getElementsByTagName('a');
 for (var i = 0; i < links.length; i++){
   if (links[i].className.indexOf('scrollover') >= 0){
     Event.observe(links[i], 'click', function(){
       this.className += this.className.indexOf('_visited') >= 0 ? '' : ' _visited';
     });
   }
 }
});

Superbedankt    
Ik zal dit vanavond eens testen als ik thuis ben!

Helaas Nu werkt m'n lightbox terug, maar doet de visited niets meer  

Dan doe je toch iets fout…

-> klik  

Kaydie, ongelooflijk hoe je me helpt!

Nu heb ik nog een probleempje, en dat is het feit dat ik de visited state niet zie, maar een witte ruimte. Ik heb mijn aangepaste versie even op http://www.konijnmetpluimen.be/testarea gezet; enkel de eerste vogel op de draad heeft voorlopig een visited state.

Mocht je me hier nog een duwtje in de rug bij geven, ben ik je voor eeuwig dankbaar  

Thx.

.scrollover1, .scrollover2, .scrollover3, .scrollover4, .scrollover5, .scrollover6, .scrollover7, .scrollover8, .scrollover9, .scrollover10 {
   display: block;
   position: absolute;
   text-decoration: none;
   background-repeat:no-repeat;
   background-position: 0 0;
}

/* ---------------- */

.scrollover1{
   top  : 195px; left : 330px;
   width: 37px; height: 110px;
   background-image: url(library/index/index_03.jpg);
}
.scrollover2{
   top : 206px; left: 367px;
   width: 54px; height: 99px;
   background: url(library/index/index_06.jpg);
}

etc...

/* ---------------- */

a:hover.scrollover1,
a.scrollover1._visited{
   background-position: -37px 0;
}
a:hover.scrollover2,
a.scrollover2._visited{
   background-position: -54px 0;
}

etc...

/* ---------------- */

en de css style rule in de html even verwijderen ( die met display none; )

(Bewerkt door Kaydie om 2:17, 1-11-2007)

Kaydie, zonder jou hulp had ik dit nooit voor elkaar gekregen, duizendmaal merci    

Nieuwe versie staat online op http://www.kristofdevos.be

En als ik ooit es iets terug kan doen, geef maar 'n gil

Graag gedaan hoor…

'k zal het onthouden.