event handlers toevoegen op createElement
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// genereer alle 6 menu items, plaatjes
function makeMenuItems()
{
var i;
for (i = 1; i < 7; i++)
{
var tempImgSrc = '../images/menu/images/menu_item_0' + i + '.gif';
var tempImgID = 'menu_' + i;
var tempContainerID = 'imageContainer';
createImage(tempContainerID, tempImgSrc, tempImgID);
}
}
// maak nieuwe plaatjes aan en zet ze in de betreffende container
function createImage(containerID, imageSource, imageID)
{
var tempImage = document.createElement('img');
tempImage.setAttribute('src', imageSource);
tempImage.setAttribute('id', imageID);
tempImage.setAttribute('onclick','changeOnClick(this.id);');
tempImage.setAttribute('onmouseover','changeOnMouseOver(this.id);');
tempImage.setAttribute('onmouseout','changeOnMouseOut(this.id);');
var imageContainer = document.getElementById(containerID);
imageContainer.appendChild(tempImage);
}
// verkrijg het nummer dat in het id verborgen zit, vb: menu_1
function getImageNumber(imageId)
{
var getImage = document.getElementById(imageId);
var menuIndex = imageId.indexOf('menu_') + 5;
var imageNumber = imageId.substring(menuIndex, (menuIndex + 1));
return imageNumber;
}
// verander de src van het plaatje op de onClick event handler
function changeOnClick(imageId)
{
var getImage = document.getElementById(imageId);
getImage.src = '../images/menu/images/menu_item_OC_0' + getImageNumber(imageId) + '.gif';
}
// verander de src van het plaatje op de onMouseOver event handler
function changeOnMouseOver(imageId)
{
var getImage = document.getElementById(imageId);
getImage.src = '../images/menu/images/menu_item_mo_0' + getImageNumber(imageId) + '.gif';
}
// verander de src van het plaatje op de onMouseOut event handler, weer terug naar het orginele plaatje.
function changeOnMouseOut(imageId)
{
var getImage = document.getElementById(imageId);
getImage.src = '../images/menu/images/menu_item_0' + getImageNumber(imageId) + '.gif';
}
window.onload=makeMenuItems;
Events zou ik trouwens altijd direct via Javascript toevoegen:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var tempImage = document.createElement('img');
tempImage.onmouseover = changeOnMouseOver;
// en dan ook even changeOnMouseOver veranderen in:
function changeOnMouseOver(e) {
if(window.event) e = window.event;
var getImage = e.target || e.srcElement; // target = FF, W3C en srcElement = IE
getImage.src = 'anders.png';
}
tempImage.onmouseover = changeOnMouseOver;
// en dan ook even changeOnMouseOver veranderen in:
function changeOnMouseOver(e) {
if(window.event) e = window.event;
var getImage = e.target || e.srcElement; // target = FF, W3C en srcElement = IE
getImage.src = 'anders.png';
}