SYTEME DE DESIGN

<figure><img id="fiche_3d" onMouseMove="fiche3d('open');" onMouseOut="fiche3d('close');" src="html/img/animation/photo_barbe6.jpg" alt="fiche d'identité"></figure>
			<div class="mouse mouse1"><i class="fas fa-mouse fa-2x"></i><p>Bouger la souris pour voir la photo en 3d</p></div>
			<figure><img id="plat_3d" onMouseMove="plat3d('open');" onMouseOut="plat3d('close');" src="html/img/animation/plat4.png" alt="Plat Endives aux jambon 3d">
			<div class="mouse mouse2"><i class="fas fa-mouse fa-2x"></i><p>Bouger la souris pour voir la photo en 3d</p></div>
			</figure>
		</div>

function findPos(el) {
	var x = y = w = h = 0;
	if(el.offsetParent) {
		x = el.offsetLeft;
		y = el.offsetTop;
		w = el.offsetWidth;
		h = el.offsetHeight;
	}
	return {'x':x, 'y':y, 'w':w, 'h':h};
}


function fiche3d(act) {
	var fiche = document.getElementById("fiche_3d");
	var pos = findPos(fiche);	
	var x = pos.x; var y = pos.y; var w = pos.w; var h = pos.h; /*-- position et taille de lélément div --*/
	
	var e = event;
	var mx = e.clientX - (w / 100 * 20); var my = e.clientY; /*-- position de la sourie : attention elever la marge ici 20 % de figure --*/
	
	var g = w / 11; /*-- proportion de changement de la photo : Divition de la largeur par le nombre de photos --*/
	
	
	if (act == 'open') {
		
	if (mx > x && mx < x + (g * 1)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 11 + ".jpg");
	}
	if (mx > x + (g * 1) && mx < x + (g * 2)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 10 + ".jpg");
	}
	if (mx > x + (g * 2) && mx < x + (g * 3)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 9 + ".jpg");
	}
	if (mx > x + (g * 3) && mx < x + (g * 4)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 8 + ".jpg");
	}
	if (mx > x + (g * 4) && mx < x + (g * 5)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 7 + ".jpg");
	}
	if (mx > x + (g * 5) && mx < x + (g * 6)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 6 + ".jpg");
	}
	if (mx > x + (g * 6) && mx < x + (g * 7)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 5 + ".jpg");
	}
	if (mx > x + (g * 7) && mx < x + (g * 8)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 4 + ".jpg");
	}
	if (mx > x + (g * 8) && mx < x + (g * 9)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 3 + ".jpg");
	}
	if (mx > x + (g * 9) && mx < x + (g * 10)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 2 + ".jpg");
	}
	if (mx > x + (g * 10) && mx < x + (g * 11)) {
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 1 + ".jpg");
	}
		
	}
	
	if (act == 'close') {
		
	fiche.setAttribute("src", "html/img/animation/photo_barbe" + 6 + ".jpg");
		
	}

}

function plat3d(act) {
	var fiche = document.getElementById("plat_3d");
	var pos = findPos(fiche);	
	var x = pos.x; var y = pos.y; var w = pos.w; var h = pos.h; /*-- position et taille de lélément div --*/
	
	var e = event;
	var mx = e.clientX - (w / 100 * 20); var my = e.clientY; /*-- position de la sourie : attention elever la marge ici 20 % de figure --*/
	
	var g = w / 7; /*-- proportion de changement de la photo : Divition de la largeur par le nombre de photos --*/
	
	
	if (act == 'open') {
		
	if (mx > x && mx < x + (g * 1)) {
	fiche.setAttribute("src", "html/img/animation/plat1.png");
	}
	if (mx > x + (g * 1) && mx < x + (g * 2)) {
	fiche.setAttribute("src", "html/img/animation/plat2.png");
	}
	if (mx > x + (g * 2) && mx < x + (g * 3)) {
	fiche.setAttribute("src", "html/img/animation/plat3.png");
	}
	if (mx > x + (g * 3) && mx < x + (g * 4)) {
	fiche.setAttribute("src", "html/img/animation/plat4.png");
	}
	if (mx > x + (g * 4) && mx < x + (g * 5)) {
	fiche.setAttribute("src", "html/img/animation/plat5.png");
	}
	if (mx > x + (g * 5) && mx < x + (g * 6)) {
	fiche.setAttribute("src", "html/img/animation/plat6.png");
	}
	if (mx > x + (g * 6) && mx < x + (g * 7)) {
	fiche.setAttribute("src", "html/img/animation/plat7.png");
	}
		
	}
	
	if (act == 'close') {
		
	fiche.setAttribute("src", "html/img/animation/plat4.png");
		
	}

}