HTML hover effect

How am i going to add a hover effect on images to my html loading page? from non color to colored when hover?

You will need to use a class name for the elements you wish to add a hover effect to as you cannot use pseudo selectors in inline styles, since it only has meaning in the stylesheet. I'll give you an example of adding a hover effect to an image which I used on one of my forum widgets.

For the image I used "donateb" as my class selector for CSS, please be sure to close your tags at the appropriate areas to prevent issues with your forum.

Code:

<span class="donateb"><img src="http://i38.servimg.com/u/f38/15/62/32/35/donati10.png"></span>

With .donateb as my selector, I can then modify the opacity of the image when it is hovered over using the pseudo selector :hover. You can also use the same span class for multiple images on your forum that you wish to add such a hover effect to, even in messages where :hover wasn't applicable.

Code:

.donateb{
    filter:alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 1.0;
   }
.donateb:hover{
    filter:alpha(opacity=50);  
    -moz-opacity: 0.65;  
    opacity: 0.55;
    }

The above is an opacity hover effect, but I'm sure you know how to modify color and such using CSS. If you have anymore questions feel free to say.

so i should put that tag in all images??

im talking to his.. see ~> http://animeph.4umer.com/

Not precisely, for that type of effect you'd use an HTML mouse over for your images. See the code below:

Code:

<img src="http://i34.servimg.com/u/f34/18/21/60/73/member10.png" onmouseover="this.src='http://i34.servimg.com/u/f34/18/21/60/73/fullme10.png'"
onmouseout="this.src='http://i34.servimg.com/u/f34/18/21/60/73/member10.png'">

onmouseover is the content displayed when the user rolls their mouse over the object.

onmouseout is the content displayed when the user rolls their mouse off the object. It will usually be the default image displayed before mouseover. You will of course be using different images to present such an effect.(i.e. dark or lighter images)

where should i paste that? in body tag?

If it is going into the body of the page, then yes. If you're making the image a link be sure to place it in between the href tags.

Hello , add this code anywhere in your template.

Code:

<style type="text/css">#wrapper-200a{width:250px;float:right;} img{opacity:0.7;} img:hover{opacity:1;}</style>

Images had 0.7 opacity and when hover over they , opacity become 1

i only want it to my html loading page.

solved. thanks