There is a script for substitution and pre-images. There is a map area, with the coordinates of the necessary links. In chrome, opera, safari, the substitution of images takes place clearly. In the Mozilla, with the first mouse on any link with the map (and, accordingly, the first substitution of the image in a given area), the background image flickers very clearly. On a subsequent tip, the flicker disappears until you clear the browser's cache. How to solve this problem with Mozilla? Maybe the preload isn't working? As an option, hidden divs with these images were created to also load, but it does not help. The map was created in fireworks, the substitution scripts were also used from there (standard Drimiver's).

Js:

function ChangeImg() { if (document.images) { eval("document." + ChangeImg.arguments[0] + ".src=('" + ChangeImg.arguments[1] + "')"); } } function preload() { if (document.images) { var imgsrc = preload.arguments; arr = new Array(imgsrc.length); for (var j = 0; j < imgsrc.length; j++) { arr[j] = new Image; arr[j].src = imgsrc[j]; } } }

HTML:

 <body onload="preload('img/bus_s3.png','img/bus.png','img/bus_s4.png', 'img/bus_s5.png','img/bus_s6.png','img/bus_s2.png','img/bus_s7.png', 'img/bus_bg.png')"> <img name="bus_bg" src="img/bus_bg.png" width="1175" height="457" id="bus_bg" usemap="#m_bus_bg" alt="" /> <div class="bus_bg"> <map name="m_bus_bg" id="m_bus_bg"> <area shape="poly" coords="81,13,91,11,104,10,114,11,119,15,120,21,120,32,120,40,118,49,111,53,99,53,90,53,84,52,78,48,77,41,78,31,78,21,79,15,81,13" href="#speakers" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s2.png')" onmouseout="ChangeImg('bus_bg', 'img/bus_bg.png')" /> <area shape="poly" coords="447,13,457,11,469,10,480,11,484,15,486,21,486,32,486,40,484,49,477,53,465,53,455,53,450,52,444,48,443,41,443,31,443,21,445,15,447,13" href="#speakers" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s2.png')" onmouseout="ChangeImg('bus_bg','img/bus_bg.png')" /> <area shape="poly" coords="826,12,836,10,848,9,859,10,863,14,865,20,865,31,865,39,863,48,856,52,844,52,834,52,829,51,823,47,822,40,822,30,822,20,824,14,826,12" href="#speakers" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s2.png')"onmouseout="ChangeImg('bus_bg','img/bus_bg.png')" /> <area shape="poly" coords="1095,34,1095,44,1098,55,1104,66,1112,73,1123,79,1135,81,1143,80,1152,77,1163,70,1168,63,1172,54,1175,43,1175,32,1171,23,1165,13,1154,5,1146,2,1139,0,1130,0,1121,3,1113,7,1105,14,1099,21,1096,27,1095,34" href="#server" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s3.png')" onmouseout="ChangeImg('bus_bg','img/bus_bg.png')" /> <area shape="poly" coords="1001,139,1001,145,1000,157,1000,174,1000,187,1002,191,1010,193,1016,192,1020,192,1023,195,1023,197,1024,201,1026,204,1034,206,1039,206,1043,205,1046,200,1046,200,1049,194,1051,191,1056,191,1065,192,1073,192,1077,192,1079,189,1080,170,1080,156,1080,152,1084,146,1085,141,1086,134,1085,130,1083,126,1079,123,1074,120,1067,120,1064,120,1060,122,1055,125,1053,129,1053,129,1051,133,1051,136,1048,136,1035,137,1024,137,1013,138,1008,138,1003,138,1001,139" href="#leptop" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s4.png')" onmouseout="ChangeImg('bus_bg','img/bus_bg.png')" /> <area shape="poly" coords="1035,281,1033,275,1032,270,1032,263,1032,257,1032,250,1035,249,1040,249,1048,249,1057,249,1059,251,1060,257,1059,265,1059,272,1057,280,1053,282,1048,283,1048,286,1048,288,1045,289,1043,288,1043,285,1043,283,1042,283,1038,282,1035,281" href="#load" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s5.png')" onmouseout="ChangeImg('bus_bg','img/bus_bg.png')" /> <area shape="poly" coords="878,248,878,251,878,255,878,261,878,267,878,275,879,285,880,289,886,292,894,292,901,292,909,293,916,293,922,292,925,290,928,287,929,282,928,272,929,260,929,250,927,245,923,242,912,241,898,241,890,241,885,241,882,243,878,248" href="#amplifier" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s6.png')" onmouseout="ChangeImg('bus_bg','img/bus_bg.png')" /> <area shape="poly" coords="793,188,792,183,792,179,792,173,792,167,792,149,792,135,792,130,794,127,803,126,827,126,852,126,867,126,878,127,880,129,880,131,881,150,881,168,880,184,879,188,878,189,878,189,867,190,856,190,849,190,849,196,852,197,854,200,851,203,837,203,823,204,819,201,819,197,821,196,823,196,823,195,823,192,823,191,821,189,814,189,805,189,794,189,793,188" href="#monitor" class="open_bus_pop" alt="" onmouseover="ChangeImg('bus_bg','img/bus_s7.png')" onmouseout="ChangeImg('bus_bg','img/bus_bg.png')" /> </map> </div> </body>

    1 answer 1

    This script helped. When loading a page, the image in Mozilla stopped flickering. However, it starts to flicker after some time, if the page is not updated for a long time, but these are already nuances.

     <script> function init() { // quit if this function has already been called if (arguments.callee.done) return; // flag this function so we don't do the same thing twice arguments.callee.done = true; // preload images preload([ 'img/bus_bg.png', 'img/bus_s2.png', 'img/bus_s3.png', 'img/bus_s4.png', 'img/bus_s5.png', 'img/bus_s6.png', 'img/bus_s7.png' ]); }; /* for Mozilla */ if (document.addEventListener) { document.addEventListener("DOMContentLoaded", init, false); } /* for other browsers */ window.onload = init; function preload(images) { if (typeof document.body == "undefined") return; try { var div = document.createElement("div"); var s = div.style; s.position = "absolute"; s.top = s.left = 0; s.visibility = "hidden"; document.body.appendChild(div); div.innerHTML = "<img src=\"" + images.join("\" /><img src=\"") + "\" />"; var lastImg = div.lastChild; lastImg.onload = function() { document.body.removeChild(document.body.lastChild); }; } catch(e) { // Error. Do nothing. } } </script>