extjs - 如何在 ExtJs 中创建 ImageMap？

Question

我正在 ExtJS 3.4 中创建一个登录页面。它有一个图像，我想创建一个图像映射，因此当用户单击图像时，它会转到外部站点。

这是代码：

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

这是我最终使用的：

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
        }]
    });

Answer 2

我做了类似的事情，我使用了这个 ExtJS 库：http ://code.google.com/p/imgmap/ 。你可以找到非常好的和有用的例子。享受！