Use CSS to create interchangeable image buttons with Event Processing

Source: Internet
Author: User
Buttons are the most commonly used controls on webpages. several methods have been tested over the past two days to design better-looking buttons:
1. Use JavaScript to exchange images. First, create images on the webpage, convert the images to server-side controls, and add event processing for the controls. However, it is a pity that the system does not respond during running. I guess it is related to the picture being exchanged.
2. When a button is handed over to a page, it is actually an input, so it is OK to write a style with CSS. As a result, it is found that, although the button ID in the client page is the original ID, the CSS written does not work. Originally,. NET added a style for the button, and the priority is obviously higher than the custom one. It seems that you have to block the style automatically added by the system.
3. Try Hyperlink and write CSS for it. There is no problem in the result image exchange, but the button event cannot be added.
4. At last, use linkbutton to write CSS with the linkbutton ID, and then remove the text. Result: both the effect of switching images and event processing are considered.
There may be better solutions, but this is already relatively simple. You only need to change the CSS to get everything done. CSS is simple: # OK {} {
Position : Relative ;
Border : 0px solid #000000 ;
Height : 42px ;
Width : 110px ;
Top : 85px ;
Left : 60px ;
Position : Relative ;

}
# Okbtn {} {
display : block ;
width : 100% ;
height : 100% ;
background-image : URL (.. /images/login_ OK _1.jpg) ;
}
# Okbtn: hover {} {
Background-Image:URL (../images/login_ OK _2.jpg);
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.