View Full Version : Image fading


MaGiCSuN
08-15-2003, 04:06 PM
Oh yes, i'm going to ask something stupid for a change lol.

I have this idea in my head that i can't get out of it so i want to solve it. I want my link buttons on my page to be faded, but when you hover they go to opacity 100%. I found this code on the net:

onmouseover="this.style.filter='alpha(opacity=0,finishOpacity=1 00,style=2)'" onmouseout="this.style.filter=''"

cool code, but how do i insert that into my .css file? Is that even possible? i just want to apply it to the img {} part, since those buttons are the only images on the index.html page that are linked with this stylesheet (i have two stylesheets). I have no idea how to edit this code so that it works into my stylesheet.

If someone knows another way, i would be glad to hear it. I don't want to insert it into the <img> tag itself, since it bothers me when i have to update my layout and i have to edit it all.

thanks

Love,
Mirna

staceisdead
08-17-2003, 03:35 AM
i've been looking for the exact same thing. ive been able to fade my images but they stay faded. I've been trying a few things, if i find something that works, i'll let you know. I'm sure theres a way to do it, i'll keep trying

staceisdead
08-17-2003, 03:54 AM
i found this, i haven't tried the code yet but it looks promising. Try it and see if it works
http://home.earthlink.net/~ymcvicar/gallery/buttons/

MaGiCSuN
08-18-2003, 04:18 PM
Thank you so much ! it wasn't exactly what i was looking for but the page allready told me that it wasn't possible without any javascript so i kinda gave up on what i wanted.

the code on the page however is great! i played a bit with it and now it fades from 50% to 100% on hover.

this is what i've used:

div#button a:link img {filter: Alpha(opacity=50,finishOpacity=100); color: #ffffff;}
div#button a:active img {filter: Alpha(opacity=50,finishOpacity=100); color: #ffffff;}
div#button a:visited img {filter: Alpha(opacity=50,finishOpacity=100); color: #ffffff;}
div#button a:hover img {filter: none; color: #ffffff;}

then i did <div id="button"> my buttons here </div> and it worked :) don't use class but use id.

Love,
Mirna