S4 - Javascript

Vous venez de faire "à la main" (dans le HTML et le CSS) ce que l'on veut faire en JavaScript quand l'utilisateur clique sur l'image.

Enlevez l'image verte du HTML.
Enlevez top et left du fichier CSS (mais laissez le "position: absolute;")
Enlevez aussi le border.
Enlevez le fond rouge

Rappel, on veut:

• Ajouter un gestionnaire d'événements pour le click sur l'image.
• Dans cette fonction, il faut créer un nouvel élément img (voir cours)
  
• Positionner l'image en utilisant la position de la souris.
• Ajouter l'image dans l'arbre DOM.

Dans les pages suivantes on va, ensemble, compléter le squelette suivant:

$(document).ready(function()
{
	console.log("Le document est prêt");

	$('img').mousemove(function(event)
		{
			$('#affiche-x').text(event.pageX);
			$('#affiche-y').text(event.pageY);
		});

	$('???').???(function(event)
		{
			console.log("Click sur l'image");
			var splat=AAA;
			splat.BBB(CCC);
			splat.BBB(DDD);
			$('EEE').FFF(splat);
		});

	console.log("La mise en place est finie. En attente d'événements...");
});

Remplissez vous mêmes les "???" (ca devrait être facile...).

Dans les pages suivantes on va  traiter, ensemble, les points restants suivants:

• AAA : création de l'élément img
• BBB : positionnement de l'image
• CCC,DDD : positionnement de l'image
  
• EEE: à quel endroit de l'arbre DOM ajouter l'image
• FFF: quelle fonction jQuery pour ajouter l'image