transparency as an option

[B&T]

I would like to mouse over an image and have it get a little darker (mouseover links). I can see two options for this.

1) make another copy of the same image and darken it. But I want to do this iwth many images.

so I was thinking . . .

2) make a transparent .gif file that is maybe 75% transparent and 25% black (just as a guess) that could be put over any image to shade it.

It that a good idea or not? and why.

And if it is a good idea, how do I create such a .gif? I have played around with the limited tools that I have (PhotoDraw) and I cannot get there. I alter the transparency but cannot get the effect I am seeking.

Does anyone have such a .gif they are willing to post?

[B&T]

OK then . . . not being a graphics guru I just thought I would ask. Looks like it is back to option 1. That will work.

[Skunkboy]

not knowing the exact use, black would only be sufficient if your background were black. As long as you've got a solid color background, you could make a gif the same dimensions as your original image and have it be the same color as your background then give some transparency to it. Sure, it would give a hue to your original instead of "darker" but if you're using a black background on the page then perhaps it would be okay. As long as it's a solid color background to the page, you won't see that it's a separate image (in theory). -just an idea

[WATRD]

Are all the images the same size? It wouldn't be that difficult to create a gif with three parts one color and one part another color in random pixle order, kind of like snow. Then you could make the three parts transparent and overlay the images you want to "shade". It becomes a bit more complex if the pictures are different sizes, but not impossible. It might take some playing to make the overlay not appear too grainy and to get the color "right" so it's not too obvious, but it shouldn't be too hard to create.

[B&T]

I think I was reaching for an easier solution that turns out to be harder and does not look as good.

Thanks for responding.

[Croc Hunter]

A gif can do it but gifs simply save as one of 255 solid colors or no color - clear. When you save the gif it will make every second pixel clear and you get an ugly solid color pattern over the underlying image. In Photoshop you can select three patterns - diffusion pattern or noise.

Anyway, what you are better to use is a png24 image, it retains true transparency. I've inserted a 100x50px one filled with black at 33% opacity for you to play with. It could be red at 10% like the second example or whatever you like. If it suits your need, let me know exactly what dimensions etc you want.

It is a good idea, you'll get smaller filesize so faster load time. And it will save you the time of making a second darker version of all buttons.

http://streetsie.com/images/33percent_clear_black.png http://streetsie.com/images/10percent_clear_red.png

[B&T]

Those png images show as solid in my browser. I think I will just punt on this idea.

[Croc Hunter]

What browser? IE handles png fine. In the post they look light grey and light pink to me.

[WATRD]

I see them as gunmetal gray and light gray in IE and gunmetal gray and pinkish in Firefox.

[Nate]

Why not just use a bit of CSS and some simple javascript like so:

http://www.alterform.com/trans.php
?

(if this is what you're looking for, feel free to take everything out of the source)

Works in IE, Firefox, and Safari :)

[Dabrowski]

I know I've seen somewhere a method of creating an image that is alternating black (and, I guess, clear) pixels to create a screen to lay over an image. But I can't find anything at the moment.

[TrashTrampoline]

you could create a new fill layer of black then just adjust its opacity til you find a shade you like.