PDA

View Full Version : Image hotspots



sujk
15 May 2013, 12:20 PM
Hi, I have an image and want to create hotspots for 4 boxes so that clicking on each of them redirects the app to a different page. Read some of the other posts and understand that I can get coordinates on a click event, is that how I proceed?

Another question, conditionally, the boxes need to be visually grayed out and rendered non-clickable, how do I get these effects?


Ext.define('app.switchboard', {
extend: 'Ext.Container',
renderTo: 'resultsList',
items: [{
xtype: 'image',
src: '...',
}],
listeners:
{
afterrender: function (e) {
console.log(e.getXY());
}
}
});
var myImg = Ext.create('app.switchboard');

Thanks.

evant
15 May 2013, 7:08 PM
There's nothing built in to do this. Basically, you'll need to float elements over the image at the appropriate points to act as your hot spots. The disabled areas will need some kind of mask to give a greyed out look.

sujk
20 May 2013, 3:10 PM
I ended up using html/css to get the desired effects. Thanks.