Postbit buttons rollover?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Tetractys
    New Member
    • Sep 2007
    • 11
    • 3.6.x

    Postbit buttons rollover?

    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:

    Code:
    <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:

    Code:
    /* **** 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
    Member
    • Apr 2004
    • 45

    #2
    This worked for me

    PHP Code:
     <div class="edit">
         <
    div id="edit"><class="edit" href="path"></a>
         </
    div>
         </
    div
    PHP Code:
    .editbackground:url(forum/images/buttons/edit.gif);float:left;display:blockwidth:Xpxheight:Xpx; }
    .
    edit a:hover background:url(forum/images/buttons/edit_over.gif); } 

    Comment

    • CrossoverX
      Senior Member
      • Mar 2006
      • 206
      • 3.5.x

      #3
      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; }
      Zzz!!!! aBlog!
      aBird tweets!

      Comment

      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
      Working...