J
JB
Hi everybody.
I've a strange problem with preload of images.
I've an html page that's showing a cinema's venue. I build the page
dynamically with a <script></script> section included in <body>
Something like this.
.....
for (var i=0; i< arrID.length-1;i++) {
var st = parseInt(arrSt);
var src;
var clickEvent;
var extraStyle;
if (st == 2) {
src="img/poltrona_rossa.gif";
events = "";
extraStyle= "";
} else {
src="img/poltrona_verde.gif";
events = 'onclick="seleziona(this);" onmouseover="highlight(this,true);"
onmouseout="highlight(this,false)"';
extraStyle="cursor:hand;cursor
ointer;";
}
document.writeln('<img src="'+src+'" id="'+ arrID +'" title="'+
arrID + '" status="'+st+'" style="position:absolute;visibility:hidden;'+
extraStyle+'" '+events+'>');
}
I've added this code in <head> section to preload the images that identifies
all 3 possible status (free, sold, selected)
var ptV = new Image();
ptV.src = "img/poltrona_verde.gif";
var ptG = new Image();
ptG.src = "img/poltrona_gialla.gif";
var ptR = new Image();
ptR.src = "img/poltrona_rossa.gif";
and the highlight function that is called whe mouse enter/exit on an image
is like this:
function highlight(obj,mode) {
if (mode) {
if (obj.getAttribute("status") == "0") obj.src =
"img/poltrona_gialla.gif";
} else {
if (obj.getAttribute("status") == "0") {
obj.src = "img/poltrona_verde.gif";
}
}
}
All is working well but when the mouse pass over an image, I can see the
hourglass to appear while loading the "selected" image (switching between
the normal image and the selected image and vice-versa)
I thought that since i've preloaded all the images, this "reloading"
shouldn't happen...what's wrong??
Any help would be very appreciated...
JB
I've a strange problem with preload of images.
I've an html page that's showing a cinema's venue. I build the page
dynamically with a <script></script> section included in <body>
Something like this.
.....
for (var i=0; i< arrID.length-1;i++) {
var st = parseInt(arrSt);
var src;
var clickEvent;
var extraStyle;
if (st == 2) {
src="img/poltrona_rossa.gif";
events = "";
extraStyle= "";
} else {
src="img/poltrona_verde.gif";
events = 'onclick="seleziona(this);" onmouseover="highlight(this,true);"
onmouseout="highlight(this,false)"';
extraStyle="cursor:hand;cursor
}
document.writeln('<img src="'+src+'" id="'+ arrID +'" title="'+
arrID + '" status="'+st+'" style="position:absolute;visibility:hidden;'+
extraStyle+'" '+events+'>');
}
I've added this code in <head> section to preload the images that identifies
all 3 possible status (free, sold, selected)
var ptV = new Image();
ptV.src = "img/poltrona_verde.gif";
var ptG = new Image();
ptG.src = "img/poltrona_gialla.gif";
var ptR = new Image();
ptR.src = "img/poltrona_rossa.gif";
and the highlight function that is called whe mouse enter/exit on an image
is like this:
function highlight(obj,mode) {
if (mode) {
if (obj.getAttribute("status") == "0") obj.src =
"img/poltrona_gialla.gif";
} else {
if (obj.getAttribute("status") == "0") {
obj.src = "img/poltrona_verde.gif";
}
}
}
All is working well but when the mouse pass over an image, I can see the
hourglass to appear while loading the "selected" image (switching between
the normal image and the selected image and vice-versa)
I thought that since i've preloaded all the images, this "reloading"
shouldn't happen...what's wrong??
Any help would be very appreciated...
JB