请教用yui实现类似iphone的桌面效果

    RT，就是有9个图标，分为3行，鼠标一移动到一个图标上，该图标就更改为别的图标，鼠标移开就恢复回去。大致的框架如下代码，只是没有图标，换为字段"item"（注意，这段代码本身只是为了表达意图），最好能用yui来实现。本人对js不熟，请高手帮下忙，谢谢。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
    <link type="text/css" rel="stylesheet" href="yui/build/carousel/assets/skins/sam/carousel.css">   
    <script src="yui/build/yahoo/yahoo-dom-event.js"></script>  
    <script src="yui/build/element/element-min.js"></script>  
    <script src="yui/build/carousel/carousel-min.js"></script>  
</head><body class="yui-skin-sam">
    <form id="form1" runat="server">
    <div>
        <a href="javascript:;" id="hover1">Desktop</a>
    </div>
    <div id="groups">
        <ul>
            <li id="group1">
                <a href="#" class="groupItem">item 3</a>
                <a href="#" class="groupItem">item 4</a>
                <a href="#" class="groupItem">item 5</a>
            </li>
            <li>
                <a href="#" class="groupItem">item 6</a>
                <a href="#" class="groupItem">item 7</a>
                <a href="#" class="groupItem">item 8</a>
            </li>
            <li>
                <a href="#" class="groupItem">item 11</a>
                <a href="#" class="groupItem">item 12</a>
                <a href="#" class="groupItem">item 13</a>
            </li>
        </ul>
    </div>
    <div id="hmenu1">
        <div class="bd">your content here.</div>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    css就可以搞定：
    a:link,a:visited,a:active {background:url(img/img1.gif);}
    a:hover {background:url(img/img2.gif);}
      

  2.   

    $(document).ready(function(){
        $('#groups li').addClass('groupItem');
        $('#groups li').onmouseover({
            $('.groupItem').romoveClass('groupItem').addClass('鼠标放上去的样式');
        });
        $('#groups li').onmouseout({
            $('#groups li').romoveClass('鼠标放上去的样式').addClass('groupItem');
        });
    }试试哦,不知道行不行
      

  3.   

    $(document).ready(function(){ 
        $('#groups li').addClass('groupItem'); 
        $('#groups li').onmouseover({ 
            $('.groupItem').romoveClass('groupItem').addClass('鼠标放上去的样式'); 
        }); 
        $('#groups li').onmouseout({ 
            $('#groups li').romoveClass('鼠标放上去的样式').addClass('groupItem'); 
        }); 
    });
      

  4.   

    我在学jquery，extJs还学开始学，费了半天劲写了一个jQuery的，希望你能用上.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> 
        <title></title>
        <style type="text/css">
            .tblorg{width:200px;height:200px;border:solid 3px;padding:2px;}
            .tdorg{background-image:url(http://i1.sinaimg.cn/ty/2009/0419/S1240101377812.jpg);width:33%;height:33%;border:solid 1px;padding:2px;}
            .tdmouseover{background-image:url(http://www.beepig.com/filelist/Image/smallimage6/870/beepig_com_s12959.jpg);width:33%;height:33%;border:solid 1px;padding:2px;}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(document).ready(function(){
                $('#tbl').addClass('tblorg');
                $('#tbl td').addClass('tdorg');
                $('td').mouseover(function(){
                    $(this).removeClass('tdorg').addClass('tdmouseover');
                });
                $('td').mouseout(function(){
                    $(this).removeClass('tdmouseover').addClass('tdorg');
                });
            });
        </script>
    </head> <body> 
        <div id="groups"> 
            <table id="tbl">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div> 
    </body> 
    </html> 
      

  5.   

    请问一下郭大侠，如果我要每个图标都不同，且其替换图标也是不同的，那要怎么做？？如果是C这些语言的话，可以用数组等数据结构来成对地存储每个图标以及它对应的替换图标，通过索引来读取，而在jquery、extjs等网页编程语言中要怎么做？？本人对网页编程实在不熟，现在临时客串来写下网页，请多指点下。
      

  6.   

    你去网上找9对图片的url,贴出来,我有空帮你写出来.
      

  7.   


    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28091.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28090.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28087.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28082.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28081.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28080.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28076.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28060.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28056.jpghttp://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28045.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28033.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28030.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28029.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28028.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28027.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28026.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28025.jpg
    http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28024.jpg这些图片都是不同的两个一组就行，请郭大侠写下，我学习学习
      

  8.   

    搞定,由于刚开始学习,不一定是最简单的,但可以实现,可以结帖了!
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> 
        <title></title>
        <style type="text/css">
            .tblorg{width:200px;height:200px;border:solid 3px #000000;padding:2px;}
            .tdorg{width:33%;height:33%;border:solid 1px #000000;padding:2px;cursor:pointer;}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            var arrImg=new Array();
            arrImg[0]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28091.jpg";
            arrImg[1]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28090.jpg"; 
            arrImg[2]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28087.jpg";
            arrImg[3]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28082.jpg";
            arrImg[4]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28081.jpg";
            arrImg[5]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28080.jpg";
            arrImg[6]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28076.jpg";
            arrImg[7]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28060.jpg";
            arrImg[8]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28056.jpg";
            var arrAlt=new Array();
            arrAlt[0]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28045.jpg"; 
            arrAlt[1]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28033.jpg";
            arrAlt[2]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28030.jpg";
            arrAlt[3]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28029.jpg";
            arrAlt[4]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28028.jpg";
            arrAlt[5]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28027.jpg";
            arrAlt[6]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28026.jpg";
            arrAlt[7]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28025.jpg";
            arrAlt[8]="http://www.beepig.com/filelist/Image/smallimage6/848/beepig_com_s28024.jpg";
            
            $(document).ready(function(){
                $('#tbl').addClass('tblorg');
                $('#tbl td').addClass('tdorg');
                for(var i=0;i<9;i++)
                {
                    $('#td'+i).css({"background-image":'url('+arrImg[i]+')'});
                    $('#td'+i).mouseover(function(){
                        $(this).css({"background-image":'url('+arrAlt[$(this).attr('id').substring(2)]+')'});
                    });
                    $('#td'+i).mouseout(function(){
                        $(this).css({"background-image":'url('+arrImg[$(this).attr('id').substring(2)]+')'});
                    });
                }
                
            });
        </script>
    </head> <body> 
        <div id="groups"> 
            <table id="tbl">
                <tr>
                    <td id="td0"></td>
                    <td id="td1"></td>
                    <td id="td2"></td>
                </tr>
                <tr>
                    <td id="td3"></td>
                    <td id="td4"></td>
                    <td id="td5"></td>
                </tr>
                <tr>
                    <td id="td6"></td>
                    <td id="td7"></td>
                    <td id="td8"></td>
                </tr>
            </table>
        </div> 
    </body> 
    </html>