hi all,

i'm doing a pro-bono site and whenever possible i like to use those as learning opportunities. (might as well develop some skill and make a showcase piece, at least :-).)

here's what i want to do:
  1. have a map drawing with icons indicating there is a video shot from this location available.
  2. when the user scrolls over that location, have the map change to a faded edge circular satellite view
  3. when the user clicks the rollover image, a sound such as bird call or rushing water occurs (optional, just thought of this now as i was typing)
  4. have the video come up in a lightbox with upriver/left and dowriver/right arrows to the next video

it's a wordpress site if that matters so i assume the lightbox effect could be handled by a plugin. (any suggestions? i'll be using weaver ii theme and like portfolio slideshow but haven't tried portsshow for single image instances like this.)

i can load the stuff into dreamweaver to create an image map easily enough, but here's the kicker: the map will be wider than the window so it needs to be grabbed and moved from side to side (like you can move google maps with the grabber hand).

so how do i make it horizontal scrollable *and* keep the image mapped relationships intact? (with any luck someone will tell me i'm creating a problem where there isn't one.) and for that matter, would the image mapping be responsive?

in the olden days i would just do this in flash, but, not so much anymore...actually, not at all. :-)

what d'ya think, any thoughts on how to make it all come together; or am i totally bonkers on this one?

thanks!