Aufgaben

a4.js

(function Aufgabe_4_1(){
	var args = toArray(arguments),
		ele, attrs;

 	if(!(console && console.log)){
 		return alert("Open Developer Console or Firebug and reload");
 	} 
	
	args.forEach(function(tag, i){
		ele = toArray(document.getElementsByTagName(tag));

		ele.forEach(function(node, i){
			console.log("#Element: ", node);
			toArray(node.attributes).forEach(function(attr, i){
			 	console.log('	Attribute: ', attr.name,'	Value: ', attr.value);
			 })
		});
	});

	function toArray(i){
		return Array.prototype.slice.call(i, 0);
	};
	
})("img", "a");


(function Aufgabe_4_2(){
	var imgs = toArray(document.getElementsByTagName("img"));

	imgs.forEach(function(img){
		img.addEventListener('mouseover', function(event){
			var image = new Image(),
				div = document.createElement("div"),
				oldViewer = document.getElementById("imageViewer");
			
			oldViewer && document.body.removeChild(oldViewer);

			div.appendChild(image);

			setCss(div, {
				display : 'none',
				position : 'absolute',
				zIndex : 2,
				left : (event.pageX+20) + "px",
				top : (event.pageY+20) + "px",
				width: '400px',
				boxShadow : '0px 0px 10px rgb(20,20,20)',
				border: "5px solid rgba(255,255,255,0.4)",
				borderRadius : "5px"
			});

			setCss(image, {
				width : "100%"
			});
			
			div.id = "imageViewer";

			image.src = this.attributes.src.value.replace(/\_klein/,'');
			image.onload = function(){
				document.body.appendChild(div);
				div.style.display = 'block';
			};

			this.addEventListener("mouseout", function(){
				var old = document.getElementById("imageViewer");
				old && document.body.removeChild(old);
			});
		})

		
	});

	function toArray(i){
		return Array.prototype.slice.call(i, 0);
	};

	function setCss(element, rules){
		for(var rule in rules){
			element.style[rule] = rules[rule];
		}
	};

})();


(function Aufgabe_4_3(){
	var s = document.createElement("style");
	s.type = "text/css";
	s.innerHTML = "dd{ display:none; }";
	document.body.appendChild(s);

	toArray(document.getElementsByTagName("dt")).forEach(function(item){
		item.addEventListener("click", function(){
			var dd = this.nextSibling.nextSibling;
			if(dd.style.display === "none"){
				dd.style.display = "block";
			} else {
				dd.style.display = "none";
			}
		});
	});

	function toArray(i){
		return Array.prototype.slice.call(i, 0);
	};
})();