// Funktion lädt beim MouseOver über einen Link eine Grafik in einen <div> Container
// Bei MouseOut wird die Grafik wieder aus dem DOM entfernt
// Link muss wie folgt aussehen
// <a href="..." rel="rollover" class="dateiname" title="Linktitel">Link</a>

// ID des Containers in dem Grafiken angezeigt werden
var containerID = "bildcontainer";

// ID des Containers in den der Bildcontainer eingefügt wird
var htmlContainerID = "container";

// [optional] Verzeichnis in dem sich die Grafiken befinden (Pfad relativ von HTML Datei aus)
var grafikVerz = "";

// [optional] Dateiendung der Grafiken
var dateiendung = "";

function linkRolloverImageOn(element){
	
	// Navigation auslesen
	var htmlContainer = document.getElementById(htmlContainerID);
	
	// Klassenname des Links auslesen
	var dateiname = element.className;
	
	// Pfad zur Datei generieren
	dateiname = grafikVerz+dateiname+dateiendung;
	
	// Container generieren
	var container = document.createElement("div");
	// ID des <div> Elemnts setzen
	container.setAttribute("id",containerID);
	// Bildcontainer in GTML Container einfügen
	htmlContainer.appendChild(container);
	
	// <div> Element mit ID für Rollover Grafiken auslesen
	var ziel = document.getElementById(containerID);	
	
	// Grafikdatei erzeugen
	var grafik = document.createElement("img");
	// Quelle des Bildes einfügen
	grafik.setAttribute("src",dateiname);
	
	// Grafik dem <div> Container anfügen
	ziel.appendChild(grafik);
}

function linkRolloverImageOff(){
	
	// Navigation auslesen
	var htmlContainer = document.getElementById(htmlContainerID);
	
	// <div> Element mit ID für Rollover Grafiken auslesen
	var container = document.getElementById(containerID);
	
	// Bildconatiner entfernen
	htmlContainer.removeChild(container)
}


function linkRolloverImageSetup(){
  
	// Alle Link Tags des Dokuments in Array schreiben
	var linktag = document.getElementsByTagName("a");
	
	// Einzelnes Linktag abarbeiten
	for (var i=0; i<linktag.length; i++){
		
		// Überprüfen ob Linktag rel="rollover" hat
		if(/rollover/.test(linktag[i].rel)) {
			
			// Klassennamen des Links auslesen
			// Dieser entspricht dem Dateinamen der Grafik die angezeigt werden soll
			// Verzeichnis und Dateiendung werden Dateinamen hinzugefügt
			var rolloversrc = linktag[i].getAttribute("class");
			rolloversrc = grafikVerz+rolloversrc+dateiendung;
			
			// Grafikdatei preloaden
			linktag[i].rolloversrc_img = new Image();
			linktag[i].rolloversrc_img.src = rolloversrc;
			
			// Event Handler
			linktag[i].onmouseover=function(){linkRolloverImageOn(this);};
			linktag[i].onmouseout=function(){linkRolloverImageOff();};
		}
	}
}



// Funktionen beim Laden der Seite initialisieren
window.onload = function(){
	linkRolloverImageSetup();
}