4

Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.

While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.

Thanks for you help!

MrRay
  • 952
  • 2
  • 10
  • 16
  • 1
    Could you be thinking of something like annotations? http://code.google.com/p/jquery-image-annotate/ – nwellcome Jul 14 '11 at 21:45
  • Thanks for the suggestion! That's a very interesting idea, and does satisfy some of the issues I raised. Unfortunately I'd have to be a little more flexible with the shapes and I'm not sure if its more/less maintainable when given a dynamic source, but it's still a nice approach and different from the traditional use. – MrRay Jul 14 '11 at 22:04

1 Answers1

2

I understand your question, but there are two few things that we cannot break from.

  1. Your images might be loaded dynamically
  2. Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)

Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.

I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.

I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.

vinceh
  • 3,490
  • 1
  • 21
  • 24
  • Agreed. It was when I was coming to this conclusion that I decided to post this question. But very well put - unless I can get away from these limitations, there does not appear to be any other option. Thanks for your response! – MrRay Jul 14 '11 at 23:00