Home > Developer > Web Develop
1. Scene description, according to the movement of the mouse, the dynamic switch button picture.
2. Method 1, prepare two pictures of 120*41, a picture of normal state, a piece pressed. Click on the button on the mouse to set the tab, remove and return to the normal state picture. disadvantage: In the Web page press the picture needs to download, will appear the mouse moves up, did not immediately switch the effect.
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" /><title> Two sheetsPicture Button Instance</title><styletype= "Text/css">#theLink{Display:Block;width:120px;Height:41px;margin:0 Auto;background:URL (images/normal.gif) no-repeat;}#theLink: Hover{background:URL (images/press.gif) no-repeat;}</style></Head><Body><aID= "TheLink"></a></Body></HTML>
3. Method 2, the whole set up a picture, 120*82, according to the needs of the display, dynamic interception of the display size. Advantage: A full picture can be downloaded once on the webpage, saving data efficiency.
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" /><title>Single Picture Button instance</title><styletype= "Text/css">#theLink{Display:Block;width:120px;Height:41px;margin:0 Auto;background:URL (images/buttonbg.gif) no-repeat;}#theLink: Hover{background:URL (images/buttonbg.gif) no-repeat 0-41px;}</style></Head><Body><aID= "TheLink"></a></Body></HTML>
CSS single Picture button instance (CSS Image transform)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
