/* navi button rollover menu VALIDATED SEPT 12 -2007*/ /* deze code kopieren en inplakken in de van de pagina */ /* of opnemen in extern stylesheet bij meerdere pagina's */ /* styles om met één image een heel knoppenblok te bedienen */ /* gevonden op: http://home.tiscali.nl/developerscorner/port-hole/knoppenblok.htm */ /* ©francky; freeware, svp deze bronvermelding intact laten voor gebruik door anderen */ /* eerst de eigenschappen voor alle list-items
  • van het knoppenblok */ #menu1 li { /* DEZE CODES KUNNEN ONVERANDERD BLIJVEN */ list-style-type: none; /* lijst zonder stipjes ervoor */ margin-left: -25px; /* begin van elke knop moet nu naar links om vooraan te beginnen */ margin-bottom:1px;/* onder elke knop 2px tussenruimte */ font-size: 1px; /* InternetExplorer denkt dat een knop tekst-hoogte heeft, */ line-height: 1px; /* en gaat anders te grote waarden hiervoor instellen */ } /* dan de eigenschappen voor alle links in het knoppenblok */ #menu1 li a { /* WIJZIGEN: vindplaats/naam van het plaatje met alle knoppen */ background-image: url('../images/navi-index1.jpg'); display: block; /* NIET WIJZIGEN: hele knop tonen, hele knop is klikbaar */ } /* nu voor elke knop de normale positie in het knoppenblok aangeven, */ /* en daarna de positie bij hover (mouse-over) */ #les1 a { width: 150px; /* WIJZIGEN: breedte van knop 1 */ height: 30px; /* WIJZIGEN: hoogte van knop 1 */ background-position: 0 0; } #les1 a:hover { background-position: -150px 0; } #les2 a { width: 150px; /* WIJZIGEN: breedte van knop 2 */ height: 30px; /* WIJZIGEN: hoogte van knop 2 */ background-position: 0 -30px; } #les2 a:hover { background-position: -150px -30px; } #les3 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -60px; } #les3 a:hover { background-position: -150px -60px; } #les4 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -90px; } #les4 a:hover { background-position: -150px -90px; } #les5 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -120px; } #les5 a:hover { background-position: -150px -120px; } /* -- menu2 - kolom 2 butt les 6 tot en met 10 */ #menu2 li { /* DEZE CODES KUNNEN ONVERANDERD BLIJVEN */ list-style-type: none; /* lijst zonder stipjes ervoor MAAR VOOR KOLOM 2 en 3 WEL ZICHTBAAR nu inline geplaatst bij ul voor menu 2 en 3*/ margin-left: -25px; /* begin van elke knop moet nu naar links om vooraan te beginnen */ margin-bottom:1px;/* onder elke knop 2px tussenruimte */ font-size: 1px; /* InternetExplorer denkt dat een knop tekst-hoogte heeft, */ line-height: 1px; /* en gaat anders te grote waarden hiervoor instellen */ } #menu2 li a { /* WIJZIGEN: vindplaats/naam van het plaatje met alle knoppen */ background-image: url('../images/navi-index2.jpg'); display: block; /* NIET WIJZIGEN: hele knop tonen, hele knop is klikbaar */ } /* nu voor elke knop de normale positie in het knoppenblok aangeven, */ /* en daarna de positie bij hover (mouse-over) */ #les6 a { width: 150px; /* WIJZIGEN: breedte van knop 1 */ height: 30px; /* WIJZIGEN: hoogte van knop 1 */ background-position: 0 0; } #les6 a:hover { background-position: -150px 0; } #les7 a { width: 150px; /* WIJZIGEN: breedte van knop 2 */ height: 30px; /* WIJZIGEN: hoogte van knop 2 */ background-position: 0 -30px; } #les7 a:hover { background-position: -150px -30px; } #les8 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -60px; } #les8 a:hover { background-position: -150px -60px; } #les9 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -90px; } #les9 a:hover { background-position: -150px -90px; } #les10 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -120px; } #les10 a:hover { background-position: -150px -120px; } /* begin navi menu3 buttons 11 tot en met 15 */ #menu3 li { /* DEZE CODES KUNNEN ONVERANDERD BLIJVEN */ list-style-type: none; /* lijst zonder stipjes ervoor MAAR VOOR KOLOM 2 en 3 WEL ZICHTBAAR nu inline geplaatst bij ul voor menu 2 en 3*/ margin-left:1px; /* begin van elke knop moet nu naar links om vooraan te beginnen */ margin-bottom:3px;/* onder elke knop 2px tussenruimte */ font-size: 1px; /* InternetExplorer denkt dat een knop tekst-hoogte heeft, */ line-height: 1px; /* en gaat anders te grote waarden hiervoor instellen */ } /* dan de eigenschappen voor alle links in het knoppenblok */ #menu3 li a { /* WIJZIGEN: vindplaats/naam van het plaatje met alle knoppen */ background-image: url('../images/navi-index3.jpg'); display: block; /* NIET WIJZIGEN: hele knop tonen, hele knop is klikbaar */ } /* nu voor elke knop de normale positie in het knoppenblok aangeven, */ /* en daarna de positie bij hover (mouse-over) */ #les11 a { width: 150px; /* WIJZIGEN: breedte van knop 1 */ height: 30px; /* WIJZIGEN: hoogte van knop 1 */ background-position: 0 0; } #les11 a:hover { background-position: -150px 0; } #les12 a { width: 150px; /* WIJZIGEN: breedte van knop 2 */ height: 30px; /* WIJZIGEN: hoogte van knop 2 */ background-position: 0 -30px; } #les12 a:hover { background-position: -150px -30px; } #les13 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -60px; } #les13 a:hover { background-position: -150px -60px; } #les14 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -90px; } #les14 a:hover { background-position: -150px -90px; } #les15 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -120px; } #les15 a:hover { background-position: -150px -120px; } /* begin navimenu 4 - button 16 tot en met 20 */ #menu4 li { /* DEZE CODES KUNNEN ONVERANDERD BLIJVEN */ list-style-type: none; /* lijst zonder stipjes ervoor */ /* begin van elke knop moet nu naar links om vooraan te beginnen */ margin-left:1px; margin-bottom:1px;/* onder elke knop 2px tussenruimte */ font-size: 1px; /* InternetExplorer denkt dat een knop tekst-hoogte heeft, */ line-height: 1px; /* en gaat anders te grote waarden hiervoor instellen */ } /* dan de eigenschappen voor alle links in het knoppenblok */ #menu4 li a { /* WIJZIGEN: vindplaats/naam van het plaatje met alle knoppen */ background-image: url('../images/navi-index4.jpg'); display: block; /* NIET WIJZIGEN: hele knop tonen, hele knop is klikbaar */ } /* nu voor elke knop de normale positie in het knoppenblok aangeven, */ /* en daarna de positie bij hover (mouse-over) */ #les16 a { width: 150px; /* WIJZIGEN: breedte van knop 1 */ height: 30px; /* WIJZIGEN: hoogte van knop 1 */ background-position: 0 0; } #les16 a:hover { background-position: -150px 0; } #les17 a { width: 150px; /* WIJZIGEN: breedte van knop 2 */ height: 30px; /* WIJZIGEN: hoogte van knop 2 */ background-position: 0 -30px; } #les17 a:hover { background-position: -150px -30px; } #les18 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -60px; } #les18 a:hover { background-position: -150px -60px; } #les19 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -90px; } #les19 a:hover { background-position: -150px -90px; } #les20 a { width: 150px; /* WIJZIGEN: breedte van knop 3 */ height: 30px; /* WIJZIGEN: hoogte van knop 3 */ background-position: 0 -120px; } #les20 a:hover { background-position: -150px -120px; }