image_popups.js
document.getElementsByTagName
Met de JavaScript-functie getElementsByTagName kun je alle tags van een bepaald type uit een pagina halen en in een array stoppen. Dat doen we in ons voorbeeld dus voor de <a> tag. We moeten er echter wel zeker van zijn dat de hele pagina is geladen voordat we getElementsByTagName kunnen uitvoeren. Daarvoor gebruiken we het window.onload event. We beginnen image_popups.js dus met:
Code (php)
1
2
3
4
5
2
3
4
5
window.onload = init;
function init () {
var x = document.getElementsByTagName ('a');
var n = x.length;
}
function init () {
var x = document.getElementsByTagName ('a');
var n = x.length;
}
Zodra de pagina geladen is wordt de functie init () uitgevoerd. Die stopt alle <a> tags in een array x. De lengte van x zetten we alvast in n. Omdat niet alle hyperlinks op een pagina de class 'popup' hoeven te hebben gaan we de array x doorlopen met een for-lus. Als een hyperlink de class 'popup' heeft, koppelen we een functie aan het onclick-event van die hyperlink:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
for (i = 0; i < n; i++) {
if (x[i].className == 'popup') {
x[i].onclick = function () {
return open_picture_win (this);
}
}
}
if (x[i].className == 'popup') {
x[i].onclick = function () {
return open_picture_win (this);
}
}
}
De functie krijgt de naam 'open_picture_win' en krijgt als argument het keyword 'this' mee, wat betekent dat we naar het huidige object uit de array x verwijzen. Omdat we het hele object als argument meegeven, hebben we straks binnen de functie 'open_picture_win' ook de beschikking over onze custom-attributen popup_w en popup_h. De 'return' die ervoor staat is om het standaardgedrag van de hyperlink te onderbreken.
De code die we tot nu toe hebben ziet er dus als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload = init;
function init () {
var x = document.getElementsByTagName ('a');
var n = x.length;
for (i = 0; i < n; i++) {
if (x[i].className == 'popup') {
x[i].onclick = function () {
return open_picture_win (this);
}
}
}
}
function init () {
var x = document.getElementsByTagName ('a');
var n = x.length;
for (i = 0; i < n; i++) {
if (x[i].className == 'popup') {
x[i].onclick = function () {
return open_picture_win (this);
}
}
}
}
« vorige pagina | volgende pagina »