...

View Full Version : On rollover, image is used, background is resize



inVINCEable
07-06-2007, 08:11 PM
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.

Jutlander
07-06-2007, 08:24 PM
Looks like they've used some javascript for that. Because I found this in the source:


<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.

inVINCEable
07-07-2007, 02:08 AM
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?

koyama
07-08-2007, 01:49 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum