How to click some parts of an image

Question

I need to make an index page only with the following image.

When the user clicks the water between the flags, he can continue to the next page. If the user presses at any other location, an alert message will be shown. Do we have any x-axis,y-axis concept in PHP?

Anyone have any idea how to make an image's some parts clickable? Anyone can provide me examples or links to documents?

Thanks!

Answer 1

You could use the map tag:
http://www.w3schools.com/tags/tag_map.asp

Answer 2

Since you're using JQuery you might want to look at this answer on SO  

$("#imageId").click(function(e){
var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;
});

Answer 3

Using <input type="image" src="...picture..." name="my_button" /> will cause it to post $_POST['my_button_x'] and `$_POST['my_button_y'] containing the coordinates on which it was clicked. You'd then define some rules for a "valid" click, as elaborately as you wish:

<?php
if ( (int) $_POST['my_button_x'] > 100 && (int) $_POST['my_button_x'] < 300
     && (int) $_POST['my_button_y'] > 20 && (int) $_POST['my_button_y'] < 50 )
{
    // valid
}
else
{
    // invalid
}

Obviously, this is a barebones example - you still need to test for isset() and so on.

Answer 4

Go for image mapping and then bind some click event handlers with the mapped areas. I used this to create proper maps a while ago. Hope this will become handy in your case too.