Applying image swap on mouseclick to existing CSS mouseover

Question

I've hit a wall, and I'am up against a deadline. So here goes.

I have a 3x3 grid that has a background image in each of the 8 outer divs, that when hovered over, using CSS, change.

The central div has text that using a bit of jQuery, shows when each corresponding div is clicked.

What I need to happen is when the outer divs with the image in are clicked and the text shows, is for the background image in that div to stay in the hovered state, until another one is clicked, ideally using the existing image.

The CSS for the hovers are -

.br a {
display:block;
width:250px;
margin:0;
height:225px;
float:left;
background:url('wp-content/themes/bondwoodhouse/img/br.png');
background-position:0px 0px;}
.br a:hover {
background:url('wp-content/themes/bondwoodhouse/img/br.png');
background-position:250px 250px; }

and the jQuery is -

$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("fadeIn").siblings().hide("fadeIn");
});
});

with all the divs laid out thus -

<div class="br"><a href="#" onclick="return false;" name="div9"></a></div>

As mentioned, there are 8 separate classes, br is the bottom right one.

This is probably fairly easy, but I get pretty lost with jQuery. I'm assuming I may be able to stick something into the existing jQuery that just swaps out the image? toggle or something?

The whole page is very last minute and thrown together, but this is the last stumbling block. Any help greatly appreciated.

Answer 1

You can add some .selected rules to your CSS, which will behave like the hover rule:

/* Highlight if hover and also if the .br is selected */
.br a:hover,
.br.selected a {
  background:url('wp-content/themes/bondwoodhouse/img/br.png');
  background-position:250px 250px;
}

And set this selected on the divs:

var selectedTile = $();
$(".container > div > a").click(function() {
    // remove the selected class from the previously
    // selected element (does nothing for the first time)
    selectedTile.removeClass("selected");
    selectedTile = $(this).parent();
    selectedTile.addClass("selected");
});

Assuming the a container element:

<div class="container">
<div class="br"><a href="javascript:;"></a></div>
<div class="tl"><a href="javascript:;"></a></div>
</div>​

Your script might look like something like this:

$(document).ready(function(){
    var selectedTile = $();
    $('a').click(function () {
        var divname= this.name;
        $("#"+divname).show("fadeIn").siblings().hide("fadeIn");

        // remove the selected class from the previously
        // selected element (does nothing for the first time)
        selectedTile.removeClass("selected");
        selectedTile = $(this).parent();
        selectedTile.addClass("selected");
    });
});

This would work if you modify your CSS as explained above.

Here's the Fiddle

Answer 2

The .hide() and the .show() methods in jQuery do not support 'fadeIn' or 'fadeOut', use 'fast', 'slow' or any number as miliseconds(ms) integer, i.e. 400, like this:

$("#"+divname).show("slow").siblings().hide("slow");

If you insists to use fadeIn or fadeOut animation, you should use .animate() method instead, like this:

$("#"+divname).show().animate({height:"toggle",opacity: "toggle"},duration:"slow"}).siblings().hide().animate({height:"toggle",opacity:"toggle"},{duration:"slow"});

See here for more details.