Ha ha. It doesn't look like anyone is jumping in to answer this one. I wrote about this in my last two textbooks. I figure I should cover it in the Hype Book. It was a bit tricky to do it in Hype.
Basically, you need to figure out the angle from one point to another. That is basic Geometry, but it needs to be translated into JavaScript.
window.onmousemove = function(event) {
mx = event.pageX; // Mouse X
my = event.pageY; // Mouse Y
rx = parseFloat(box.style.left) + (parseFloat(box.style.width)/2); // X-Center of the box
ry = parseFloat(box.style.top) + (parseFloat(box.style.height)/2); // Y-Center of the box
angle = Math.atan2((my-ry),(mx-rx)) * (180/Math.PI) ; // AHHHH MATH!
box.style.WebkitTransform = "rotate(" + angle + "deg)"; // Rotate the box
}
"box" is the ID of an element in the scene. I put an arrow in it that faces to the right (zero degrees). With the above JavaScript, the arrow turns to face the mouse.
facing.hype.zip (10.5 KB)
To make it follow a different element, use the location of that element instead of the mouse location. I included a template on this post so you can see. I'm planning something prettier for the book. HA HA.