当前位置：首页 → 问答吧 → 【Ext】一个按钮鼠标放上去时变换图片应该怎么做，请高手指点

【Ext】一个按钮鼠标放上去时变换图片应该怎么做，请高手指点

时间：2011-11-24

来源：互联网

Ext.ux 的imagebutton能做吗？或者其他方法能实现就行

想实现的功能就是鼠标放上去后原来的按钮图片变成另外一个

作者: kzc_ljl 发布时间: 2011-11-24

HTML code


var btn = new Ext.Button({
width:200,
overCls:''//CSS类名
});
点击后的样式比较麻烦，有很多种做法，我提供一种简单的方法供参考
btn.on('click',function(){
btn.getEl().setStyle(.....);//具体参考API Ext.Element
},btn,{single:true});
上面代码的意思就是点击的时候修改btn的样式，single:true表示只执行一次 

http://zhidao.baidu.com/question/235854195.html

ext.ux.ImageButton的用法

ext.ux.ImageButton的用法（图片按钮） .

作者: yhtapmys 发布时间: 2011-11-24

没有必要非得用Ext.ux来做
最投机取巧的方法你在firebug下看下这个button最终渲染成的dom
就用最原始的js操作来替换掉样式或图片的路径绝对简单~~

作者: fanchuanzhidu 发布时间: 2011-11-24

HTML code

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <button id="btn" type="button">
        <img class="normal" alt="img1" src="1.jpg" />
        <img class="hover" style="display:none" alt="img2" src="2.jpg" />
    </button>
    <script>
        var btn = document.getElementById('btn'),
            childs = btn.children,
            imgs = {};
        for(var i in childs){
            if(childs[i].tagName === 'IMG' && childs[i].className){
                if(childs[i].className !== 'normal'){
                    childs[i].style.display = "none";
                }
                imgs[childs[i].className] = childs[i];
            }
        }
        btn.onmouseover = function(){
            imgs.normal.style.display = "none";
            imgs.hover.style.display = "";
        }
        btn.onmouseout = function(){
            imgs.normal.style.display = "";
            imgs.hover.style.display = "none";
        }
    </script>
</body>
</html>