image rollovers... withOUT using javascript

my website has a gallery.
the thumbnails are small jpeg images.

i want to have them darker, then when you roll over it, they become normal.

now i know i can do this with the javascript swap image technique. but that is sloppy, slow, and ugly.

i tried using CSS by using this technique:

a:link img
 {
} 

a:hover img
 {
}  

Code (markup):

then changing the hover background to a solid color.

it just isn't displaying. the one and only thing i could figure out is how to change the border colors on the link and hover (using css)


are there other techniques to do what i am trying to do?
without using js
preferably with css

thanks

 

Use this method -> http://wellstyled.com/css-nopreload-rollovers.html

 

Or the one here http://www.subcide.com/tutorials/csslayout/, which I've tested and I'm using too at http://eastbournewebdesign.net for my menu.

 

both of those methods will require me to make a new thumbnail image for every rollover.

put it this way...

i want to style the img tag so that ALL IMG links have a transparent png over them... then on HOVER, i want the transparent png to disappear.

 

Try adding this to your stylesheet;

a:link img {
filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
} 

a:hover img {
filter:alpha(opacity=100);-moz-opacity:.100;opacity:.100;
}

Code (markup):

Its probably the best you can achieve with the smallest amount of work in CSS. Only takes two rules, not bad compared to the old, chunky methods of image manipulation.

 

Is this a cross browser method?

 

As far as I am aware, yes. There are 3 tags in each CSS rule, these apply to the various browsers.

opacity: is the CSS3 standard
-moz-opacity: is for old gecko-based browsers (FF)
filter:alpha(opacity=xx); is for IE6+7

I have personally tested them on IE 6+7 and Firefox but not Opera. Anyone using an older browser than IE6 probably doesn't deserve to be online.

W3schools: w3schools.com/Css/css_image_transparency.asp

 

You can remove -moz-opacity since opacity has worked in FF for quite a while now.

 

Do you know which version from? It may be worthwhile leaving it in for those folk still using an older version for a bit longer. Just a thought.

Also, FF isnt the only browser that uses the gecko engine.

 

hmm...

that code seems to be doing it's job, but there's still a bug.

FF and IE aren't recognizing 100% opacity with the code you listed.

the closest i could get it to look was using 90 instead of 100. see here:

a:link img   {
	filter:alpha(opacity=100);opacity:.100;
}
a:visited img   {
	filter:alpha(opacity=100);opacity:.100;
}
a:hover img {
	filter:alpha(opacity=99);opacity:.99;
}

Code (markup):

it recognizes the 100 as 50%, so it's pretty much 50% opacity, then when i rollover, the images turn to 99% (closest i could get to 100. if i type in 100, it sets it to around 50%)


very odd...

 

wait, i think i got it!

a:link img   {
	opacity:0.4;filter:alpha(opacity=40)
}
a:visited img   {
	opacity:0.4;filter:alpha(opacity=40)
}
a:hover img {
	opacity:1.0;filter:alpha(opacity=100)
}

Code (markup):

that seems to be working A-OKAY.

is it cross browser compatible though?
(i'm still learning, and i don't really know what is and isn't browser compatible)

 

Yup, it works on all the popular browsers.