2

Is it possible to have irregular shapes like anchors on some surface in JS that can be clickable and it becomes a ball on runtime on page loads? I want to animate that surface that can be a ball and also want to track that which anchor shape is at particular point.

So is it possible using JS? How can this be achieved? I was unable to find any solution. Is there some JS library that can do this? Something like processing.js or Raphael js?

halfer
  • 19,824
  • 17
  • 99
  • 186
Hafiz
  • 4,187
  • 12
  • 58
  • 111
  • This is a really poor question. I for one have no idea what you are trying to do. Might I suggest you attempt to better explain your needs if you are looking for an answer. What kind of shapes do you mean? What areas do you want to be clickable? and what happens when something is clicked? What is your overall aim? – musefan Oct 18 '11 at 10:30
  • I want to add arrows, that will be the part of a circle, sort of fortune wheel and want every part of it clickable , one part is orange, one will be red, one will be yellow e.t.c. I want all these parts clickable and want to know that when which part is at which position. – Hafiz Oct 18 '11 at 16:10
  • Hi, even i am looking for a irregular shape anchor links. I have tried using canvas but am not get a solid foundation. Were you able to solve this? – codingbbq Oct 24 '11 at 11:41
  • I think Raphael JS can help us in vector shapes, but how can we combine it and how can we make links is problem, mapping can be done but that is not a programatic and more controllable solution. – Hafiz Oct 24 '11 at 11:44

2 Answers2

1

Could I suggest an HTML image map? You can embed an IMG tag in the page set it's usemap attribute and then define shapes on that image to be clickable areas.

It doesn't have as many features as a canvas but maybe a regular IMG element will do in this case.

Matthew
  • 8,183
  • 10
  • 37
  • 65
  • If I will animate or rotate image then I think maps will be difficult or will not be able to detect that which anchor is where – Hafiz Nov 19 '11 at 21:09
0

I suggest using SVG with excelent Raphael js library. You can make interactive animations with pure javascript (i.e. without additional plugins) and those objects can be made irregular anchors (overriding click, mouseover and mouseout events to emulate anchor behaviour).

Another idea is to use HTML5 canvas, but this requires more code (the technology is still immature) and may fail to work under different browsers.

freakish
  • 54,167
  • 9
  • 132
  • 169