Question

I am creating a Login Page in ExtJS 3.4. It has an image and I would like to create an image map so when the user clicks on piece of an image, it goes to an external site.

Here is the code:

var headerImage = new Ext.BoxComponent(
    { autoEl:
        { 
            tag: 'img',
            src: AVRMS.ROOT_CONTEXT + "/ssl/images/LoginHeader.png"
        } });

    var loginButton = {
        xtype: 'compositefield',
        id: 'cmpLogin',
        combineErrors: false,
        height: 50,
        items: [
                {
                    xtype: 'displayfield',
                    value: ''
                },
            {
            xtype: 'button',
            text: 'Login',
            listeners: {
                click: function () {
                    loginUser();
                }
            }
        }]
    };

Answer 1

Here is what I ended up using:

var imageMap = "<map name='imgMap'><area shape='rect' coords='23,185,233,241' href='http://www.ohio.gov' /><area shape='circle' coords='670,201,50' href='" + manageAccount + "' /></map>";
var imageUrl = "<img src='" + AVRMS.ROOT_CONTEXT + "/ssl/images/LoginHeader.png" + "' usemap='#imgMap' />";

var headerImage = new Ext.Panel(
    { items: [
        {
            html: imageMap + imageUrl
        }]
    });