Есть карта Італии на сайте auto-bazar.it . Принцип действия такой. Есть Изображение по умолчанию, /images/map-italy.jpg и 20 точно таких же изображений только с выделенным желтым цветом соответственного региона Италии. То есть при наведении на то место где расположен регион которому отвечают его координаты, подложка /images/map-italy.jpg заменяется изображение с подсвеченным регионом. Проблема в том что 20 изображений * 17 килобайт = 340 кб. Это не допустимо. Я в Java Script вообще не шарю. По изложенному коду пожалуйста подскажите как заставить его и возможно ли ето чтоб при наведении на любой регион выводилось изображение .png или .gif с прозрачностью, то есть только картинка с за крашеным регионов но не взамен подложка а поверх нее. При такой работе 20*1.5=30 кб. Думаю понятно. Спасибо всем кто ответил. var data; var dataLevel1 = new Array(); var dataLevel2 = new Array(); var dataLevel3 = new Array(); var url = "http://"+document.domain; var url_cookie = document.domain; function setCookie(cookieName, cookieValue) { var expire = new Date(); expire.setTime(expire.getTime() + 3600000*24*365); document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString()+";path=/"; } function setOrder(field, how) { setCookie('sort', field + ':' + how); window.location.reload() } function setView(view) { setCookie('view', view); window.location.reload(); } function getCookie(name) { var sPos = document.cookie.indexOf(name + "="); var len = sPos + name.length + 1; if((!sPos) && (name != document.cookie.substring(0, name.length))){ return null; } if(sPos == -1){ return null; } var ePos = document.cookie.indexOf(';', len); if(ePos == -1) ePos = document.cookie.length; return unescape(document.cookie.substring(len, ePos)); } function del_cookie(name, domain) { document.cookie = name+"=; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/; domain="+domain; location.href = '/'; } function del_cookie_hp(name) { document.cookie = name+"=; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/"; } function sendEmailMessage(frm) { var f = document.getElementById(frm); if(f.serialize) { f["_qs"].value = f.serialize(); } f.submit(); } function redirect(){ var cookie = getCookie("kijiji_my_ads"); if (cookie == null){ location.href = url+"/miei-annunci"; }else{ var t = url+ "/L/" +cookie; location.href = t; } } function removeHTMLTags(htmlString){ if(htmlString != '' && htmlString != 'undefined'){ var mydiv = document.createElement("div"); mydiv.innerHTML = htmlString; if (document.all) // IE Stuff { return mydiv.innerText; } else // Mozilla does not work with innerText { return mydiv.textContent; } }else return ''; } //comment function doBrowseSearching(form) { var path = "/"; var url_prepend = ''; var cat = form.categoria.value; var loc = form.dove.value.replace(' (provincia)',''); var filterCounter = 0; var url = ''; var bool = false; var txt = form._nkw.value; var txt = form._nkw.value.replace(/^\s*([\S\s]*)\b\s*$/, '$1'); // escaping some chars and remove html injection txt = removeHTMLTags(txt); txt = escape(txt); txt = txt.replace("%60",'\''); var missed = 'keo/ncau3dloem@#igrfjijemnaqwoemdp3872'; if(loc == "Tutta Italia") loc = ""; if (cat != '') path += cat + '/'; if (form.dove.name == "inputText"){ valueFormatted = loc.replace(/-/g, "/"); var customUrlPrepend = false; for(var i=0;i<dataLevel3.length;i++){ if(dataLevel3[i] != "undefined" && dataLevel3[i] != null){ var value1 = valueFormatted.toLowerCase(); var value1bis = loc.toLowerCase(); var value2 = dataLevel3[i].toLowerCase().replace(' (provincia)',''); if ((value1 == value2) || (value1bis == value2)) { if(data[dataLevel3[i]]>2) customUrlPrepend = true; bool = true; break; } } } if (bool == true && loc.indexOf('annunci-')<0){ if(customUrlPrepend){ if(valueFormatted.search('comune')<0){ //Get the parent city (the province) for(var obj in data) { if(data[obj] != null && data[obj] != 'undefined'){ var city = data[obj]; if(city.toString().toLowerCase() == value1 || city.toString().toLowerCase() == value1bis){ var provinceId = (obj & 0xFFFF0000); url_prepend = data[provinceId].toString().replace(' (provincia)','').replace(' (comune)','').replace(/\s/g, '-') + '-annunci-'; url_prepend = url_prepend.replace('/','-'); } } } }else{ url_prepend = valueFormatted.replace(' (comune)', '') + '-annunci-'; loc = loc.replace('%20(comune)', ''); loc = loc.replace(' (comune)', ''); } }else{ url_prepend = "annunci-"; } loc = loc.replace(/\s/g, '-'); }else if (loc != "" ){ document.getElementById("noresult").style.display = ""; document.getElementById("suggestBoxdove").style.display = "none"; return false; } }else if(loc.indexOf('annunci-')<0){ url_prepend = "annunci-"; } //if (loc != '') path += escape(cleanupdiacritics(url_prepend + loc.replace('/','-'))) + '/'; if (loc != '') path += escape(url_prepend + loc.replace('/','-')) + '/'; if (txt != '') path += txt + '/'; if (path == '' ) path = '/'; if (path == '/' || path == '//') { url += '/annunci/'; }else{ url += path.toLowerCase(); } document.cookie = "sort=; expires=Thu, 01-Jan-70 00:00:01 GMT" + "; path=/"; if(cat == form.old_category.value && (loc != form.old_where.value || form._nkw.value != '') ){ while(typeof(eval("form.filter_" + filterCounter)) != 'undefined'){ url += eval("form.filter_" + filterCounter+".value") + "/"; filterCounter++; } } url = url.replace('//','/'); if(url != missed.charAt(3)+missed.charAt(6)+missed.charAt(9)+missed.charAt(13)+missed.charAt(16)+missed.charAt(4)+missed.charAt(3)) location.href = url; return false; } function bookmarksite(title){ var url = document.location.href; if (window.sidebar) // firefox window.sidebar.addPanel(title, url, ""); else if(window.opera && window.print){ // opera var elem = document.createElement('a'); elem.setAttribute('href',url); elem.setAttribute('title',title); elem.setAttribute('rel','sidebar'); elem.click(); } else if(document.all)// ie window.external.AddFavorite(url, title); } function remove(id){ document.getElementById(id).style.display = "none" } var othersDivs = new Array(); function registerOther(id) { othersDivs[othersDivs.length] = id; } function showOthers(name, linkto, total){ for(var j=0; j<othersDivs.length;j++){ var i = othersDivs[j]; // var spi = $('span-'+ i); var spi = document.getElementById('span-'+ i); // var lit = $('link-'+ i +'-text'); var lit = document.getElementById('link-'+ i +'-text'); // var lii = $('link-'+ i +'-image'); var lii = document.getElementById('link-'+ i +'-image'); if (spi.id == name && (spi.style.display == "" || spi == null)){ spi.style.display="none"; lit.innerHTML=''; lit.innerHTML='Vedi tutti'; lii.innerHTML=''; lii.innerHTML='<img src="' + baseStaticUri + '/images/expand.jpg" alt="expand" width="11" height="11" >'; }else if(spi.id == name && spi.style.display == "none"){ spi.style.display=""; lit.innerHTML=''; lit.innerHTML='Chiudi'; lii.innerHTML=''; lii.innerHTML='<img src="' + baseStaticUri + '/images/collapse.jpg" alt="collapse" width="11" height="11" >'; }else if(spi.id != name && spi.style.display == ""){ spi.style.display="none"; lit.innerHTML=''; lit.innerHTML='Vedi tutti'; lii.innerHTML=''; lii.innerHTML='<img src="' + baseStaticUri + '/images/expand.jpg" alt="expand" width="11" height="11" >'; }else{ //nothing } } } /**************************** Auto complete Script ****************************/ function load_data(cat, value) { var track = false; dataLocation = ""; data = areas; if(value.search(/[^a-zA-Z 0-9]+/g) >= 0) return false; if (document.getElementById("dove").value.length < '1'){ document.getElementById("noresult").style.display = 'none'; document.getElementById("suggestBoxdove").style.display = "none"; document.getElementById('dove_tips').style.display = ""; return false; } document.getElementById("noresult").style.display = 'none'; document.getElementById("suggestBoxdove").style.display = ""; document.getElementById('dove_tips').style.display = ""; var track_index = 1; var level = 0 var index = 0; dataLevel1 = new Array(); dataLevel2 = new Array(); for(var obj in data) { if (typeof(obj) != 'number') { if (data[data[obj]] == 1) { dataLevel1[dataLevel1.length] = obj; } else { dataLevel2[dataLevel2.length] = obj; } } } dataLevel1.sort(); dataLevel2.sort(); dataLevel3 = dataLevel1.concat(dataLevel2); var index = 0; try{ var regex = new RegExp("^" + value, "i") }catch(e){ document.getElementById("suggestBoxdove").style.display = "none"; document.getElementById('dove_tips').style.display = ""; return false; } var second_level = false; /*for(var i=0;i<dataLevel3.length;i++){ document.write("<b>dataLevel3["+i+"] is </b>=>"+dataLevel3[i]+"<br>"); }*/ document.getElementById('suggestBoxdove').length = 0; var optionsL1 = new Array(); var optionsL2 = new Array(); var optionsL3 = new Array(); for(var i=0;i<dataLevel3.length;i++){ if (dataLevel3[i] != null && regex.test(dataLevel3[i])){ track = true; /** * NOT NEED - always show suggestion if(dataLevel3[i].toLowerCase() == value.toLowerCase()){ document.getElementById("suggestBoxdove").style.display = "none"; return false; } **/ var tmpOpt = new Option (dataLevel3[i], obj, true, false); switch(data[dataLevel3[i]]){ case 1: optionsL1.push(tmpOpt); break; case 2: optionsL2.push(tmpOpt); break; case 3: optionsL3.push(tmpOpt); break; } //index++; } } for(i=0;i<optionsL1.length;i++){ document.getElementById("suggestBoxdove").options[index] = optionsL1[i]; index++; } for(i=0;i<optionsL2.length;i++){ document.getElementById("suggestBoxdove").options[index] = optionsL2[i]; index++; } if(optionsL2.length>0) document.getElementById("suggestBoxdove").options[index-i].className = "separator"; for(i=0;i<optionsL3.length;i++){ document.getElementById("suggestBoxdove").options[index] = optionsL3[i]; index++; } if(optionsL3.length>0) document.getElementById("suggestBoxdove").options[index-i].className = "separator"; /*if (data[dataLevel3[i]] == "2" && second_level == false){ document.getElementById("suggestBoxdove").options[index].className = "separator"; second_level = true; }*/ if(track == false) { closeSuggestBox(); document.getElementById('dove_tips').style.display = "none"; //document.getElementById("noresult").style.display = ""; return false; } return true; } function closeSuggestBox() { document.getElementById("suggestBoxdove").style.display = "none"; document.getElementById("suggestBoxdove").innerHTML = ""; } function goToFirstListElement(e) { var keynum; if(window.event) // IE { keynum = e.keyCode; } else if(e.which) // Netscape/Firefox/Opera { keynum = e.which; } if (keynum == "40"){ document.getElementById("suggestBoxdove").selectedIndex = -1; document.getElementById("suggestBoxdove").focus(); } } function goToInputTextElement(e) { var keynum; if(window.event) // IE { keynum = e.keyCode; } else if(e.which) // Netscape/Firefox/Opera { keynum = e.which; } if (keynum == "38" && document.getElementById("suggestBoxdove").selectedIndex == 0){ document.getElementById("dove").focus(); } if (keynum == "13"){ document.getElementById("dove").value = document.getElementById("suggestBoxdove").options[document.getElementById("suggestBoxdove").selectedIndex].text; closeSuggestBox(); document.getElementById("dove").focus(); } } function clickToInputTextElement() { if(document.getElementById("suggestBoxdove").options[document.getElementById("suggestBoxdove").selectedIndex].text != null) { document.getElementById("dove").value = document.getElementById("suggestBoxdove").options[document.getElementById("suggestBoxdove").selectedIndex].text; } closeSuggestBox(); return false; } function afterOnblurInputText(){ if(document.getElementById("suggestBoxdove").style.diplay != "none" && document.getElementById("suggestBoxdove").selectedIndex >= -1){ }else{ closeSuggestBox(); } return false; } function afterOnblurDropDown(){ if(document.getElementById("suggestBoxdove").style.diplay != "none" && document.getElementById("suggestBoxdove").selectedIndex >= 0){ document.getElementById("dove").value = document.getElementById("suggestBoxdove").options[document.getElementById("suggestBoxdove").selectedIndex].text; closeSuggestBox(); }else{ closeSuggestBox(); } return false; } function _CheckValueAttribute(location, category){ var track1 = false; for(var obj in dataLocation) { if (obj != null){ var loc = document.getElementById(location); //var loc = $(location); if (dataLocation[obj] == loc.value){ track1 = true; } } } if (track1 == true){ return true; }else{ return false; } } /********************** FROM EAN ***************************/ function setCaptchaResp(val) { setOnLoad('CaptchaStr', val); } function setOnLoad(id, val) { var o = document.getElementById(id); if (o) o.value = val; else setTimeout("setOnLoad('" + id + "', '" + val + "');", 200); } /************************* FROM RECENTLY VIEWED ADS TPL********************************/ var rv_cookie_name = "recentlyViewed"; function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function delete_RV_All(){ createCookie(rv_cookie_name,"",-1); var rvb = document.getElementById('recently_view_box'); rvb.style.display = 'none'; /* rvb.setStyle({ display: 'none' });*/ } function delete_RV_Item(item_id){ var nameEQ = rv_cookie_name + "="; var ca = document.cookie.split(';'); var array = new Array(); var new_cookie_content = ""; for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0){ array = c.substring(nameEQ.length,c.length).split("%40%40"); for (var j = 0; j < array.length; j++) { if(array[j]!=item_id){ new_cookie_content += array[j]+"%40%40"; } } } } new_cookie_content = new_cookie_content.substring(0,new_cookie_content.length-6); if(new_cookie_content==""){ delete_RV_All(); }else{ createCookie(rv_cookie_name,new_cookie_content,30); /* var rvi = document.getElementById('rvitem_'+item_id); rvi.style.display = 'none'; */ var rv_item_list = document.getElementById('recently_view').getElementsByTagName('ol')[0]; var rv_item_list_elements = rv_item_list.getElementsByTagName('li'); var display_flag = false; for(var j=0;j<rv_item_list_elements.length;j++){ if(rv_item_list_elements[j].id == 'rvitem_'+item_id){ rv_item_list.removeChild(rv_item_list_elements[j]); }else if(rv_item_list_elements[j].style.display == 'none' && display_flag == false){ display_flag = true; rv_item_list_elements[j].style.display = 'block'; } } var rvic = document.getElementById('rv_item_counter'); rvic.innerHTML = array.length -1; } } function cleanupdiacritics(str) { var sec = 'ÀÁÂÃÄÅà áâãäåÒÓÔÕÕÖГ?òóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìГîïÙÚÛÜùúûüÑñ¦¨¾ÿý´¸'; var rep = ['A','A','A','A','A','A','a','a','a','a','a','a','O','O','O','O','O','O','O','o','o','o','o','o','o','E','E','E','E','e','e','e','e','e','C','c','D','I','I','I','I','i','i','i','i','U','U','U','U','u','u','u','u','N','n','S','s','Y','y','y','Z','z']; var resp = ''; for (var i = 0; i < str.length; i++) { if (sec.indexOf(str[i]) != -1) { resp += rep[sec.indexOf(str[i])]; } else { resp += str[i]; } } return resp; } function m_over (id) { var e = document.getElementById(id); /*e.style.color="#F00";*/ e.style.textDecoration="underline"; e.style.fontWeight="bold"; document.getElementById("italyMap").src = baseStaticUri + "/images/map_hover/"+id +".jpg"; return; } function m_out (id) { var e = document.getElementById(id); /*e.style.color="";*/ e.style.textDecoration=""; e.style.fontWeight=""; document.getElementById("italyMap").src = baseStaticUri + "/images/map-italy.jpg"; return; } function getStaticUrl (loc) { var k = document.getElementById('_nkw'); location.href = loc + k.value + "/"; } function base64Encode(str) { var _base64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; var sb = [], i = 0; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; while(i < str.length) { chr1 = str.charCodeAt(i++); chr2 = str.charCodeAt(i++); chr3 = str.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if(isNaN(chr2)) { enc3 = enc4 = 64; } else if(isNaN(chr3)) { enc4 = 64; } sb.push(_base64.charAt(enc1)); sb.push(_base64.charAt(enc2)); sb.push(_base64.charAt(enc3)); sb.push(_base64.charAt(enc4)); } return sb.join(""); } if(typeof(jQuery) != 'undefined') { jQuery.noConflict(); jQuery(document).ready(function() { // Here we will lazy load the images below the fold jQuery('img.lazyImage').jail(); }); } Да, если можно, кто понимает. подскажите. может есть еще что то лишнее в коде? без чего можно обойтись. Извиняйте что так много кода. Я новенький на сайте. Как лучше его было вставить?