How to keep area selected on click instead of over

I tri开发者_运维技巧ed active but when I unclicked it wouldn't stay selected.

Here is where I am trying to do it. You will see that On the hover it gets selected.

http://www.prototypesyndicate.com/_forms/marketing_packages.html#premium

JQuery to the rescue. There is more than one way to skin this cat.

$('.area').hover(function() {
    $(this).addClass('selectedArea');
    $(this).removeClass('notSelectedArea');
}, function() {
    $(this).addClass('notSelectedArea');
    $(this).removeClass('selectedArea');
});

You can't activate it. you need to have a css class that dictates the look of the area when it is "selected" and a class that dictates how it looks when not selected. Then just swap them out with jquery.