Customize ImageButton control with image hover/click, with any font style you want.

My first CodeProject article ^^

CodeProject is a place for programmer to share their experience and code. I’ve been there many times but this is the first time I publish an article there.

read my article here!

Advertisements

when mouse is over – hover

Hover is active when your mouse is placed over the element.

According to W3C standard, hover is for every element.

CSS

style{ no mouse over }

style:hover{ when mouse over }

The style will change accordingly to make an really useful effect

which can distinguish what you are clicking.

This is almost used on every website nowadays.

but again, IE sucks, IE only support hover for <a> element.

We need to use Javascript to do that effect instead

which I consider as a hack.

Not a good thing to do but life is like that, what you gonna do.

Complete example:

Standard style

CSS:

div.trans {width: 100%; background-color: silver;border:1px solid black; }

div.trans:hover{width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black;}

HTML:

<div class="trans"><p style="padding:5px;width:75%;">Hover here. The works in Mozilla and  Opera.</p></div>

IE compatible style

CSS:

div.transOFF {width: 100%; background-color: silver;border:1px solid black; }

div.transON {width: 100%; background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black; }

HTML:

<div class="transOFF" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'"><p style="padding:5px;width:75%;">Hover here. The Filter Opacity works in Mozilla and IE.  It also works in current versions of Opera.</p></div>

REMARK: use this carefully, mixing with different size and z-index will make hover act nasty.