0

I am making a website. I am using some jquery for different actions.

My background Image has a central balloon. On top of the background image, I have placed four different images. these are also balloon shaped. i perform certain jquery actions if someone clicks on these small balloons. now I want that if a person clicks on the background image outside of the central balloon and other than the small balloons, I want to trigger a jquery script.

i am stuck on how to select this clickable area. everywhere on the internet I have searched, they have told to make a rectangular clickable area. this is not what I require. i can use many micro-rectangles to achieve my purpose but this is very crude method.

Can someone please tell me some elegant method for this. I am attaching the image which will elaborate the question.

Thanks alot

enter image description here

M T
  • 161
  • 1
  • 2
  • 13
  • 1
    That sounds like you are looking for the behavior of an imagemap, if I have understood you right. – Sven Bieder Dec 31 '12 at 13:31
  • yes. The image map which will be not a rect not a poly but the exterior of all the balloons. – M T Dec 31 '12 at 13:34

3 Answers3

3

I suggest you do it this way:

  1. Create an image map using Inkscape. This tool will allow you to visually select areas of your image that you want to be clickable (or react on other events, such as mouseover). Once you do that, it will generate tags with coordinates that you need only to copy-paste in your html page.
  2. Download maphilight jquery plugin which will enable you to bind click, mouseover, mouseout and other events to certain areas that you like and perform actions accordingly.

Once you bind click events to all the four balloons, it will work properly. For the other part concerning clicking on the background other than the balloons, you can bind a click handler to the whole image, and once clicked, you check if the event.target is a balloon. If it is not a balloon, user clicked on the background outside the balloons.

Danilo Radenovic
  • 1,019
  • 1
  • 11
  • 23
1

Use Image Maps. It's part of the HTML standard. There are many free online tools for easily creating image maps, just Google it. My personal favorite is this.

Then you can bind events to the <area> tags as usual. The maphilight jQuery plugin adds a nice touch for hover states.

Further reading:

Ronny
  • 4,295
  • 2
  • 24
  • 30
0

Give your balloon image some common class (lets balloonImg), now using jquery you can have click event on your html like this.

var htmlClickFun=function(e){
    if(!$(e.target).is('.balloonImg')){
   //your code
};

$('html').click(htmlClickFun);

However adding events on html and body is not a good idea. So if you are adding any event to whole html than you must unbind it by $('html').unbind('click',htmlClickFun); whenever you dont need it.

check on http://jsfiddle.net/tAhV2/

Sudhanshu Yadav
  • 2,323
  • 18
  • 18