-----Original Message-----
I want a mouseover on a hotspot of a picture on a page to
change the visibility of a layer on the same page.
The picture and the layer are on the same page.
This is relatively difficult to do. As you may have
noticed in the answers to your previous posts, hyperlinks
(and most elements) have an onmousover event that fires
when the mouse passes over them, and an onmouseout event
that fires when the mouse passes out.
Unfortunately, individual hotspots don't have onmouseover
and onmouseout events. Instead, you have to trap
an "onmousemove" event that fires whenever the mouse
moves over the object (in this case, over the picture).
When this event fires, there's an "event" object that
reports the current x-y coordinates of the mouse.
Let's say the visitor move the mouse over your picture at
the left edge, 100 pixels from the top. At this point,
the picture's onmousemove event would fire and report
coordinates (0,99). If the visitor moved the mouse
further to the right, the onmousemove events would fire
and report coordinates (1,99), then (2,99) and so forth.
Of course, the y-coordinate would also change if the
visitor moved the mouse up or down.
*You* would have to write the code that figures out
whether the mouse is over a given hotspot. This isn't too
difficult if all your hotspots are rectangles; you can
just check to see if the horizontal mouse position is
within some range, and if the vertical mouse position is
within some range. But it's *much* more difficult if any
of your hotspots are circular, elliptical, or polygonal.
Of course, whenever you make one layer visible, you'd
want to make the layers for all other hotspots invisible.
And the onmouseout event for the entire pictures would
have to make the last layer invisible.
All in all, the JavaScript code to do what you want would
require at least several hundred lines of code. Even if I
wrote up a sample, it would require considerable skill on
your part to modify the sample to fit your situation.
Enough skill, in fact, that the preceding discussion
should be all the advice you need.
The problem is much simpler if you can slice the picture
into rectangular segments, and use an HTML table to
display all the segments as if they were one picture. If
you can do that, then you can use the Behaviors feature
built into FP2003 to make layers on the same page visible
or invisible as the mouse passes over each segment.
Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------
