Grow your CSS skills. Land your dream job.

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

  • # February 5, 2011 at 8:41 am

    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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".