Need suggestions for how to achieve desired rollover effect

HTML & CSS
1

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. :slight_smile:

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

thanks!

2

Just one question, what’s the idea behind having the map wider than the window? Surely it would be better to have it set to 100% otherwise what’s the point? :slight_smile:
Please don’t take offence to this but I’m just thinking of this from a user interface point of view - wouldn’t it be confusing to the average user to have them scrolling beyond the window size, especially as there is a high risk they would miss content beyond that point?

Please clarify some more… :slight_smile:

3

agreed, and that was my initial plan. but when i got the up- and downriver points, i sw immediately that the segment of river would be too small at 100%.

so… a full-width window with some kind of more indicator on each side to mitigate the confusion factor. maybe even have it automagically scroll in that direction when hovering over the indicator?