...

View Full Version : Change background position on mouse-hover



ktsixit
10-11-2011, 03:42 PM
Hi all,
I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason.


html:

<div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>


javascript:

<script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>

css:

#service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}

Could you help me fix this please??

venegal
10-11-2011, 04:57 PM
The parens around the background position values are wrong.

This:

$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");

is supposed to be this:


$("#service_box1").stop().animate({backgroundPosition:"0 -250px"}, "slow");

ktsixit
10-12-2011, 02:10 PM
hi venegal and thank you for your reply.

I changed the code but it's still not working.

4jd
10-12-2011, 03:41 PM
Not sure what you need it for but have you tried using CSS?



.className a {
display: block;
width: 100px;
height: 20px;
background: transparent url(img.jpg) no-repeat;
}

.className a:hover {
background-position: -100px 0;
}

<div class="className">
<a href="#">link</a>
</div>


Just thought I'd throw my 2 cents worth, Good Luck
--------------
Jay

venegal
10-12-2011, 05:09 PM
4jd: CSS won't work here, since the trigger is different from (and not an ancestor of) the element whose background needs to change. Also, it's supposed to be animated.

ktsixit: There doesn't seem to be anything else wrong with the code you posted, so if it's still not working, you're probably not using a plugin that actually enables animating the background position. With vanilla jQuery, you can't do that, since it doesn't take a single numerical value. So, use something like this: http://plugins.jquery.com/project/backgroundPosition-Effect.

ktsixit
10-13-2011, 09:01 AM
venegal,

I'll try to use the script you suggested, although I'm already using jquery in my page. I'll tell you if it worked or not

venegal
10-13-2011, 09:51 AM
venegal,

I'll try to use the script you suggested, although I'm already using jquery in my page. I'll tell you if it worked or not

That "although" doesn't make much sense here you are supposed to use that plugin because you are using jQuery. It extends jQuery with the ability to animate background positions.

If it doesn't work for some reason, you will have to show a live example, so we see how you actually implemented it.

ktsixit
10-13-2011, 10:19 AM
ok, it's finally working. Thank you very much for your help :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum