About the picture button problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

About the picture button problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:14:09

Original

874 people have browsed it

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 , add cursor:pointer, and it’s done. ^_^

Just use , 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

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>

Copy after login

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 , 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

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.