Click here to Skip to main content
13,095,921 members (49,435 online)
Rate this:
Please Sign up or sign in to vote.
See more:
I have created an image and a load of functions, however I am not sure how to write a function that calls those functions when I click on certain areas of the canvas. For example if I wanted to make a small square of an image run a function rather than having the entire image run it.

If anyone could write some code to allow me to do this I would be very grateful. I have not managed to find anything helpful on google.
Posted 26-Nov-12 8:31am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Try this. You can hack it with an image map overlayed. Make sure you set the z order of the canvas to put the blank image and its map on top.

<!DOCTYPE html>
<p>Click on the canvas.</p>
<img width="398" height="398" alt="Canvas" usemap="#canvasmap" style="border:1px red solid"/>

<map name="canvasmap">
  <area shape="rect"   coords="0,0,50,50"      onclick="alert('You clicked area 1')" >
  <area shape="rect"   coords="100,100,50,50"  onclick="alert('You clicked area 2')" >
  <area shape="rect"   coords="300,300,50,50"  onclick="alert('You clicked area 3')" >
<CANVAS id='c1' width='402' height='402' style='border: 1px black solid;position:absolute;top:50px;left:6px;z-index:-1'>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web01 | 2.8.170813.1 | Last Updated 26 Nov 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100