Kind of a mouse trailer... but not.

[DevDevil]

I don't use flash very often, but I have a customer that was very specific about one part of their site design. I don't see a way around using flash for this.
They want a navigation toolbar that has a rectangle that follows the y coordinate of the cursor while it's within the movie borders. The x coordinate needs to stay fixed. You can see the example here -->

http://www.mountjava.com/Navigation.html.

The red rectangle is it's own graphic symbol on a seperate layer, and the Menu Item's are seperate button symbol's on their own layer. Is there a tutorial anywhere that anyone knows of or could someone let me know how I could get the red rectangle to follow the cursor?

 

[glenmac]

You don't need flash a little javascript and css will do the trick I think.

<div align = "center" style = "width: 100px; background:pink;" onmouseover = "this .style.background = 'blue'" onmouseOut = "this .style.background = 'pink'" ><a href = #>Menu Item 1</a></div>
<div align = "center" style = "width: 100px; background:pink;" onmouseover = "this .style.background = 'blue'" onmouseOut = "this .style.background = 'pink'" ><a href = #>Menu Item2</a></div>
<div align = "center" style = "width: 100px; background:pink;" onmouseover = "this .style.background = 'blue'" onmouseOut = "this .style.background = 'pink'" ><a href = #>Menu Item3</a></div>

Hope this helps



Glen

http://lantzvillecomputers.ca

 

[DevDevil]

Well, thanks for that but that's not what I'm going for. highlighting div's is simpler than what my client asked for. They want the look to be of a 50% clear image that can be floated over the links. x has to be fixed but y needs to follow the position of the cursor within the movie area. Just imagine on the example that i have posted at

http://www.mountjava.com/Navigation.html

that once you enter the movie area with your cursor the semi clear rectangle imediately moves down (smoothly) to the cursor over the "Menu Item" links allowing you to still see them. Maybe that's a better explanation of what I'm looking for.

 

[Foamcow]

I think you could do this a couple of ways, but you are probably rightin thinking of Flash.

Just make sure that you offer a way for people without Flash to navigate the site.

http://www.foamcow.com

 

[DevDevil]

Yes, I will of course put the standard text links at the bottom for the flash challenged. I'm trying now to get the flash part working though.

 

[Nevermoor]

As long as you can create the image you want, there is javascript that would do the scrolling for you.

(This is NOT my code, and it is currently designed for clicking and dragging a div, but perhaps it'd put you on the right track...)

It looks like it would be fairly easy to redefine the events that fire these functions and turn off x scrolling.

/*Post-it note script- by javascriptkit.com
Visit JavaScript Kit ([URL unfurl="true"]http://javascriptkit.com)[/URL] for script
Credit must stay intact for use*/
//drag drop function for ie4+ and NS6////
/////////////////////////////////

function drag_drop(e){
myDiv = document.getElementById('metricDIV');
if (dragapproved){
myDiv.style.left=tempx+event.clientX-offsetx
myDiv.style.top=tempy+event.clientY-offsety
return false
}
}

function initializedrag(e){
myDiv = document.getElementById('metricDIV');
if (event.srcElement.id=="metricDIV" || event.srcElement.id=="metricTBL"){
offsetx=event.clientX
offsety=event.clientY

tempx=parseInt(myDiv.style.left)
tempy=parseInt(myDiv.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")

 

[DevDevil]

I can create the 50% clear image, but as soon as you bring it up on a page it becomes a solid. Tried this already, and in a div. I've got everything created in flash, but I fall short when it comes to getting the rectangle to follow the cursor. The example I have posted is flash, but I don't know how to tell that rectangle to move.

 

[Nevermoor]

take a look at style-sheet command z-index to create layers (i.e. box is a div layer UNDER the menu text)