11-28-2012, 03:41 PM
I have a web page:
with a mall map in the web page and an iframe located on right.
I need to get it so that when you hover over a store name in the right frame, a tooltip displays in the main page over the map at a specified location.
Is there a script that I can find that will do this?
I have looked around and not found anything suitable.
Thanks for any help.
11-28-2012, 03:53 PM
I don't think you can do that because it's a hole image. If the image was broken up then it would be possible.
11-29-2012, 03:43 PM
Hi bigcasey 123
I can break the image down to whatever I need to to get this working.
Could you pls let me know how to do this?
11-29-2012, 08:06 PM
The fact that it is a single image is not really relevant, but it might take a bit of Googling to find a script that you could adapt.
Essentially, you might insert an absolutely positioned div just inside the <td> that contains the image, with the css: left and top 0, display:none, and a high z-index.
You need to know the left and top pixel positions (within the image) where you wish to position the tooltip to correspond to each store. Store these in an array or, more likely, an array of objects, along with the descriptive text for the corresponding store. [I would use the store names as the array keys.]
Then use mouse-events on the store-names (in the iframe) to hide and show the tooltip at the correct positions. The mouse-events could also dynamically change the height and width of the tooltip to reflect the amount of text in the description.
This is just an outline. You might be in luck and find a suitable script to adapt.
11-29-2012, 08:18 PM
.. a jQuery tooltip-plugin might make the whole process easier, but it will probably still need some tweaking to respond correctly to events within the iframe.