මෙය මා වැඩ කළ පැරණි ව්යාපෘතියකි. ජාවාස්ක්රිප්ට් සමඟ 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");
}