Using a background image rather than img rel with Flowplayer Apple overlay?

[DarrenClark]

Hi,

I’m using the apple effect overlay (flowplayer jQuery tools – http://flowplayer.org/tools/demos/overlay/apple.html) as part of my portfolio site. I would like to amend the jQuery function so that it’s possible to use a background image within an anchor tag, rather than the standard rel img.

I’m wanting to do this so that I can load all of the imagery from a sprite, rather than individual extra http requests for each img.

Is it possible to do this, can I just swap the class on the a upon hover?

The current example is here : http://www.darrenclarkdesign.com.

And the code is:

$$(document).ready(function(){

$(".roll_dc").hover(function() {

$(this).attr("src","images/portfolio_thumb1_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb1.jpg");

});

});



$(document).ready(function(){

$(".roll_dc2").hover(function() {

$(this).attr("src","images/portfolio_thumb2_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb2.jpg");

});

});



$(document).ready(function(){

$(".roll_dc3").hover(function() {

$(this).attr("src","images/portfolio_thumb3_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb3.jpg");

});

});



$(document).ready(function(){

$(".roll_dc4").hover(function() {

$(this).attr("src","images/portfolio_thumb4_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb4.jpg");

});

});



$(document).ready(function(){

$(".roll_dc5").hover(function() {

$(this).attr("src","images/portfolio_thumb5_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb5.jpg");

});

});



$(document).ready(function(){

$(".roll_dc6").hover(function() {

$(this).attr("src","images/portfolio_thumb6_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb6.jpg");

});

});



$(document).ready(function(){

$(".roll_dc7").hover(function() {

$(this).attr("src","images/portfolio_thumb7_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb7.jpg");

});

});



$(document).ready(function(){

$(".roll_dc8").hover(function() {

$(this).attr("src","images/portfolio_thumb8_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb8.jpg");

});

});



$(document).ready(function(){

$(".roll_dc9").hover(function() {

$(this).attr("src","images/portfolio_thumb9_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb9.jpg");

});

});



$(document).ready(function(){

$(".roll_dc10").hover(function() {

$(this).attr("src","images/portfolio_thumb10_over.jpg");

}, function() {

$(this).attr("src","images/portfolio_thumb10.jpg");

});

});

Also, as you can see I’ve hard coded a hover state for each portfolio item, is there a simpler way to do this so that it’s just one function where the relative img (or would be anchor) is replaced upon hover?

Any help is greatly appreciated.

Thanks,
Darren

[Author]

Posts