Results 1 to 3 of 3

Thread: Image hotspots

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    California
    Posts
    2
    Vote Rating
    0
      0  

    Default Answered: Image hotspots

    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?

    Code:
    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.

  2. 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.

  3. #2
    Sencha User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,987
    Answers
    725
    Vote Rating
    934
      0  

    Default

    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    California
    Posts
    2
    Vote Rating
    0
      0  

    Default

    I ended up using html/css to get the desired effects. Thanks.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •