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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How Do I Create a partially-transpartent Button?

    I'm making a slideshow with where the buttons to go to the next image are opaque and floating over the slide. I wanted to make the images rounded, but the only way I could think of doing so was by creating a partially-transparent GIF image. It seems as if it works as a normal <IMG> type, but when I make the button's background-Image: URL into the gif, it's not transparent. Here's the code:
    Code:
    .transButton {
    position: relative;
    background-Image: URL(http://www.geocities.com/interpolerater/Button1.gif);
    font-family: arial;
    -moz-opacity:0.25; filter:Alpha(Opacity=25);
    font-size: small;
    width: 100;
    height: 32;
    color: ffffff;
    text-align: center;
    border: none;
    top:50;
    }
    <Body> Section
    Code:
    <input Class="transButton" type='Button' value='Last >>' id='-100' onclick='change(this.id)'><p>
    <img src='http://i80.photobucket.com/albums/j164/interpolerater/' value='0' id='slide' onload='if (this.height>550){this.height=550}'>
    How would I make the image rounded when it's floating over an image?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Png

    There is no such thing as a partially transparent gif; the gif format only supports single bit transparency (either full or nothing). For partial transparency you'll need the png format with a full 8 bit alpha channel--which IE6.0 doesn't natively support (and I believe IE7.0 still doesn't... ).
    Here is a partial workaround for that issue: Transparent PNG Support. Also a worthwhile read: Cross-Browser Variable Opacity with PNG: A Real Solution (more about image formats).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I didn't really specify what I meant. The 'Partially Transparent' GIF is a gif with a one of the colours chosen to be transparent, like this:

    I make the image transparent with Photoshop and then upload it; I do not make it transparent with CSS. What I am wonding is why it's only see-through when I display it as an <IMG>, but won't when I make the background-Image of a button the same image.

    This Works:
    <img src="http://www.geocities.com/interpolerater/Button1.gif">

    This Doesn't
    <input style="background-Image: URL(http://www.geocities.com/interpolerater/Button1.gif);">

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah... I just saw the button on the forum and realized it was a transparent GIF, so I viewed it. It's not a button, it's an image, but I don't care! I totally forgot I could do that... Thanks for the reply anyways.


  •  

    Posting Permissions

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