이것은 내가 일한 오래된 프로젝트입니다. MAP 이미지는 자바 스크립트와 함께 사용하기가 매우 쉽습니다. 나는 당신에게 물건을 제공하고, 당신은 그것을 읽고 사용법을 알고 있습니다. MAP 이미지를 사용하기 위해 JQuery 및 기타 시스템이 필요하지 않습니다.
//Copyright Cherif yahiaoui, by ELEBAN.FR
//variables de flottement.
var myInstOne = null;
var globalize = null;
var eleban_preload_images = function (name, imgs, url){
try{
var oThis = this;
this.images = new Array();
this.imageshover = new Array();
this.imagesNames = new Array(imgs.split(";"));
for(var i=0; i < this.imagesNames[0].length; i++){
this.images[i] = new Image();
this.imageshover[i] = new Image();
}
this.url = url;
this.GetAbsoluteurl = function () {
var img = new Image(); img.src = url;
url = img.src; img = null;
this.url = url;
};
this.Preload = function () {
for(var i=0; i < this.imagesNames[0].length; i++){
this.images[i].src = this.url+("btn-"+this.imagesNames[0][i]+".png");
this.imageshover[i].src = this.url+("btn-"+this.imagesNames[0][i]+"-hover.png");
}
};
this.GetAbsoluteurl();
this.Preload();
}
finally {return;}
}
var g_preloaderhover = new eleban_preload_images("loaderhover","menu;malette;reservation;cabine;facebook;map;amis","./images/");
//variable arret flottement
var g_stopflo = false;
var myObjfloater = function(name, idname, itop, differ ) {
var oThis = this; // création d'une référence vers l'objet courant
this.name = name;
this.id =idname;
this.xstep= 0.3;
this.itime = 30;
this.obj = null;
this.y = itop;
this.yadd = 0;
this.up = true;
this.pause = false;
this.differ = differ;
this.coordsimage = null;
this.objimg = null;
this.initimages = false;
this.compteur = 0;
this.over = false;
this.timeoutstop = null;
try{
this.initimage = function(){
var img = this.obj.getElementsByTagName('img')[0];
this.coordsimage = new Array(img.width, img.height);
this.objimg = img;
this.initimages = true;
};
this.myMethod = function() {
if(!g_stopflo){
if(this.differ != 0){
this.differ=this.differ-0.1;
}else{
if(this.obj){
if(this.over == false){
this.yadd=this.yadd+0.1; this.itime = this.itime + 10;
this.obj.style.visibility = "hidden";
this.y = ((this.up)? this.y - this.yadd : this.y + this.yadd);
this.obj.style.marginTop = this.y +"%" ;
this.obj.style.visibility = "visible";
if (this.yadd > this.xstep){
this.up = (this.up)? false : true;
this.yadd = -0.1; this.itime=180;
}
}
}else{
if (document){
if(document.getElementById) {
this.obj = document.getElementById(this.id);
//this.y = this.obj.offsetTop;
}else{
if(document.getElementByTagName) { this.obj = document.getElementByTagName(this.id); this.y = this.obj.offsetTop;}
}
}
}
}
this.timeoutstop=setTimeout(function() { oThis.myMethod(); }, this.itime);
}
};
this.callDelayed = function() {
// utilisation de la référence vers l'objet
if(!g_stopflo){
this.timeoutstop=setTimeout(function() { oThis.myMethod(); }, this.itime);
}
};
}
finally {return;}
};
// special creation des zones AREA
function eleban_createallarea(){
try{
var measur = new Array("w", "h");
measur["w"] = new Array(330,570,185,300,115,390,225);
measur["h"] = new Array(460,570,295,450,100,190,115);
var ititle = new Array("Voir les menus et nos suggestions","Repas à emporter","Réservation d’une table","Nous contacter","Nous rejoindre sur FaceBook","Calculer votre trajet","liste des amis");
var ihref = new Array("menus.html","emporter.html","reservation.html","contact.html","likebox.html","google.html","amis.html");
var b_map = new Array(0,1,2,3,4,5,6);
b_map[0] = "71,32,240,32,249,43,289,352,280,366,102,385,90,371,51,38";
b_map[1] = "66,52,95,14,129,56,115,91,100,93,112,273,128,284,122,366,176,343,193,296,191,194,147,189,145,166,201,111,199,84,545,105,532,354,509,388,412,478,32,401,77,383,87,375,82,286,95,269,94,221,24,195,11,165,9,120,89,123,89,94,78,92,77,92,77,93,75,93,77,93,76,93,79,92";
b_map[2] = "19,25,169,38,173,112,161,113,105,103,90,125,91,262,121,269,124,281,96,293,62,289,49,281,56,268,83,264,84,121,71,98,16,90";
b_map[3] = "60,0,216,1,226,20,225,403,168,421,42,410,45,10";
b_map[4] = "31,7,72,10,82,18,88,45,88,71,76,81,29,80,17,68,16,18";
b_map[5] = "91,40,141,38,178,27,184,4,211,5,223,24,240,23,386,135,229,121,103,180,6,156,49,94";
b_map[6] = "6,32,69,18,79,6,118,7,141,2,149,10,211,17,202,28,209,30,189,62,195,70,178,74,180,90,164,90,154,107,68,101,34,104,34,98,18,97,28,84,15,84,30,65";
if (document.getElementById){
for (var i=0; i<b_map.length;i++){
var obj = document.getElementById("pc_menu"+i);
if(obj){
var ct = '<img class=\"pc_menu\" src=\"'+g_preloaderhover.images[i].src+'\" alt=\"\" width=\"'+measur["w"][i]+'\" height=\"'+measur["h"][i]+'\" usemap=\"#MAP_INDEX'+i+'\" \/>';
ct+='<map name=\"MAP_INDEX'+i+'\">';
ct+='<area shape=\"poly\" coords=\"'+b_map[i]+'\" title=\"'+ititle[i]+'\" href=\"'+ihref[i]+'\" \/>';
ct+='<\/map>';
obj.innerHTML = ct;
}
}
}
}
finally {return;}
}
//preload, creation et gestion de tous les evenements
var image_resizer = function(g_layer){
b_org_elm = new Array("w", "h");
b_org_elm["w"] = new Array(330,570,185,300,115,390,225);
b_org_elm["h"] = new Array(460,570,295,450,100,190,115);
b_map = new Array(0,1,2,3,4,5,6);
b_map[0] = new Array(71,32,240,32,249,43,289,352,280,366,102,385,90,371,51,38);
b_map[1] = new Array(66,52,95,14,129,56,115,91,100,93,112,273,128,284,122,366,176,343,193,296,191,194,147,189,145,166,201,111,199,84,545,105,532,354,509,388,412,478,32,401,77,383,87,375,82,286,95,269,94,221,24,195,11,165,9,120,89,123,89,94,78,92,77,92,77,93,75,93,77,93,76,93,79,92);
b_map[2] = new Array(19,25,169,38,173,112,161,113,105,103,90,125,91,262,121,269,124,281,96,293,62,289,49,281,56,268,83,264,84,121,71,98,16,90);
b_map[3] = new Array(60,0,216,1,226,20,225,403,168,421,42,410,45,10);
b_map[4] = new Array(31,6,70,10,78,18,84,23,88,44,88,70,78,80,75,81,33,82,23,76,18,69,16,22,21,13);
b_map[5] = new Array(91,40,141,38,178,27,184,4,211,5,223,24,240,23,386,135,229,121,103,180,6,156,49,94);
b_map[6] = new Array(6,32,69,18,79,6,118,7,141,2,149,10,211,17,202,28,209,30,189,62,195,70,178,74,180,90,164,90,154,107,68,101,34,104,34,98,18,97,28,84,15,84,30,65);
b_layer = g_layer;
//gere mouseover
this.mouseover = function(e){
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target
if (tg.nodeName){
if(tg.nodeName == "AREA"){
var divpar = (tg.parentNode)? tg.parentNode.parentNode : tg.parentElement.parentElement;
if (divpar){
if(divpar.nodeName == "DIV"){
var iiobjimg = divpar.getElementsByTagName('img');
if (iiobjimg){
ii = parseInt(divpar.id.substring(divpar.id.length-1,divpar.id.length));
iiobjimg[0].src = g_preloaderhover.imageshover[ii].src;
}
}
}
}
}
};
//gere mouseout
this.mouseout = function(e){
if (!e) var e = window.event;
tg = (window.event) ? e.srcElement : e.target
if (tg.nodeName){
if(tg.nodeName == "AREA"){
divpar = (tg.parentNode)? tg.parentNode.parentNode : tg.parentElement.parentElement;
if (divpar){
if(divpar.nodeName == "DIV"){
var iiobjimg = divpar.getElementsByTagName('img');
if (iiobjimg){
ii = parseInt(divpar.id.substring(divpar.id.length-1,divpar.id.length));
iiobjimg[0].src = g_preloaderhover.images[ii].src;
}
}
}
}
}
};
//ajout evenements entree sortie à la page web lors du chargement de la page
this.init = function () {
for(var i=0; i<b_org_elm["w"].length;i++){
w = document.getElementById("pc_menu"+i).offsetWidth;
h = document.getElementById("pc_menu"+i).offsetHeight;
xa = w/parseFloat(b_org_elm["w"][i]);
ya = h/parseFloat(b_org_elm["h"][i]);
area = document.getElementById("pc_menu"+i).getElementsByTagName('area')[0];
b_map2 = area.coords.split(",");
yswitch = true;
for(m=0; m<b_map2.length;m++){
b_map2[m] = Math.round(parseFloat(b_map[i][m]) * ((yswitch)? xa: ya));
yswitch = (yswitch)? false : true;
}
area.coords = b_map2.join(',');
}
};
this.resize = function () {
clearTimeout(myInstOne.timeoutstop);
g_stopflo=true;
globalize.init();
g_stopflo=false;
myInstOne.obj = null;
myInstOne.callDelayed();
};
nar = document.getElementsByTagName('area').length;
for(var i=0; i<nar;i++){
var elem = document.getElementsByTagName('area')[i];
if (elem.addEventListener){
elem.addEventListener("onmouseover",this.mouseover,true);
elem.addEventListener("onmouseout",this.mouseout,true);
}else if (elem.attachEvent) {
elem.attachEvent("onmouseover", this.mouseover);
elem.attachEvent("onmouseout", this.mouseout);
}else{
elem["onmouseover"] = this.mouseover;
elem["onmouseout"] = this.mouseout;
}
}
window.onresize = this.resize;
window.onmouseover = this.mouseover;
window.onmouseout = this.mouseout;
}
//permet de temporiser et éviter les erreurs de chargement des objets
function temporise_Init(Lastdiv){
if(document.getElementById){
if(document.getElementById(Lastdiv)){
eleban_createallarea();
myInstOne = new myObjfloater('b_menumap11', 'pc_menu1', 1, 0);
globalize = new image_resizer(document.getElementById('pc_redim'));
globalize.init();
globalize.resize();
}else{
setTimeout(temporise_Init(Lastdiv), 30);
}
}
}
window.onload = function () {
temporise_Init("pc_bandeau");
}
또한, 제가 MS Paint에서 한이 그림을보십시오. 그것은 절대적으로 끔찍하고 불완전하지만, 모양과 색상만을 고려하면, 아마도 무엇이 될지 추측 할 수 있습니다. 본질적으로, 이것들은 스캔을 귀찮게하는 데 필요한 유일한 것입니다. 매우 독특한 모양과 색상의 조합을 가까이서 살펴보면 다른 무엇을 할 수 있을까요? 내가 칠하지 않은 비트, 흰색 배경은 "일관되지 않은 것"으로 간주해야합니다. 배경이 투명하면 거의 다른 이미지로 넘어가도 여전히 볼 수 있습니다.