Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML5
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
good
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>
<html>
<body>
 
<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')" >
</map>
 
<CANVAS id='c1' width='402' height='402' style='border: 1px black solid;position:absolute;top:50px;left:6px;z-index:-1'>
 
</body>
</html>
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 364
1 Nirav Prabtani 268
2 _Amy 185
3 CHill60 170
4 Sergey Alexandrovich Kryukov 166
0 OriginalGriff 8,004
1 Sergey Alexandrovich Kryukov 7,017
2 Maciej Los 4,039
3 Peter Leow 3,738
4 CHill60 2,912


Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 26 Nov 2012
Copyright © CodeProject, 1999-2014
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