Preserved Topic: Following the Cursor

I have been searching for hours now trying to find a tute on how I can make an image follow the user's cursor. Sure, I find plenty of cheesy prefab scripts with little balls chasing it around, but I want to learn--from the beginning--how to create similar effects. Trying to read and understand the downloadable scripts doesn't help.

What I have in mind is actually a small graphic in a small area mimicking the movement of the user's cursor in a larger area on a layer above it. Can anyone help me understand the very basics in following the cursor?

Thanks

Sure, why not.

First you have to understand "event capturing". This is when the browser senses you doing something and reacts to it. In this case, we will want to capture the "mouse move" event, so that we can run a peice of code every time the mouse is moved.

Here's the code to capture events:

(in IE)
document.onmousemove = GetMousePos;

(in NN)
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=GetMousePos;

This tells the browser that whenever the mouse is moved, the function GetMousePos() should be called.

So then you have to define GetMousePos. Here's what I do:

var mx = 273, my = 250;
function GetMousePos(e)
{
    if (IE)
    {
        mx = event.x;
        my = event.y;
    }
    else if (NN)
    {
        mx = e.pageX;
        my = e.pageY;
    }
}

The variables mx and my will now always hold the x and y coordinates of the mouse. In IE, these coordinates are obtained from the <i>event</i> object. In NN, the coordinates are obtained from a similar object which was passed to the function.

You can then use the setTimeout() and/or setInterval() functions to do things with other objects that will use the mx and my variables.

I hope this was simple enough to understand. If you know JavaScript and the basics of DHTML, it should be. If you know JavaScript but not DHTML, then you need to learn DHTML, which will help you to learn how to move objects around. If you don't yet know any JavaScript, then you'll have to spend some time learning that before you can do advanced things like this.

hope that helps!

-Slime

"Windows: Just another pane in the glass."

[This message has been edited by Slime (edited 21-07-2000).]

I believe that actually made some sense to me, thanks. I am just beginning to understand Javascript, and learning DHTML is what got me started on this little project.

Just one question: In "var mx = 273, my = 250;" why did you choose those values specifically?

Also, as I understand it, this is a way to capture the position of the cursor in the document area, correct? (i.e. browser window or frame) What would be the difference in capturing its position on a layer? Can that be done?

I guess that's two questions...

Whoops, the mx and my were preset to 273 and 250 since I just copied the code off my home page; you can preset those to anything you want. I would recommend presetting them to something, otherwise they will be undefined (and act as zero) until the mouse goes onto the page.

Let's see. Before I explain how to capture events for a specific layer, let me explain the different event models that IE and NN use.

IE uses what's called "event bubbling". This means that when there's an event on something, such as the mouse moves over a paragraph of text, it checks to see if that object (the paragraph tag) has an onmouseover function defined. If not, the event "bubbles up" to the next object - the object that the paragraph is contained in, which may be a div tag. If that div tag has an event handler, it will run that funcion. Either way, it will keep on going up. If at any time you want the event to stop bubbling, then you have to set event.cancelBubble = true. It will eventually hit the window object and stop there.

So in the above code that I gave you, if there's an event anywhere, it will simply bubble up to the document object which catches it. It then runs the GetMousePos function, and continues to bubble up to the window object, which has no event handler, so nothing happens, and stops there.

So, in IE, if you want a layer to capture the event, then you simply say:

document.all.mylayer.onmousemove = GetMousePos();

Hopefully, the event object will then hold the mouse x and y values *relative* to the upper-left corner of the layer.

------

In NN, everything works exactly the opposite way.

Whenever there's an event, it starts at the window object and "trickles" downward towards the object it happened at. In the example I used before, the mousemove event will start at the window object, then trickle down to the document object, then the div tag, and then the paragraph tag that it happened on. (please keep in mind, however, that this actually won't happen in NN, since it is not sophisticated enough to capture events on things as simple as paragraph tags, I don't think. It will probably stop at the document object or something. I'm a bit shakey on this.)

So, if you want to capture an event on its way down this ladder, then you take the object you want it to stop at (in our previous case the window object) and say window.captureEvents(Event.MOUSEMOVE); - there's a bunch of different things like Event.MOUSEDOWN and Event.MOUSEUP and Event.RESIZE and Event.KEYPRESS, and a whole bunch of other ones. You then set that object's onmousedown to the function: window.onmousedown = GetMousePos; Notice that when you are using a function like this, you don't use the () parenthesis - that would cause it to actually run the function.

So, if you want to capture the event on a layer, say:

document.mylayer.captureEvents(Event.MOUSEDOWN);
document.mylayer.onmousedown = GetMousePos;

And hopefully, once again, the mouse coordinates will be given relative to the upper left hand corner of the layer.

Does that all make sense? I'm not 100% sure it will work; I took most of this out of my JavaScript book, not from personal experience. Again, hope it helps!

-Slime

"Windows: Just another pane in the glass."

[This message has been edited by Slime (edited 21-07-2000).]

Whoa, you replied while I was trying to get my example up. I figured I would show what I was working on and what my final intent is.

At http://www.bigwaste.com/asylum/pearl you can see a new home page I'm working on. What I want to happen is, as the cursor moves around the screen, a reflection of the cursor moves around on the pearl. If I can get it to work, I think it will be rather nifty. (I've put the "Big Waste" title on its own layer because I want the reflection image to move underneath it.)

Now, rather than just following the cursor exactly--that wouldn't be realistic behavior of a reflection on a sphere--I want the reflection to move inside an area proportionate to a larger area in which the cursor is moving.

Here's a pretty bad animation of approximately what I'm trying to do: http://www.bigwaste.com/asylum/bad_ani.gif

The two will meet in the center, but otherwise move proportionately in their own spaces. I know it'll take some tweaking to get it to look just right, but that's generally what I'm hoping to do.

You know what? That's a really really cool idea. Looks tough, though.

Have you worked at all with 3D graphics? If you want, you can actually calculate the exact position of the highlight on the pearl, although it would take some figuring. But, you might be able to do it realistically with a lot of approximation.

How good are you at math? Looks like a lot of it will be necessary.

Hold on a minute. I'm going to real quick make a graphic that will help figure this out...

Here you go:



The sphere has a radius of 1 unit. The box is two units away from the center of the sphere. The camera is 4 units away from the center of the sphere. In the sphere, you can see the box reflected (I made it so that the box can only be seen in the reflection, so it doesnt matter that it is inbetween the sphere and camera). I marked the points of the box with black dots. This should help to figure out how the cursor's position should be "reflected" onto the sphere. See?

All right, before I get ahead of myself, let's just see if I can get an image to move like I want it to. I've taken what you've given me, and have come up with this:

<SCRIPT LANGUAGE="JavaScript">

browserName = navigator.appName.substring(0,8);
var NN = (browserName == "Netscape");
var IE = (browserName == "Microsof");

if (NN) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=GetMousePos;

var mx = 111, my = 111;
function GetMousePos(e)
{
if (NN)
{
mx = e.pageX;
my = e.pageY;
}
if (IE)
{
mx = event.x;
my = event.y;
}
moveBall()
}

function moveBall()
{
if (NN)
{
document.layers.ball.left = mx;
document.layers.ball.top = my
}
if (IE)
{
document.all.ball.left = mx;
document.all.ball.top = my
}
}

</SCRIPT>

Now, to my surprise, I actually got this to work fairly easily--in Netscape, anyway. But, in IE, the ball just sits there. To try it yourself, go to http://www.bigwaste.com/asylum/ball.html

Can you explain to me why NN pays attention and IE doesn't? And how I can smack IE around a bit to make it listen to me?

Now, why in the world do my extra spaces always disappear? I can never get my scripts to indent.

Slime!!!

You've got half a tutorial for Gurusnetwork already written here!! Can I put you down for a cursor tracking dHTML tutorial?? It almost even makes sense to me, a graphics weenie!!

You've got that pretty darn close, WarMage. For one thing, although it works as you have it, you can change "document.layers.ball.left" to "document.ball.left" if you want, under the NN section.

As for IE, you want this:

document.all.ball.style.left
instead of
document.all.ball.left

Also, in IE, the .left property is meant to be a string: this is whatever you would have in the style sheet. You may set it to "30px" or something. If you want to use a number instead of a string (as most people often do) then use the .pixelLeft property instead.

SO... change the IE part to this:

document.all.ball.style.pixelLeft = mx;
document.all.ball.style.pixelTop = my;

While I'm at it, I might as well say that putting an image right underneath the cursor will prevent someone from clicking anything on the page; just keep that in mind.

(Oh, and the reason your scripts dont indent is that HTML takes any amount of white space and turns it into a single space. You can put hundreds of tabs, spaces, and return characters, and it will replace it with a single space. The forum automatically puts line breaks where we hit Enter in our post, but other than that the standard rules of HTML apply. To force extra spaces, you need to say &amp;nbsp; , like this:

&nbsp;&nbsp;&nbsp;&nbsp;there are four &amp;nbsp; 's before this.)

Heh, as to making a tutorial out of this, it does require a lot of background knowledge (lots of JavaScript, lots of DHTML), but sure, this can be converted into one!

-Slime

"Windows: Just another pane in the glass."

I'll assume you were talking to me, not WarMage. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Everything you said makes sense--I figured it was something in the syntax. It's all those little details I need to learn.

Regarding the image under the cursor, good point. But, of course, that was only an example I was using to try to learn what I was doing. In my final design, the moving image shouldn't even invade any clickable areas.

Re: spaces. A-ha! I didn't even think of that. The weird thing, though, is that it isn't even leaving the first space.

I'm going to try what you've shown me now and see how it works out...

ARRRGH! I'm so close!
http://www.bigwaste.com/asylum/pearl/

OK, so I can capture the mouse movement in the window and move the reflection layer within its containing layer. (Keep in mind the reflection image is currently black to make it easier to see.) However, when I try to capture the movement of the mouse within a layer, I get errors.

After failing to capture the nested layer I wanted, I simplified it to the first layer until I figured out the problem:

--------
if (NN) document.layout.captureEvents(Event.MOUSEMOVE);
if (NN) document.layout.onmousemove = GetMousePos;

if (IE) document.all.layout.onmousemove = GetMousePos;
--------

In NN, I get "document.layout has no properties."
In IE, I get "document.all.layout is not an object."

I assume there's a really stupid reason this isn't working, but I can't seem to figure it out. The layer in which I'm actually trying to capture the movement is cursorMap. (It is centered with the reflection's containing layer and is proportionate to it so that the reflection will act in accordance with the cursor. All I'll have to do is multiply it by .555! That is, if I can capture the movement within it.)

Incidentally, in the part of the script that moves the reflection, I can refer to it for IE like this:

document.all.reflection.style.left

But, for NN it seems that I have to call it like this:

document.layout.document.container.document.reflection.left

I got that out of a book, but it seems really long-winded. Is there a short way to do that? "document.layout.container.reflection.left" didn't work.

Thank you for your patience with this patient...

Hey Wes,

Couple of things. The document.blah.document.blah.... Is required in Netscape for Nested DIV's (DIVs within DIVs)
IE makes up for this with the 'all'. I don't have a great solution for this problem, more of a workaround. I'm not familiar with tracking within a particular Layer or DIV I usually just track the whole shebang. and then only monitor certain areas.
Like so:
if ((mx > 200) && (mx < 50)){
do this
}

Since you are placing everything absolutely this should work no prob, though you may need to figure out some sizes and what-not.

In regard to the errors, JS does not recognize stuff just by default (in otherwords if you want the width of document.all.myLayer.style.left, you need to declare this in your script before trying to grab it) The errors you are experiencing are usually related to this kind of issue


Walking the Earth like Kane

Just a correction, bitdamaged... I don't think he'll just be able to do the technique you mentioned, because although the main layer is absolutely positioned, it's top is at 30% - not a pixel value, unfortunately. That's what I usually do too.

(That may actually be the problem; try just changing 30% to 0 or something, see what happens.)

I'll come back to this later and try to figure out the problem.

hmm.. yep didn't spend to much time on the code so if it is percentage based there are problems



Walking the Earth like Kane

I can tell you how to approach the problem. But I can't do it myself! (I can't find the correct DOM objects, and I haven't got a book to tell me!) You need to take a step back, and look if there's a simpler way. As is usually the case, there is!

Instead of trying to find the cursor's position within a DIV, and then try and translate that into another position inside a different DIV, all you need to do is calculate where the center of your circle is! (That's the part I don't know how to do.)

In IE, to calculate the position of the center of the circle you'll have to do something like:

x_center = document.all.spherelayername.style.left + (document.all.spherelayername.width/2);
y_center = document.all.spherelayername.style.top + (document.all.spherelayername.height/2);

(only that doesn't quite work for me. If you have a book, it should tell you how to fetch these values.) Then you can calculate how far away from the center of the circle the cursor is:

x_cursor_distance = mx - x_center;
y_cursor_distance = my - y_center;

If the cursor is above the center of the circle, y_cursor_distance will be -ve, and if the cursor is below the center, y_cursor_distance will be +ve! Simple right?

Now all you have to do is to position your shadow layer at say 10% of the cursor distance from the center of the circle. So you can say:

document.all.shadowlyrname.style.left = Math.round(x_center + x_cursor_distance/10);
document.all.shadowlyrname.style.top = Math.round(y_center + y_cursor_distance/10);

You can of course change that 10 to whatever you want, depending on how fast you want the shadow to move.
If you ever get a situation where the shadow falls off the edge of the sphere, (just a simple comparison to check for that), then all you have to do is to is:

document.all.shadowlyrname.style.visibility = "hidden";

Just put all of that calculation inside your 'moveReflection()' function. Simple innit! No need for any nested DIVs (uyick!). I think it will work better and simpler if you put the shadow layer seperately.

Fab idea though! Can I nick it, and use it on my own home-page? (when I finally get round to doing it in 10 year's time that is)

osh

half this game is ninety percent mental...

I've managed to make a very simple version of what I think you want. It even works in Netscape (4.72)!!!
I use hard-coded numbers though. You'll have to figure out some of these numbers dynamically since you're working with percentages and complicated things like that!

Good luck, and I hope this helps you! Don't forget to tell us when you've got it finished! I want to see it!


<HTML>
<HEAD>
<TITLE>Clever Shadow</TITLE>


<STYLE TYPE="text/css">

#circlelay {
position:absolute;
top:200px;
left:400px;
z-index:1; }

#shadowlay {
position:absolute;
left: 121px;
top: 129px;
z-index:2;
visibility:hidden; }

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

browserName = navigator.appName.substring(0,8);
var NN = (browserName == "Netscape");
var IE = (browserName == "Microsof");

if (NN)
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = GetMousePos;

var mx = 0, my = 0;

function GetMousePos(e)
{
if (NN)
{
mx = e.pageX;
my = e.pageY;
}
else if (IE)
{
mx = event.x;
my = event.y;
}
moveReflection();
}

function moveReflection()
{
var x_center=550; y_center=350;

x_offset = mx - x_center;
y_offset = my - y_center;

x_shad_offset = Math.round(x_offset/2);
y_shad_offset = Math.round(y_offset/2);

x_shadow = x_shad_offset + x_center -10;
y_shadow = y_shad_offset + y_center -10;

if (x_shadow<400 &#0124; &#0124; x_shadow>700 &#0124; &#0124; y_shadow<200 &#0124; &#0124; y_shadow>500)
{
if (NN)
document.shadowlay.visibility = "hidden";
else
document.all.shadowlay.style.visibility = "hidden";
}
else if (NN)
{
document.shadowlay.visibility = "visible";
document.shadowlay.left = x_shadow;
document.shadowlay.top = y_shadow;
}
else if (IE)
{
document.all.shadowlay.style.left = x_shadow;
document.all.shadowlay.style.top = y_shadow;
document.all.shadowlay.style.visibility = "visible";
}
}

</SCRIPT>

</HEAD>

<BODY>
<DIV id="circlelay"><IMG src="circle.gif" width=300 height=300></DIV>
<DIV id="shadowlay"><IMG src="shadow.gif" width=20 height=20> </DIV>
</BODY>
</HTML>

osh

half this game is ninety percent mental...

Hey, guys, thanks again for the help. Took the day off yesterday, but I'll try to get back at this again today and try everything you've suggested.

Osh - feel free to use the concept. I'd like to see someone take it to the next step. But it may take me that ten years to finish this first step. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

OK, I decided to scrap the "30%" bit and just go with a hard number. Made it a lot easier. But, I still couldn't seem to make the original technique work the way I wanted it to.

I decided to try Osh's technique and I gotta say, Osh, that works wonderfully. I guess I'm just not that good at coming up with mathematical equations like that. I can figure out what I want something to do, but I have trouble communicating it in numbers. But, having it written out like that, I can make total sense of it.

I've replaced the reflection image and added another layer to mask the reflection in the shadow around the pearl. You can take a look at it at http://www.bigwaste.com/asylum/pearl/index.html to see how it looks.

Now I'm off to try swapping out the reflection with a smaller one as it gets closer to the edge. Ooh! And I could even create a more accurate reflection of an arrow and another of a hand and swap them out when you roll over one of the links! Woohoo!

Thanks, guys! I'll let you know when I've done some more work on this.

Wow - that looks really cool! BTW - if you still want the interface centered on the browser window, do this:

(index.html contains this <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

<frameset cols="*,INTERFACEWIDTH,*" border="0">
&nbsp;<frame src="border.html" scrolling="no">
&nbsp;<frameset rows="*,INTERFACEHEIGHT,*" border="0">
&nbsp;&nbsp;<frame src="border.html" scrolling="no">
&nbsp;&nbsp;<frame src="interface.html" scrolling="no">
&nbsp;&nbsp;<frame src="border.html" scrolling="no">
&nbsp;</frameset>
&nbsp;<frame src="border.html" scrolling="no">
</frameset>

Then the interface window will be centered on the screen at all times.

The one problem I see in your interface, which isn't *huge*, but I would attempt to fix it if I were you, is that the reflection is unrealistic - if the object that was reflecting the cursor were a box, then it would be correct. Instead, it's a sphere, so it behaves differently. Remember that picture I put up earlier in the thread? The square box was reflected as a very rounded rectangle. I'm not sure how to simulate this effect, you may not want to try it. it's up to you.

Yes, yes, yes! I know Slime! The solution I came up with is only a simple, quick, and rough approximation of how the reflection should move. I realise this.

What we really need is this:
When the mouse cursor moves in a straight line, the shadow should move along the shpere behind it in a curved motion.
That is quite advanced computer graphics. Not that I'm giving up yet! This problem is quite interesting!

I have come up with a slightly more (not very much more) realistic example. In this one, the shadow moves slower, the further away the cursor is from the sphere. (Just change the value of 'Step' to suit your own requirements.)

function moveReflection()
{
var x_center=223; y_center=223;
var Step = 40;
var x_offset_remaining, y_offset_remaining, i=2;
var x_neg =false, y_neg =false;
var x_refl_offset =0, y_refl_offset =0;

x_offset = mx - x_center;
y_offset = my - y_center;

if (x_offset < 0)
{
x_neg = true;
x_offset_remaining = -x_offset;
}
else
x_offset_remaining = x_offset;

if (y_offset < 0)
{
y_neg = true;
y_offset_remaining = -y_offset;
}
else
y_offset_remaining = y_offset;

while (x_offset_remaining > 0 &#0124; &#0124; y_offset_remaining > 0)
{
if (x_offset_remaining > Step)
{
this_x = Step;
x_offset_remaining -= Step;
}
else
{
this_x = x_offset_remaining;
x_offset_remaining = 0;
}

if (y_offset_remaining > Step)
{
this_y = Step;
y_offset_remaining -= Step;
}
else
{
this_y = y_offset_remaining;
y_offset_remaining = 0;
}

x_refl_offset += Math.round(this_x/i);
y_refl_offset += Math.round(this_y/i);
i++;
}
if (x_neg)
x_refl_offset = -x_refl_offset;
if (y_neg)
y_refl_offset = -y_refl_offset;

x_refl = x_refl_offset + x_center -7;
y_refl = y_refl_offset + y_center -6;

if (x_refl<111 &#0124; &#0124; x_refl>317 &#0124; &#0124; y_refl<112 &#0124; &#0124; y_refl>318)
{
if (NN) document.reflection.visibility = "hidden";
else document.all.reflection.style.visibility = "hidden";
}
else if (NN)
{
document.reflection.visibility = "visible";
document.reflection.left = x_refl;
document.reflection.top = y_refl;
}
else if (IE)
{
document.all.reflection.style.visibility = "visible";
document.all.reflection.style.left = x_refl;
document.all.reflection.style.top = y_refl;
}
}


But I recommend AGAINST using frames. The problem is that the browser picks up the mouse position relative to the top-left of the current frame. So when you move into a different frame, the mouse coords have no relevance to anything in the frame containing the graphics. In fact, in any frames containing the file 'blank.htm', the mx and my values are not captured at all, since they are not told to within this file!
I'm sure this could be worked around, but it seems to me to require a hell of a lot more coding!
You could try to center everything by fetching the monitor's resolution, then offseting every <DIV> by an appropriate ammount. It's tedious, but it'll work (assuming that the browser is set to full screen!)

Nice and simple this DHTML stuff isn't it!!(???)

osh

half this game is ninety percent mental...

The only thing is, I don't think it's necessary to reflect the cursor when it's much further over than the edge of the navigation area. So, what happens in the adjacent frames doesn't really matter to me. Originally, I was trying to capture the movement in a layer that covered an area proportionate to the reflected area, which is now the area covered by the frame, more or less.

And I think what would help make it more realistic is if the reflection distorted and got smaller as it reached the edge of the sphere. I'm working on a way to accomplish that now. I think it'll really help. Oh, and if you check it out now, you can see that I've created a better reflection that changes into a hand when the real cursor does.

The new script is really cool. The only problem I have is that, in a smaller window, the reflection doesn't clear the edge of the sphere before the cursor moves out of the window, leaving the image hanging in the sphere. If I increase the speed so that it does, you lose the effect. I could create more room by discarding the frames like you said, but grabbing the screen/window size and calculating everything from there seems like tons more trouble than it's worth.

BTW, I thought about adding a frame above and below the interface to center it, but where I have it positioned now doesn't bother me. It's just about perfect in 800x600 and in anything larger, I don't mind it being nearer the top.

Thanks a lot, guys. This works much better than I had originally imagined it would. I'll be sure to credit you in the source.

I would recommend that you *don't* make the reflection clear the edge of the sphere! A reflection only nears the edge of the sphere when the object being reflected is *behind* the sphere. That would never happen with the cursor, it should actually only get about halfway or so (and slow down as it gets there).

Right, you're probably getting pissed off with me interfering with your site now. But I'm going to give you another suggestion anyway.

I think this works dead well in IE (though I can't seem to get it to work in NN for some reason - maybe your bood will tell you how).

At the end of your 'moveReflection()' fucntion, inside the 'if (IE) {...}' statement, add this:

document.images["zero"].width = 17 - Math.abs(Math.round(x_refl_offset/10));
document.images["zero"].height = 20 - Math.abs(Math.round(y_refl_offset/10));

It will make it seem as if the shadow's getting thinner at the edges of the sphere, and fuller in the middle.
I tried something similar in NN, but it didn't seem to work. As I say, maybe your book will tell you how! (Modify this):

document.reflection.document.images["zero"].width = 17 - Math.abs(Math.round(x_refl_offset/10));
document.reflection.document.images["zero"].height = 20 - Math.abs(Math.round(y_refl_offset/10));

and hopefully it will work in Netscape too!

osh

half this game is ninety percent mental...

Yeah, that won't work in NN... there's no way to change an image's size in NN. I've tried it many different ways.

BTW... do you know that saying

document.images["zero"]

is the same as saying

document.images.zero

?

It is. If you use brackets [] with a string inside them, then it's basically the same as using a dot and then the contents of the string. so

object["myproperty"] == object.myproperty

this usually comes in handy if you have a bunch of images with the names img0, img1, img2, etc. you can access them like so:

for (a=0; a < imgnum; a++)
&nbsp;&nbsp;&nbsp;&nbsp;document["img" + a].src = "myimg.gif";

See? it's a handy little thing that helps you avoid use of the eval function, which i personally think produces worse code. I only use the eval function when i'm taking the value of something that someone typed in a text box.

-Slime

"Windows: Just another pane in the glass."

Re. clearing the edge of the sphere: You're right, but like I said it just sticks there if you move out of the frame/window. I thought about maybe making it disappear in such an event, but I thought that might look more odd, it just vanishing. Unless, of course, someone has a more interesting idea.

As for changing the size of the cursor, I was thinking about just creating a couple of other sizes and swapping them out depending on the distance from the center. Not as clever as Osh's way, but it would work in both browsers.

Wow, I just looked at it - it looks *awesome*! It really doesn't matter that it hovers when the mouse leaves the frame. I love it! I'd leave it as it is now.

You may want to work on adding another couple of features... maybe a shadow or something, i dunno. Might be too tough.

Wow. This is simply one HEL of a thread! Slime, you are really a pretty amazing guy, I mostly know how to do this already, but I followed through step by step with all of your thoughts, right on the money. Really should turn this into a tutorial, thousands of folks want to find out just this stuff, simple, like you said it. Great work!

Yah, math is hard. I can remember the first time I sat down with pen and paper and tried to figure out intuitively how to calculate a point on a circle. Basic stuff, how could I not have this handy? I came up with two formulas, the first (and more complicated!) wasn't really what I wanted, but it looked cool, pleasant accidents. Little Osh, seems like you should fit right into this group, nice feedbacks on codes. Wes, I saw the jewel/pearl interface, the effects are *awesome*. The texts around the edge were kind of plain for my text, maybe some extra juice could be applied there?

Your pal, -doc-

Slime: A shadow, too--interesting idea. I think I'll try that.

Doc: Thanks. I think I'll take your advice on sprucing up those links. The original design started out as a simple, bandwidth-light interface option, but as these things always do, it evolved into something spiffier. The text got left behind, so it should probably be enhanced.

BTW, I've made it live on my site, so the new link for it is http://www.bigwaste.com/homepages/06/

Don't hesitate in providing more input, everyone.

This point is more a matter of personal taste than anything...

But I don't see any need to spruce up the text on your page. Remember that the main attraction is the pearl itself! Too much flashy graphics will simply distract the visitor's attention away from it.

Simplicity is what I like about the page! But like I say, that's just a personal touch.

osh