- dim. 28 avr. 2024 18:31
#215470
Bonjour,
Je viens d'appliquer l'excellent tutu de Mohamed Chiny.
J'ai transcris et vérifié les codes html et css donnés (voir les codes ci-dessous).
L'image reproduite dans la loupe est figée ; ce défaut avait été constaté, sans réponse valable.
Je n'arrive pas à trouver le bug qui n'apparait pas dans le tuto de M.Chiny.
Quelqu'un aurait-il une solution ?
Je l'en remercie par avance.
Cordialement.
Gérard.
<html>
<head>
<title> Loupe</title>
<meta charest="UTF-8" />
<link rel="stylesheet" href="style 3.css" />
meta="viewport" content="width=device-width" />
</head>
<body>
<div id="loupe"></div>
<script>
zoom=2;
document.body.onmousemove=function(){
loupe=document.getElementById("loupe");
loupe.style.left=event.clientX+"px";
loupe.style.top=event.clientY+"px";
loupe.style.backgroundSize=(auto*zoom)+"px";
loupe.style.backgroundPosition=(-loupe.offsetLeft*zoom-150)+"px"+(-loupe.offsetTop*zoom-150)+"px";
}
</script>
</body>
</html>
Code de "style 3.css :
body{
margin:0;
min-height:100vh;
background-image:url("Essai.jpg");
background-size:auto auto;
cursor:none;
}
#loupe{
width:300px;
height:300px;
border:solid 6px #FFF;
border-radius:200px;
position:absolute;
background-image:url("Essai.jpg");
background-size:auto auto;
box-shadow:0 0 10px rgba(0,0,0,0.6);
}
Je viens d'appliquer l'excellent tutu de Mohamed Chiny.
J'ai transcris et vérifié les codes html et css donnés (voir les codes ci-dessous).
L'image reproduite dans la loupe est figée ; ce défaut avait été constaté, sans réponse valable.
Je n'arrive pas à trouver le bug qui n'apparait pas dans le tuto de M.Chiny.
Quelqu'un aurait-il une solution ?
Je l'en remercie par avance.
Cordialement.
Gérard.
<html>
<head>
<title> Loupe</title>
<meta charest="UTF-8" />
<link rel="stylesheet" href="style 3.css" />
meta="viewport" content="width=device-width" />
</head>
<body>
<div id="loupe"></div>
<script>
zoom=2;
document.body.onmousemove=function(){
loupe=document.getElementById("loupe");
loupe.style.left=event.clientX+"px";
loupe.style.top=event.clientY+"px";
loupe.style.backgroundSize=(auto*zoom)+"px";
loupe.style.backgroundPosition=(-loupe.offsetLeft*zoom-150)+"px"+(-loupe.offsetTop*zoom-150)+"px";
}
</script>
</body>
</html>
Code de "style 3.css :
body{
margin:0;
min-height:100vh;
background-image:url("Essai.jpg");
background-size:auto auto;
cursor:none;
}
#loupe{
width:300px;
height:300px;
border:solid 6px #FFF;
border-radius:200px;
position:absolute;
background-image:url("Essai.jpg");
background-size:auto auto;
box-shadow:0 0 10px rgba(0,0,0,0.6);
}
FLTL_BYEl Magnifico