Quote:
Originally Posted by digitaldivas
Thanks Harvey again, for the code and the info, I appreciate it. I am building it with dreamweaver, the rollovers are auto commands, yeah this site is static all day long. Thanks papill0n for your 2 cents, hope your well, you too Josh!
|
Like I said, I really like your layouts, and this is no exception. As for DreamWeaver, I don't use it at all, mainly due to this kind of outputs, but I'm pretty sure you can define CSS classes to apply, that way you won't need the JS
On a side note, I made a mistake on the CSS, the way I did it it will show the full image first and the darker image on hover, when you have the opposite, so it should be like this:
Code:
.narrowtd{width:92px; background:#333;}
.myimgclass{width:90px; height:194px; border:1px solid #fff;opacity:.50;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);}
.myimgclass:hover{opacity:.100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}
where, of course, the "50" values are 50% transparency (you can play with those values)
furthermore, if you don't care about the image classes, you can imply use this:
Code:
.narrowtd{width:92px; background:#333;}
.narrowtd img{width:90px; height:194px; border:1px solid #fff;opacity:.50;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);}
.narrowtd img:hover{opacity:.100;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);}
this way, any image inside those narrow column tables will show the opacity effect without the need to add the img class