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 - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,381
    Answers
    648
    Vote Rating
    858
      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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  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
  •