Bonjour,

J'essayes de faire un zoom sur image en me basant sur une video vue sur internet(
)
mais ça marches pas pour moi même si reprends l'intégralité du code, les programmes html et css son exécutés normalement mais pas les instructions
Javascriopt. ça bloque a la première instruction($(document).ready(function()) on dirait qu'elle n'est pas reconnue, quelqu'un pourrait il me dire pourquoi.

Voici mon code et merci d'avance.
Le html:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="zoom.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-witdh, initual-scale=1.0">        
    <meta http-equiv="X-UA-Compatible" content="IE=ie11">
    <script type="text/javascript" src="zoom.js"></script>
</head>
<body>
<div class="zoom_area">
     <div class="zoom"></div>
     <img src="velo.jpg" alt="velo" class="zoom_sur"/>
</div>
</body>
</html>

le css:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.zoom_area
{
	margin: 30px auto;
	width: 400px;
} 
 
.zoom
{
	border-radius: 100%;
	box-shadow: 0 0 0 7px rgba(255,255,255,0.85), 0 0 7px 7px rgba(20,20,20,0.25), inset 0 0 40px 2px rgba(20,20,20,0.25);
	height: 175px;
 
	position: absolute;
	width: 175px;
}
 
.zoom_area img
{
	width: 400px;
}

pour le javascript voici les premieres lignes de code, je n'arrives jamais a la derniere instruction (alert(image.width + " - "+image.height)

Code javascipt : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready(function() {
     $(".zoom_area").each(function() {
	    var zoom = $(this).find(".zoom");
	    var zoom_sur = $(this).find(".zoom_sur");
 
       	    var image = new Image();
 
	   image.src = zoom_sur.attr("src");
	   alert(image.width + " - "+image.height);
});
     });