View Full Version : Image hotspots

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: '...',
afterrender: function (e) {
var myImg = Ext.create('app.switchboard');


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.

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