473,695 Members | 2,305 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Intermittent image display problem within 179 image rollover

The following page simulates a pool cue and cue ball:


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:
=============== =============== =============== =============== =======
#ball {
position:absolu te;
visibility:hidd en;
#cuelyr {
position:absolu te;
visibility:hidd en;
#box {
position:absolu te;
visibility:hidd en;
window.status = ' ';
opera = (window.opera)? 1:0;
nn4 = (document.layer s)? 1:0;
ie = (document.all && !opera)? 1:0;
dom = (document.getEl ementById)? 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

(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 = createErrorHand ler(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.getEle mentById('loadi ngMsg').innerHT ML="";

function createErrorHand ler(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;

'<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.getEle mentById('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 + '"

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

cueball = lyr.style;
cueball.left = left;
cueball.top = top;
cueball.visibil ity = (nn4)? 'show':'visible ';
cueball.X = left + RADIUS;
cueball.Y = top + RADIUS;
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);

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('cue ball.move()',0) ;
})('grayball.gi f',350,205);

(function setCue() {
var lyr, rn, rads;
var toRads = Math.PI/180;
document.write( '<div id="cuelyr"><im g name="poolcue" src="cue0.gif"
if (nn4)
{ lyr = document.layers['cuelyr']; lyr.style = lyr; }
lyr = (ie)? document.all['cuelyr']:(dom)?
document.getEle mentById('cuely r'):null;
cue = lyr.style;
cue.distance = 1;
cue.rotation = 0;
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.halfLengt h + (s = RADIUS +
cue.distance))) ;
cue.top = round(cueball.Y - cue.halfLength +
cue.yNormal[cue.rotation]*(cue.halfLengt h + s));
cue.takeShot = function() {
releaseTrapping ();
cueball.Vx = -Vxn;
cueball.Vy = -Vyn;
setTimeout('cue .hide(); cueball.move()' , 100);
cue.reset = function() {
cue.distance = 1;
cue.rotation = 0;
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)*to Degs + 360:
atan2(dY,dX)*to Degs));
cue.setDistance (((currentDista nce = sqrt(dX*dX+dY*d Y)) -
startDistance)) ;
return false;

function trapEvents() {
if (nn4) {
document.captur eEvents(Event.M OUSEDOWN | Event.MOUSEUP |
document.onmous emove = function(e) { return MouseMove(e.pag eX,
e.pageY); }
document.onmous emove = (ie)? function() { return
MouseMove(event .clientX, event.clientY); } : function(e) { return
MouseMove(e.cli entX, e.clientY); }
document.onmous edown = function(e) {
cue.drag = 0;
var sqrt = Math.sqrt;
var dX, dY;
startDistance = sqrt((dX=mouseX-cueball.X)*dX +
return false;
document.onmous eup = function(e) {
cue.drag = 1;
Vxn = cue.distance * cue.xNormal[cue.rotation];
Vyn = cue.distance * cue.yNormal[cue.rotation];
cue.distance = 0;

function releaseTrapping () {
if (nn4) document.releas eEvents(Event.M OUSEDOWN | Event.MOUSEUP |
document.onmous emove = null;
document.onmous edown = null;
document.onmous eup = null;

function pageLoadHandler () {
cue.showing = 1;
cue.drag = 1;
cue.img = (nn4)? cue.document.im ages.poolcue : document.poolcu e;
cue.rotation = 0;
cue.visibility = (nn4)? "show":"visible ";
onload = (ie||nn4)? pageLoadHandler :pageLoadHandle r();

Apr 25 '06 #1
3 2296
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

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="#" onMouseOver="document.main.src='image2.jpg'"
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 -92px; }
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 place. Even better would be one where I can swap the menu image and display an image elsewhere on the page. Many thanks!
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: http://www.akujunkan.com/test/NavBar.html However, when I try to incorporate the javascript and code into another table, the rollover stops working: http://www.akujunkan.com/test/index.html
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 System.Web.UI.WebControls.Image Control or a HyperLink and Image Controls, but the onMouseOver and onMouseOut attributes must be in the <img> tag. If I were to use the HyperLink's ImageUrl property and add the attributes using the...
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 only on the first rollover. It seems that the image height and width become set to zero after the image is displayed once; or perhaps that the
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 yet to do proper testing on browser support. Method I:
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: block; width: 95px;
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.