window.onload = loadEvent;

function loadEvent() {

/* 
Här kan du lägga till i princip hur många bilder som hellst..
Kopiera bara texten nedan, och skriv in nya URLs, och ny ID(VIKTIGT!).

OBS! Endast för bilder med onmouseoverfunction.
*/

loadImages("male", "bilder/dudes/male1.jpg", "bilder/dudes/male2.jpg");
loadImages("moneybag", "bilder/dudes/moneybag1.jpg", "bilder/dudes/moneybag2.jpg");
loadImages("phone", "bilder/dudes/phone1.jpg", "bilder/dudes/phone2.jpg");
loadImages("procent", "bilder/dudes/procent1.jpg", "bilder/dudes/procent2.jpg");
loadImages("x", "bilder/dudes/x1.jpg", "bilder/dudes/x2.jpg");
loadImages("agenda", "bilder/dudes/agenda1.jpg", "bilder/dudes/agenda2.jpg");
loadImages("certificate", "bilder/dudes/certificate1.jpg", "bilder/dudes/certificate2.jpg");
loadImages("check", "bilder/dudes/check1.jpg", "bilder/dudes/check2.jpg");
loadImages("clip", "bilder/dudes/clip1.jpg", "bilder/dudes/clip2.jpg");
loadImages("clock", "bilder/dudes/clock1.jpg", "bilder/dudes/clock2.jpg");
loadImages("graph", "bilder/dudes/graph1.jpg", "bilder/dudes/graph2.jpg");
loadImages("letter", "bilder/dudes/letter1.jpg", "bilder/dudes/letter2.jpg");

}

function loadImages(id, firstImageURL, imageOnRolloverURL) {
	
	if(document.getElementById(id)) {
		var image1 = new Image(); image1.src = firstImageURL; //preloadar bild1
		var image2 = new Image(); image2.src = imageOnRolloverURL; // preloadar bilden som ska synas vid onmouseover
		
		document.getElementById(id).src = firstImageURL; //lägger in bilden i bildramen
		document.getElementById(id).width = image1.width; // ändrar bredd på bild, ej nödvändigt för senaste webb-läsare
		document.getElementById(id).height = image1.height; // ändrar höjd på bild, ej nödvändigt för senaste webb-läsare
		document.getElementById(id).onmouseover = new Function("swapImages( '" + id + "', '" + image2.src + "');"); // lägger till funktionen onmouseover
		document.getElementById(id).onmouseout = new Function("swapImages( '" + id + "', '" + image1.src + "');"); // lägger till funktionen onmouseout
		document.getElementById(id).src = firstImageURL; //lägger in bilden i bildramen
	}
}

function swapImages(id, newImageURL) {

	var image = new Image(); image.src = newImageURL; //preloadar bilden för att få ut värden som width och height.
	document.getElementById(id).height = image.height; // sätter höjden på img
	document.getElementById(id).width = image.width; // sätter breden på img
	document.getElementById(id).src = image.src; //byter bild

}