Changing image buttons

Hi I was wondering if anyone knew the code for buttons that change the image when hovered over and chnage the image when clicked. I'm using gifs. I don't know if it's javascript or xml? thank you

shane

shane,

if u r trying it on application front, the trick is to create two copies of image with appropriate shades and display them using the onmouseover and onmouseout. to create images try www.cooltext.com

ok does the mouseover and out create the look of the button when you click it. i have three pictures. one normal, and one a little brighter (for the mouse over) and one a little darker for clicking. thanks man.

You can also do using HTML and CSS
Example code :

.classname a div{
background:url(../images/btn.png) center right no-repeat;
height:60px;
line-height:75px;
cursor:pointer;
}
.classname a:hover div{
background:url(../images/btn-hover.png) center right no-repeat;
height:60px;
line-height:75px;
cursor:pointer;
}

<div class="classname">
<a href="#"><div>&nbsp;</div>
<label>Button</label>
</div>

does that display the btn.png image? i put in my png's and it didn't work. does that put another image for the button down movement? i kindof wanted an image for the button up movement too. thanks

yeah i'm doing images. i didn't say i'm sorry.

yeah i'm doing images. i didn't say i'm sorry.

whoops i posted on wrong forum

You can change images using mouseovers and onclick events, but if you are not seeing the png images properly, you may be using Internet Explorer which has problems with pngs. Especially those using transparency. There is a png fix for IE which needs to be used with these types of png images. Hopefully, IE 9 will solve all this.

yeah i'm using internet explorer. do you have to have .png's?
thanks

yeah i'm using internet explorer. do you have to have .png's?
thanks

or can you do it with gif's for explorer

or can you do it with gif's for explorer

here's a link to my other post with pictures of my images. I just need to put a button on my website.

http://www.codingforums.com/showthread.php?p=974653#post974653

I would stick with GIFs since the images are using few colors. Even jpg would be fine.

I like the look of pngs and use them all the time since I could care less about IE and the people that use it. Too bad the png "fix" uses Javascript. IE 8 also has problems with pngs. Could try this between the head tags although I don't use it:

<meta http-equiv="X-UA-Compatible" content="IE=7">

Just in case:

PNG in Windows IE: The Solution (http://homepage.ntlworld.com/bobosola/pngtestfixed.htm)

IE 8 also has problems with pngs.
In what ways? IE 7 and 8 display transparent pngs just fine.

Not when it contains alpha information. Nor when using some opacity CSS properties.

Alpha transparency works fine. Yes when changing its opacity it can get artifacts around the edges but normal alpha transparency works fine. The only issue that I've seen that is consistent across IE browsers is the gamma value. It seems to make the png darker in color than what it should be but there is software that will remove the gamma chunk from the image.

well sometimes i see junk when i'm doing things within the same document in corel draw but they seem to disappear when i reload the program. well i used transparency when i exported the files.

i will put them in unordered list.

ok i got the site up. i'm still adding to it. check it out:

www.marksbodyshop.org

fyi - you have an inline stylesheet in your index.html file and you have an external css <link rel="stylesheet" type="text/css" href="css/main.css">
seems like an unnecessary http request.

also, you might want to stop the background from repeating by adding this to your css.

#container{
background-repeat: none;


one more fyi, you have nothing in the website to tell search engines what the site is. All of your text is an image and you have no description tags. A site like this will never be found by major search engines. Try to use actual text whenever possible.