How to make the picture look like a button, that is, when you click on it, it will have the effect of pressing and rising. How to do it? _html/css_WEB-ITnose

I have a link made from a picture:

<a href="xxxxx.html" target="_blank"><img src="images/xxxx.jpg" width="39" height="180" border="0"></a>

Now I want this picture to have the effect of a button, that is, when clicked, it will have the effect of pressing and rising. , how to do it?

Thank you!

Reply to the discussion (solution)

Press to get different pictures.

Do you want to switch the pictures inside?

I don’t need to switch pictures, just this one picture, just simulate the button effect

Do it with css, use two pictures as the background, and change it to when the mouse passes or is pressed. Effect background on it.
b2fca42bb5295635c4d17bfc43ed8daaSpecial Topic5db79b134e9f6b82c0b36e0489ee08ed
.btn {background: url("http://a.tbcdn.cn/p/fp/2011a/assets/sprites .gif") no-repeat -311px -19px;text-indent: -9999px;}
.btn:hover{background-position: -311px -468px;}

Try box-shadow , if adjusted well, you will get the results you want

box-shadow, how to use it?

Use events in html
http://www.w3school.com.cn/html/html_eventattributes.asp

onclick script Execute the script when the mouse is clicked

onmousedown script Execute the script when the mouse button is pressed

onmouseout script Execute the script when the mouse pointer moves out of an element

onmouseover script When the mouse pointer hovers over an element Execute the script

onmouseout="this.style.color='#fff'" This style changes the font, and you can change its borders. The effect will be very clear.

Two days ago, I used the following code to control an input element:

<input type="text" value="用户名" name="" onfocus="if(this.value=='用户名') {this.value='';}this.style.color='#333';this.style.borderColor='#4d90fe';" onblur="if(this.value=='') {this.value='用户名';this.style.color='#333';}" onmouseover="this.style.borderColor='#888'" onmouseout="this.style.borderColor='#b9b9b9'" title="请输入用户名！" />

<input type="image" src="images/xxxx.jpg"   />

The picture is the same as the button.

Use css to display different images

It’s not easy to use, please help.

The image changes size when the mouse is hovered and left. Try it.

Is there any code that has been tested? I am a beginner and I don’t understand it very well, thank you

Is there any specific example? Newbie, thank you very much!

http://www.mayixueyuan.com/newshow.php?id=145

http://www.mayixueyuan.com/UploadFile/file/html_all/20110725_html_css_button/20110725_html_css_button.html

Example.

flash button

Have you visited the Qidian Chinese website?
Setting the offset by a few PX can easily achieve an approximate effect.

922fdbb730327040401c4385d98f9d7e

js:
function set(cssname,obj)
{
obj.className=cssname;
}
css:
.down(left:1px; top:1px;)
.up{left:0;top:0;}

Can you try it?

#19, it doesn’t work.

#16 Floor, I want to use pictures, not css

I wrote the event wrong. . .
f2d78b96a3a754c1a6dc0425002c2902

js:
function set(cssname,obj)
{
obj.className=cssname;
}
css:
.down(left:1px;top:1px ;)
.up{left:0;top:0;}

Try

Write it all in dreamwaver><