如何在Texbox中制作翻转图像？

Question

我看过这个网站www.entireweb.com 我想知道如何让搜索框中的“Magnyfying Lens”变成这样。

如果您发现有3张图片..

我知道该怎么做2个旁白但如果将我把第三一个..

感谢

如果您的免费代码，请它：p

Answer 1

有3个选择去想

：悬停

：积极

，然后链接/按钮的默认状态

，你可以看到它在这里的行动 http://www.jsfiddle.net/rpSgy/

只是做与图像的例子

http://www.jsfiddle.net/ZATzF/

Answer 2

第三个是在mousedown和o上完成的n mouseup

$('#maglensid').mousedown(function(){ 
    //swap to pressed image 
}).mouseup(function(){ 
    //swap to normal image 
}).hover(function() { 
    //swap to hover image 
}, function() { 
    //swap to normal image 
}); 

Answer 3

这是他们的CSS，他们只是移动一个关于使用CSS背景属性的精灵图像。默认位置，悬停位置和有效（即点击）位置。

.web #front_logo, .web #search_form, .web #search { 
    background-image: url("../skin_web_glare.png"); 
} 

#search { 
    background-position: -340px -70px; 
    cursor: pointer; 
    height: 44px; 
    margin: 4px 0 0 7px; 
    width: 43px; 
} 

#search:hover { 
    background-position: -390px -70px; 
} 

#search:active, #search.active { 
    background-position: -440px -70px; 
} 

所以他们实际上是使用任何的jQuery/JavaScript的只是CSS（的事情应该是这样:)）我不认为。