I cant use google maps. Ok so jquery will work? I am doing a website for a produce company. We want a map showing where each grower is from and then a link to each grower to describe their farm. We want it so when you hover over the bullet, it will bring up three pictures of the growers in that location and then you can click which grower you want info from to take you to that growers html page which would have a bio on them.
So basically i need a lightbox type of deal to come up, with the background map greyed out, as soon as you highlight over the bullet bringing up the pictures of the growers at that location, and once the image is clicked, it brings you to that link of that specific grower.. How can i achieve this with jquery?
ok so once the area of the image map is hovered over, i can set an id to the html tag that the map uses and then use jquery to call that id with an event handler which would be the lightbox plugin that i would want to use?
The biggest difficulty with an interactive map and images that show up is that once an image appears over the image map, the image map is no longer being hovered over so the mouseout event is fired, resulting in the lightbox going away.
the solution would be to not use a lightbox plugin.
on mouseover of the image map area, show an image that is positioned where you want it, and on mouseleave of the image that you just showed, hide that image. do not bind an event to the mouseleave of the image map area, it will be fired immediately upon showing the image that is over it.
would that not only show the image and not allow it to be clickable? I need the image/box to show up once hovered over, bringing up a box with three pictures in it and once one is clicked, i need it to link to that specific page.. would it just be easier to have a lightbox fired up when the bullet is "clicked" instead of "hovered over"?