Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    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

  • #2
    tjm
    tjm is offline
    New Coder
    Join Date
    Mar 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Posts
    149
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Also possible using HTML and CSS

    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;
    cursorointer;
    }
    .classname a:hover div{
    background:url(../images/btn-hover.png) center right no-repeat;
    height:60px;
    line-height:75px;
    cursorointer;
    }

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

  • #5
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    yeah i'm doing images. i didn't say i'm sorry.

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    yeah i'm doing images. i didn't say i'm sorry.
    whoops i posted on wrong forum

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    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.
    ☠ ☠RON☠ ☠

  • #9
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    yeah i'm using internet explorer. do you have to have .png's?
    thanks

  • #10
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    yeah i'm using internet explorer. do you have to have .png's?
    thanks
    or can you do it with gif's for explorer

  • #11
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by Repatilian View Post
    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/showthre...653#post974653

  • #12
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    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:

    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    Just in case:

    PNG in Windows IE: The Solution
    Last edited by Major Payne; 07-22-2010 at 06:43 AM.
    ☠ ☠RON☠ ☠

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Major Payne View Post
    IE 8 also has problems with pngs.
    In what ways? IE 7 and 8 display transparent pngs just fine.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    837
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Not when it contains alpha information. Nor when using some opacity CSS properties.
    ☠ ☠RON☠ ☠

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •