1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <script type='text/javascript'>
function rectangle(img,pcanvas,parea){
//Nouvelle image
var imgselect = new Image();
//Source de l'image
imgselect.src=img.src;
//Déclare l'ojet emprise
var canvas = document.getElementById(pcanvas);
//Déclare l'objet area du map
var areas = document.getElementById(parea);
//Création d'un tableau
var splitcoord = new Array();
//Mémorise dans le tableau les coordonnées de la zone sensible
splitcoord = areas.coords.split(',');
//Largeur de l'emprise canvas (égale à l'image de fond)
canvas.width=imgselect.width
//Hauteur de l'emprise canvas (égale à l'image de fond)
canvas.height=imgselect.height
//Dessin en 2D
var context = canvas.getContext("2d");
//On commence un nouveau dessin
context.beginPath();
//Couleur des traits
context.strokeStyle="blue";
//Epaisseur des traits
context.lineWidth="2";
//Dimensions du polygone zone sensible
context.rect(splitcoord[0],splitcoord[1],splitcoord[2],splitcoord[3]);
//Emprise temporaire (juste pour vérifier que le canvas = l'image de fond)
context.rect(0,0,canvas.width,canvas.height);
//Application du dessin
context.stroke();
}
function mousehand(thisId){
//Curseur main sur la zone sensible
document.getElementById(thisId).style.cursor='hand';
}
function mousedefault(thisId){
//Curseur normal hors de la zone sensible
document.getElementById(thisId).style.cursor='default';}
</script> |
Map zone sensible contour avec couleur
Répondre avec citation
)
Partager