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

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

Answer 2

以下是我最终使用的内容：

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

如何在ExtJs中创建ImageMap？

2 个答案: