Postbit buttons rollover?

[Tetractys]

I want to create an image rollover effect for the postbit buttons ( edit, reply, quote, multiquote, quickreply) So far I've only been able top get the hover to appear underneath the original button using this addition to the postbit template:


<a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" onmouseover="this.className='edit_over';"

onmouseout="this.className='edit';"/></a>CSS additional definitions:


/* **** image rollover button effect for edit button **** */

.edit
{
background-image: url(forum/images/buttons/edit.gif);
}


.edit_over
{
background-image: url(forum/images/buttons/edit_over.gif);
}

/* **** end image rollover button effect **** */What is missing here?

[gothic]

This worked for me :)


<div class="edit">
<div id="edit"><a class="edit" href="path"></a>
</div>
</div>


.edit{ background:url(forum/images/buttons/edit.gif);float:left;display:block; width:Xpx; height:Xpx; }
.edit a:hover { background:url(forum/images/buttons/edit_over.gif); }

[Bisha]

Better for an rollover image is using css with 1 image for both cases.

Make just one img with two options and called overbutton.gif:
________
|edit.gif|
|--------|
|editover|


.edit a { background:url(forum/images/buttons/overbutton.gif) left bottom no-repeat; }
.edit a:hover { background:url(forum/images/buttons/overbutton.gif) left top no-repeat; }