Home >Web Front-end >HTML Tutorial >About the picture button problem_html/css_WEB-ITnose
About the picture button problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:09911browse
I want to make the simplest static picture button (that is, whether the mouse moves or not, whether the mouse clicks or not, the picture will still look the same). I saw an article on the Internet saying that INPUT should be used to do it, but the article also said that INPUT's SUMIT button should be used to do it, saying that it reads images faster than INPUT's IMAGE button. Is there really such a difference? Another thing I want to ask is that there is also an IMAGEBUTTON in ASP.NET. What is the difference when using IMAGEBUTTON?
Reply to the discussion (solution)
Just use an 6ed09268cbdd0015bce8dcbbdfa9bfe4, add cursor:pointer, and it’s done. ^_^
Just use 6ed09268cbdd0015bce8dcbbdfa9bfe4, add cursor:pointer, and it’s done. ^_^
But you have to link to a specified website. For example, click on the picture to link to www.163.com, so what should I do...?
If you only realize the function
8aa2918506a11e8a886e85949f1eb079f8d9cde947de1719581060b617c87f215db79b134e9f6b82c0b36e0489ee08ed
I dare not say the efficiency
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} .btn{ height:18px; line-height:18px; padding:5px 10px 0; margin:15px; float:left;display:inline-block; color:#333; font-size:12px; text-decoration:none; background:url(http://image0.139cm.com/rm/richmail/images/mutualBtn.png) 0 -132px repeat-x; position:relative;} .btn{ height:18px; line-height:18px; padding:5px 10px 0; float:left;display:inline-block; font-size:12px; background:url(http://image0.139cm.com/rm/richmail/images/mutualBtn.png) 0 -132px repeat-x;} .btn i{display:inline-block;}.l_border,.r_border{width:3px; height:24px;display:inline-block; background:url(http://image0.139cm.com/rm/richmail/images/mutualBtn.png) no-repeat; position:absolute;} .btn i.l_border{background-position: 0 -26px; left:0; top:0px;} .btn i.r_border{background-position: -3px -26px; right:0px; top:0px;} </style> </head> <body> <a href="#" class="btn"><i class="l_border"></i>删 除<i class="r_border"></i></a><a href="#" class="btn"><i class="l_border"></i>删 除<i class="r_border"></i></a><a href="#" class="btn"><i class="l_border"></i>删 除<i class="r_border"></i></a> </body></html> I used the a tag to simulate an adaptive button. In fact, the other effects are similar~ Just take a look
Quote from the 1st floor’s reply:
Just use 6ed09268cbdd0015bce8dcbbdfa9bfe4, add cursor:pointer, and it’s done. ^_^
But you have to link to a specified website. For example, click on the picture to link to www.163.com, so what should I do...?
Just one sentence of script will do. Of course you can also use the one on the 3rd floor.
If we just realize the function
8aa2918506a11e8a886e85949f1eb079f8d9cde947de1719581060b617c87f215db79b134e9f6b82c0b36e0489ee08ed
I can’t say much about the efficiency
Me I did it this way before, but a problem arose. When I want to change the color of all links on the page to black, I set "color:black". Under IE 9, a black frame will be drawn on the picture. If the COLOR is changed to blue, a blue frame will also be drawn on the picture. It doesn't happen in CHROME, etc. It's very frustrating. PS: I haven’t added the BORDER setting under A’s CSS. It’s very strange and I don’t know why there is such a strange effect.