The operation of the HTML heat map (click the different locations of the pictures to manipulate different events) is appropriate for the documentation

Page Core Code

<div class= "First_top" >
<div class= "Back" >
</img>
</div>
<div class= "Use_book" > Usage Instructions </div>
</div>

<article class= "Wrap" >
<div class= "bg-img" id= "Div1" >

<button class= "BUT1" ></bitton>
<map name= "Planetmap" id= "Planetmap" >
<area
Shape= "Rect"
Coords= "0,0,0,0"
alt= "Rec"
Id= "Single_ac"
/>
</map>
</div>
</article>

JS Code:

$ (function () {
Creating objects
var img = new Image ();
var src=jquery (". Imgto"). attr ("src");

IMG.SRC = src;
Determine if there is a cache
if (img.complete) {
var Divheight=document.getelementbyid ("Div1"). offsetheight;
var Divwidth=document.getelementbyid ("Div1"). offsetwidth;

var y1=math.round (divheight* (420/1144));
var x1=0;
var x2=divwidth;
var y2=20000;
var coords=x1+ "," +y1+ "," +x2+ "," +Y2;
$ ("#single_ac"). attr ("coords", coords);
}else{
Img.onload = function () {
var Divheight=document.getelementbyid ("Div1"). offsetheight;
var Divwidth=document.getelementbyid ("Div1"). offsetwidth;
var y1=math.round (divheight* (420/1144));
var x1=0;
var x2=divwidth;
var y2=20000;
var coords=x1+ "," +y1+ "," +x2+ "," +Y2;
$ ("#single_ac"). attr ("coords", coords);

};
};
})

Control of the picture JS code

JQuery ("#single_ac"). Click (function () {
var src=jquery (". Imgto"). attr ("src");
var array=src.split ("/");
var str=array[array.length-1];
var array2=str.split (".");
var imgsize=parseint (array2[0]) +parseint (1);

if (array2[0]==3) {
JQuery (". Imgto"). attr ("src", ".. /assets/img/11.png "); Photo Photos
} else{
if (imgsize<11| | (imgsize>11&&imgsize<17)) {

JQuery (". Imgto"). attr ("src", ".. /assets/img/"+imgsize+". png ");
}
Picture Click Finish (self-processing)
if (imgsize==11| | IMGSIZE==17) {

}
}
})
Next photo
$ (". Imgto"). Click (function () {
var src=jquery (". Imgto"). attr ("src");
var array=src.split ("/");
var str=array[array.length-1];
var array2=str.split (".");

var imgsize=parseint (array2[0]) +parseint (1);

Control how many pictures are displayed
if (imgsize<11| | (imgsize>11&&imgsize<17)) {

JQuery (". Imgto"). attr ("src", ".. /assets/img/"+imgsize+". png ");
}
Picture Click Finish (self-processing)
if (imgsize==11| | IMGSIZE==17) {

}
})
Previous photo
$ (". Imgup"). Click (function () {
var src=jquery (". Imgto"). attr ("src");
var array=src.split ("/");
var str=array[array.length-1];
var array2=str.split (".");
var imgsize=parseint (array2[0])-parseint (1);
It's back to the first one.
if (imgsize>0) {
if (imgsize==10) {
JQuery (". Imgto"). attr ("src", ".. /assets/img/"+3+". png ");
}else{
JQuery (". Imgto"). attr ("src", ".. /assets/img/"+imgsize+". png ");
}

}
})

The operation of the HTML heat map (click the different locations of the pictures to manipulate different events) is appropriate for the documentation