Irregular anchors and shapes using JS in HTML/HTML5
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?
javascript html html5 raphael vector-graphics
edited Jan 1 at 19:15
halfer
14.6k758113
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
add a comment |
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?
javascript html html5 raphael vector-graphics
edited Jan 1 at 19:15
halfer
14.6k758113
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
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?
– noobcode
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
add a comment |
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?
javascript html html5 raphael vector-graphics
edited Jan 1 at 19:15
halfer
14.6k758113
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
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?
javascript html html5 raphael vector-graphics
javascript html html5 raphael vector-graphics
edited Jan 1 at 19:15
halfer
14.6k758113
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
edited Jan 1 at 19:15
halfer
14.6k758113
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
edited Jan 1 at 19:15
halfer
14.6k758113
edited Jan 1 at 19:15
halfer
14.6k758113
edited Jan 1 at 19:15
halfer
14.6k758113
14.6k758113
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
asked Oct 7 '11 at 21:45
HafizHafiz
1,8171145100
1,8171145100
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?
– noobcode
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
add a comment |
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?
– noobcode
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
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
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
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?
– noobcode
Oct 24 '11 at 11:41
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?
– noobcode
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
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
add a comment |
2 Answers
2
active
oldest
votes
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.
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
thanks we will give Raphael js a try inshaALLAH
– Hafiz
Nov 19 '11 at 21:10
add a comment |
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.
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
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
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7693159%2firregular-anchors-and-shapes-using-js-in-html-html5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
thanks we will give Raphael js a try inshaALLAH
– Hafiz
Nov 19 '11 at 21:10
add a comment |
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.
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
thanks we will give Raphael js a try inshaALLAH
– Hafiz
Nov 19 '11 at 21:10
add a comment |
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.
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
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.
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
answered Nov 19 '11 at 13:16
freakishfreakish
39.4k593133
39.4k593133
thanks we will give Raphael js a try inshaALLAH
– Hafiz
Nov 19 '11 at 21:10
add a comment |
thanks we will give Raphael js a try inshaALLAH
– Hafiz
Nov 19 '11 at 21:10
thanks we will give Raphael js a try inshaALLAH
– Hafiz
Nov 19 '11 at 21:10
thanks we will give Raphael js a try inshaALLAH
– Hafiz
Nov 19 '11 at 21:10
add a comment |
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.
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
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
add a comment |
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.
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
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
add a comment |
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.
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
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.
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
answered Nov 19 '11 at 13:12
MatthewMatthew
4,78863055
4,78863055
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
add a comment |
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
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
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
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f7693159%2firregular-anchors-and-shapes-using-js-in-html-html5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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?
– noobcode
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