...

View Full Version : Changing image buttons



Repatilian
07-20-2010, 07:55 AM
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

tjm
07-20-2010, 01:04 PM
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

Repatilian
07-20-2010, 06:04 PM
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.

phpdeveloper
07-20-2010, 07:10 PM
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>

Repatilian
07-21-2010, 12:16 AM
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

Repatilian
07-21-2010, 01:07 AM
yeah i'm doing images. i didn't say i'm sorry.

Repatilian
07-21-2010, 01:08 AM
yeah i'm doing images. i didn't say i'm sorry.

whoops i posted on wrong forum

Major Payne
07-21-2010, 10:02 PM
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.

Repatilian
07-22-2010, 01:43 AM
yeah i'm using internet explorer. do you have to have .png's?
thanks

Repatilian
07-22-2010, 02:00 AM
yeah i'm using internet explorer. do you have to have .png's?
thanks

or can you do it with gif's for explorer

Repatilian
07-22-2010, 04:13 AM
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

Major Payne
07-22-2010, 06:39 AM
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)

_Aerospace_Eng_
07-22-2010, 06:46 AM
IE 8 also has problems with pngs.
In what ways? IE 7 and 8 display transparent pngs just fine.

Major Payne
07-22-2010, 08:20 AM
Not when it contains alpha information. Nor when using some opacity CSS properties.

_Aerospace_Eng_
07-22-2010, 03:40 PM
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.

Repatilian
07-22-2010, 11:01 PM
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.

Repatilian
07-22-2010, 11:03 PM
i will put them in unordered list.

Repatilian
07-23-2010, 08:17 AM
ok i got the site up. i'm still adding to it. check it out:

www.marksbodyshop.org

tjoyce0909
08-03-2010, 05:06 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum