CSS Help Please Read!

[Neil_8_24_93]

Hello, I was wondering if anyone knew the CSS code to change the alpha/opacity of an object e.g button. Because I want my button to be in front of an image so when people click on that image it makes it look as if the image is the button.

[notjustgraphics]

I'm not sure exactly what your trying to explain here...

You may be able to do what you're asking with a roll-over... you would have to make the first image opaque, and the second image would have to be a transparent image (.GIF or .PNG).

You can set the background to be transparent using a tag such as this:
background: transparent url(imagename.gif);

You would have to place your buttons in a DIV or TD but they will be partially transparent all the time.

You might also be able to do what you want simply using an image map over top of the area of the image you want to operate as a button.

Well, that's three solutions... I hope one of them helps you... If not, try explaining in a little more detail so I can understand better what your are trying to achieve....

Mike.

[Neil_8_24_93]

Yes I want the image to operate as a button. How do I do this?

[Krazy3]

Here Ya Go:

#one { float: left; background-image: url(YOUR IMAGE #1); background-repeat: no-repeat; }

#one:hover { float: left; background-image: url(YOUR IMAGE #2); background-repeat: no-repeat; }

#one:active { float: left; background-image: url(YOUR IMAGE #3); background-repeat: no-repeat; }

Just make sure you specify an <a> tag with the right id and edit the CSS to fit your image width and height. =)

Hope this helped!

[notjustgraphics]

Sorry Neil_8_24_93... I'm not really sure what you're trying to do...

Let me see if I have it correctly: You have a large background image over which you want to place a button... and when someone clicks on the button you want it to be transparent so they see the image beneath?

OR

You have a large image and you want one section of it to operate as a button that does not change when clicked?

Are either of these close?

If it is the first one, you need to define a DIV to hold the button image, but placing it becomes more complex... I can help you if this is what you need...

If it is the second, you can easily use an image map to make a section of a larger image operate as a button... (You can have many image maps over your larger image)

I can help you with this too if this is what you need.

If I am wrong in both assumptions, you will have to be more clear about what you want so I or other BioRUSTers can help.

If all you need is the CSS tag for transparency, it's:

background: transparent url(imagename.gif);

Mike.

[jbiljr]

Hey Neil,

As a CSS designer I would tell you to scrap the use of an image for a button. If you are going to use an image it is always good practice to use a tiled gradient so you can keep the file and load time down. If you have to use an image, and believe me I use them a lot my self, using a transparent GIF will work fine. You can get really decent effects if you use a good CSS code to complement it. Here is a CSS that I use to get the effect.

<style type="text/css">
<!-- 
/* This is the background image */
#bg {
	width: 400px;
	height: 300px;
	background: url(yourimage.gif) repeat;
	border: 2px solid black;
	}
	
/* This is the transparent box */
#transbox {
	width: 300px;
	margin: 0 50px;
	background-color: #fff;
	border: 2px solid black;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	}
	
/* This is the container which set text to solid color.
position: relative used for IE */	
#transbox div {
	padding: 20px;
	font-weight: bold;
	color: #000;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	position: relative;
	}
-->
</style>

Here is the HTML to bring it all together

<div id="bg">
  <div id="transbox">
    <div>50% Lorem ipsum dolor sit amet, consectetuer adipiscing etc. etc.</div>
  </div>
</div>

This example will create a small 400 x 300 box with a transparent box over it including some text inside. Edit the code to suit your needs.

This should work in IE, Firefox, Safari, and Konqueror. You will notice that the transparency is declared 3 times so that it will work in all browsers.

Hope that helped