473,241 Members | 1,756 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

Intermittent image display problem within 179 image rollover

The following page simulates a pool cue and cue ball:

http://members.aol.com/myscript/cue.html

Mouse cursor position around the cue ball determines where a roll-over
of 179 pool cue images is placed around the ball and which one of those
images is displayed. Each pool cue image is in a slightly different
orientation and the correct one is chosen to match the orientation of
the cursor around the ball. Holding down the left mouse button and
dragging the cursor away from the ball along the direction of the cue
then releasing the button makes a shot with the pool cue.

Here is the problem. With some displays of this page, I get a good
roll-over effect while moving my cursor around the ball. The pool cue
images change with cursor position in a smooth even way giving a good
animation of the cue changing orientations around the ball. However, at
other times I get a rough effect and it seems as if a delay is
happening maybe because some images are being downloaded again instead
of retrieved from the browsers cache. I'm guessing at this as the
explanation and don't really know why this is going on with some
displays of this page. Can anyone help in determining what is wrong?
Here is the code:
================================================== =================
<html>
<head>
<style>
#ball {
position:absolute;
visibility:hidden;
z-index:10;
}
#cuelyr {
position:absolute;
visibility:hidden;
z-index:5;
}
#box {
position:absolute;
visibility:hidden;
z-index:1;
}
</style>
</head>
<body>
<script>
window.status = ' ';
opera = (window.opera)? 1:0;
nn4 = (document.layers)? 1:0;
ie = (document.all && !opera)? 1:0;
dom = (document.getElementById)? 1:0;

cueLength = 200;
RADIUS = 20;
toDegs = 180/Math.PI;
VMIN = -0.75;
VMAX = 0.75;
cues = [];

if (!nn4 && !ie) document.write("<div id='loadingMsg'>Images
loading</div>");

(function imageLoader() {
for (i=0; i <= 358; i+=2) {
imgSRC = 'cue'+i+'.gif';
cues[i] = new Image();
cues[i].cnt = 0;
cues[i].onload = imagesToLoad(i);
cues[i].onerror = createErrorHandler(imgSRC);
cues[i].src = imgSRC;
}
})();

function imagesToLoad(i) {
return function () {
if ((i += 2) <= 358) window.status = (179 - (i>>1)) + ' images left
to load.';
else {
window.status = 'Done';
if (!nn4 && !ie) document.getElementById('loadingMsg').innerHTML="" ;
trapEvents();
}
}
}

function createErrorHandler(imgSRC) {
return function () {
this.src = (this.cnt++ < 3)? imgSRC : 'missing.gif';
}
}

(function setBox(left, top, width, height, border) {

if (!left || left < 0 ) left = 0;
if (!top || top < 0) top = 0;

document.write(
'<div id="box">' +
'<table cellpadding=0 cellspacing=0 border='+border+' width='+width+'
height='+height+'>' +
'<tr><td>&nbsp<\/td><\/tr><\/table><\/div>'
);

var lyr;

if (nn4) { lyr = document.layers['box']; lyr.style = lyr; }
else lyr = (ie)? document.all['box']:(dom)?
document.getElementById('box'):null;
var box = lyr.style;

box.left = left;
box.top = top;
box.visibility = (nn4)? 'show':'visible';

XMIN = left + border + RADIUS + 1;
XMAX = width + left - border - RADIUS;
YMIN = top + border + RADIUS + 1;
YMAX = height + top - border - RADIUS;
})(60, 30, 675, 400, 5);

(function setBall(imgSRC, left, top) {
if (!left || left < 0 ) left = 0;
if (!top || top < 0) top = 0;

document.write('<div id="ball"><img src="' + imgSRC + '"
border=0><\/div>');

if (nn4)
{ lyr = document.layers['ball']; lyr.style = lyr; }
else
lyr = (ie)? document.all['ball']:(dom)?
document.getElementById('ball'):null;

cueball = lyr.style;
cueball.left = left;
cueball.top = top;
cueball.visibility = (nn4)? 'show':'visible';
cueball.X = left + RADIUS;
cueball.Y = top + RADIUS;
cueball.Vx;
cueball.Vy;
cueball.isZero = function(x) {
return (x > VMIN && x < VMAX)? 1:0;
}
cueball.move = function() {
if (cueball.isZero(cueball.Vx) && cueball.isZero(cueball.Vy)) {
setTimeout('cue.reset()',500);
return;
}

var nextX = cueball.X + cueball.Vx;
var nextY = cueball.Y + cueball.Vy;

if (nextX <= XMIN) { cueball.X = XMIN; cueball.Vx *= -.98; }
else if (nextX >= XMAX) { cueball.X = XMAX; cueball.Vx *= -.98; }
else { cueball.X = nextX; cueball.Vx *= .98; }

if (nextY <= YMIN) { cueball.Y = YMIN; cueball.Vy *= -.98; }
else if (nextY >= YMAX) { cueball.Y = YMAX; cueball.Vy *= -.98; }
else { cueball.Y = nextY; cueball.Vy *= .98; }

cueball.left = cueball.X - RADIUS;
cueball.top = cueball.Y - RADIUS;

setTimeout('cueball.move()',0);
}
})('grayball.gif',350,205);

(function setCue() {
var lyr, rn, rads;
var toRads = Math.PI/180;
document.write('<div id="cuelyr"><img name="poolcue" src="cue0.gif"
border=0><\/div>');
if (nn4)
{ lyr = document.layers['cuelyr']; lyr.style = lyr; }
else
lyr = (ie)? document.all['cuelyr']:(dom)?
document.getElementById('cuelyr'):null;
cue = lyr.style;
cue.distance = 1;
cue.rotation = 0;
cue.drag;
cue.showing;
cue.halfLength = cueLength/2;
cue.xNormal = new Array();
cue.yNormal = new Array();
for(rn=0; rn <= 358; rn+=2) {
cue.xNormal[rn] = -Math.sin(rads = toRads*(rn - 90));
cue.yNormal[rn] = Math.cos(rads);
}
cue.setDistance = function(d) {
cue.distance = (d<0)? 0:(d>35)? 35:d;
}
cue.setRotation = function(r) {
r = (r % 2 != 0)? --r : r;
cue.rotation = (r > 358)? 0 : r;
}
cue.place = function() {
var round = Math.round;
var s;
cue.img.src = cues[cue.rotation].src;
cue.left = round(cueball.X - cue.halfLength +
cue.xNormal[cue.rotation]*(cue.halfLength + (s = RADIUS +
cue.distance)));
cue.top = round(cueball.Y - cue.halfLength +
cue.yNormal[cue.rotation]*(cue.halfLength + s));
}
cue.takeShot = function() {
releaseTrapping();
cueball.Vx = -Vxn;
cueball.Vy = -Vyn;
setTimeout('cue.hide(); cueball.move()', 100);
}
cue.reset = function() {
trapEvents();
cue.distance = 1;
cue.rotation = 0;
cue.place();
cue.show();
}
cue.show = function() {
cue.visibility = (nn4)? "show":"visible";
cue.showing = 1;
}
cue.hide = function() {
cue.showing = 0;
cue.visibility = (nn4)? "hide":"hidden";
}
})();

function MouseMove(x,y) {
var dX, dY;
var round = Math.round;
var atan2 = Math.atan2;
var sqrt = Math.sqrt;

if (cue.showing) {
mouseX = x; mouseY = y;
dX = x - cueball.X;
dY = y - cueball.Y;
if (cue.drag)
cue.setRotation(round((dY < 0)? atan2(dY,dX)*toDegs + 360:
atan2(dY,dX)*toDegs));
else
cue.setDistance(((currentDistance = sqrt(dX*dX+dY*dY)) -
startDistance));
cue.place();
}
return false;
}

function trapEvents() {
if (nn4) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP |
Event.MOUSEMOVE);
document.onmousemove = function(e) { return MouseMove(e.pageX,
e.pageY); }
}
else
document.onmousemove = (ie)? function() { return
MouseMove(event.clientX, event.clientY); } : function(e) { return
MouseMove(e.clientX, e.clientY); }
document.onmousedown = function(e) {
cue.drag = 0;
var sqrt = Math.sqrt;
var dX, dY;
startDistance = sqrt((dX=mouseX-cueball.X)*dX +
(dY=mouseY-cueball.Y)*dY);
return false;
}
document.onmouseup = function(e) {
cue.drag = 1;
Vxn = cue.distance * cue.xNormal[cue.rotation];
Vyn = cue.distance * cue.yNormal[cue.rotation];
cue.distance = 0;
cue.place();
cue.takeShot();
}
}

function releaseTrapping() {
if (nn4) document.releaseEvents(Event.MOUSEDOWN | Event.MOUSEUP |
Event.MOUSEMOVE);
document.onmousemove = null;
document.onmousedown = null;
document.onmouseup = null;
}

function pageLoadHandler() {
cue.showing = 1;
cue.drag = 1;
cue.img = (nn4)? cue.document.images.poolcue : document.poolcue;
cue.rotation = 0;
cue.place();
cue.visibility = (nn4)? "show":"visible";
}
onload = (ie||nn4)? pageLoadHandler:pageLoadHandler();
</script>
</body>
</html>

Apr 25 '06 #1
3 2270
I can't see whay the image would be downloaded again. Are you sure it's
not just a double buffer problem, that is to say, it's taking a while
drawing on the screen? Because that's all I notice, I'm not sure if
it's fixable.

I like what you've done. I think the table plays a bit slow though!

Apr 25 '06 #2
Can you explain in more detail what the "double buffer problem" is.
Also, I've noticed that a reload can at times fix the problem with it
taking a while to draw on the screen. Other times it works great with
the first download??? Thanks Fletch.

Apr 25 '06 #3
Well for me it's always been fine.

Double buffering is a technique for stopping flickering. Do a google
for it. The problem is I see no way to do a double buffer in javascript.

Apr 25 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Richard | last post by:
I'm beginning to undertake php for the fun of it. Working on a problem I hope can be solved in php. Basically what I have is this: <body> <img name="main" src="image1.jpg"> <a href="#"...
1
by: nick | last post by:
I have the following code: <style> #item1 { DISPLAY: block; BACKGROUND: url(ProjMenuImgs/ProjBtn.gif) no-repeat 0px 0px; WIDTH: 87px; HEIGHT: 94px; } #item1:hover { background-position: 0...
2
by: Cynthia | last post by:
I'm looking for javascript code that when I mouse over a menu item will display a picture elsewhere on the page. I know it exists, but the ones I've found so far just swap out the menu item in...
5
by: jedbob | last post by:
I used Adobe Imageready to build a simple rollover navigation bar, where the text will change color on a mouse over. The working example can be found at:...
8
by: Nathan Sokalski | last post by:
I have several System.Web.UI.WebControls.HyperLink Controls which I want to display as rollover images. I know how to make these manually using the <a> and <img> tags or the <a> tag and a...
1
by: fredo | last post by:
Hi folks -- problem demo: http://www.simple-nude.com/main-2-demo.html In IE5.x and IE6, I want to display an image when the user rolls over a text link. The image does indeed display, but...
2
by: Casimir | last post by:
I am looking into making pure CSS image rollovers. Do you have any clever (and robust) CSS rollover-tricks? Or links to such "in the wild"? I have figured out two methods for this, but have...
8
by: mrking | last post by:
Hello, I have a test site running at http://artbymichaelking.com/DS/ As you can see with the navigation I have the image rollover. I do this with CSS via: .companyrollover a{ display:...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.