18 Apr 2012 12:21 PM #1
Unanswered: How to do an image map in sencha touch ?
Pretty much everything in the question.
I know this exists in html but i don't see how to do it in sencha touch...
Any pointer would be much appreciated !
23 Apr 2012 11:30 PM #2
Does this ring a bell to anyone ? Is there a Sencha way of doing that ?
23 Apr 2012 11:51 PM #3
- Join Date
- Jan 2009
- Palo Alto, California
- Vote Rating
Wow, nothing specific no... I haven't used an image map in a decade I think you'd just need to hook into the .element events but we don't have any specific guidance on that
23 Apr 2012 11:55 PM #4
Well, that's what I thought too but I thought I'd check with you guys before... That's a shame...
I'll try to find a way to do that and If I do find a clean way, by extending some Ext component, I'll submit it for your approval.
As I am supposed to deal with image which have parts clickable on them, but not rectangular ones, I'm starting to think that a svg or something like that would suit me better no ?
Any tips as a starter ? Maybe start with the img component and use the tpl property ?
31 Jul 2013 9:11 PM #5
any more news on an image map??
I'm looking for a way to break up an image into areas that when touched will fire an event to bring up a message box/overlay....does it depend on the resolution of the mobile device?
31 Jul 2013 11:40 PM #6
The easiest way...
What type of graphic is it? An easy way would be to break up the image into parts and then have them as Ext.Img items, then you could have a listener for each. You would have to arrange the items in a container and flex each one to fit to make up the whole graphic. Sencha architect would be perfect for this.
Alternatively if you go over to the Sencha Try website you will see a more complex shape (a map) made using a vector shape that has individual states you can tap on. This would be more tricky as you would have to use a graphic program like illustrator to export as svg then you would need another online tool to convert to a shape for sencha...I forget the name of the site but if you search for svg on here it's in one of the posts.
Hope his helps...
1 Aug 2013 3:12 PM #7
sounds oz to me !!
thanks for the advice...the image I am using is a risk grid: so maybe I am in the wrong posting...I am using an image in an asp.net app that i want to translate into touch 2.2 via Architect.
As from Wikipedia Risk Matrix: Of course my image is tarted up with colours etc.
High High Extreme Extreme Moderate High High Extreme Low Moderate High Extreme Low Low Moderate Extreme Low Low Moderate High
Now what I want is that when a cell is touched (unless there is a hover a description of that cell appears as a pop-up (like a tooltip/Title in HTML when the mouse hovers over a component).
I suppose an image is overkill & I could just have cells but again what would be the right way to go