Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts

    On rollover, image is used, background is resize

    If someone could tell me what this is called that would be great, the vote buttons here jyte.com

    I am trying to do this myself but I cannot seem to get my head around it, when I create a #linknav a:hover and I use a background, the image does not get larger like it should, instead only a portion of the image is shown in the orignal dimension.

    Could someone please offer some guide. Thank you.
    I am on my way. :)

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Looks like they've used some javascript for that. Because I found this in the source:

    Code:
    <div class="claim_voting_widget">
    
      <div id="showing_vote_1"
           class="showing_votes high_green_value"
           onmouseover="open_polls(1);">
    
        <a id="votes_left_1"
             rev="vote-for"
           class="left_value big_number "
           href="/auth/login?dest=http%3A%2F%2Fjyte.com%2Fcl%2Fthe-existence-of-any-gods-or-god-like-beings-cannot-be-proven" rel="nofollow">
          <span id="votes_left_text_1" style="color:#fff;">27</span>
        </a>
    
        <a id="votes_right_1"
           rev="vote-against"
           class="right_value big_number "
           href="/auth/login?dest=http%3A%2F%2Fjyte.com%2Fcl%2Fthe-existence-of-any-gods-or-god-like-beings-cannot-be-proven" rel="nofollow">
          <span id="votes_right_text_1" style="color:#fff;">10</span>
        </a>    
      </div>
    
      <div id="making_vote_1" class="making_a_vote"
           onmouseover="keep_open(this);"
           onmouseout="close_polls(this);"
           style="display:none;">
    
        <a href="/auth/login?dest=http%3A%2F%2Fjyte.com%2Fcl%2Fthe-existence-of-any-gods-or-god-like-beings-cannot-be-proven"
           id="votes_for_1" class="left_value big_number"
           rev="vote-for"
           onmouseover="position_background(this);"
           onmouseout="reposition_background(this);"
                  rel="nofollow">
          <span id="voting_left_text_1"
                style="color:#fff;">27</span>
    
        </a>
    
        <a href="/auth/login?dest=http%3A%2F%2Fjyte.com%2Fcl%2Fthe-existence-of-any-gods-or-god-like-beings-cannot-be-proven"
           id="votes_against_1" class="right_value big_number"
           rev="vote-against"
           onmouseover="position_background(this);"
           onmouseout="reposition_background(this);"
                  rel="nofollow">
          <span id="voting_right_text_1"
                style="color:#fff;">10</span>
        </a>
        
      </div>
    
    </div>
    This is just the code for the first of those 5 buttons.
    .
    .

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So is there not a way to do it with css? I already have the backend of my buttons programmed, I simply want to resize the button on mouseover... any ideas?
    I am on my way. :)

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Remember that width and height does not apply to non-replaced inline elements such as <a> and <span> are by default.

    You may need to make the <a> element block-level. Maybe floating would do the job.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •