Question

I have this script using jquery:

$(document).ready(function() {
    $('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(1000, 1);
        }, function () {
    $span.stop().fadeTo(1000, 0);
        });
    });
});

I have this CSS code:

.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}

.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
}

This is my site My test site How can I make the buttons working as radio buttons so there will be third part of image which will show after click and hide after click on another button. And when clicked part is shown, the hover function should not work on this button. Is there a way to do that?

Answer 1

Finally this is my final solution and it works as I need…

Script:

$(document).ready(function() {
    $('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {

            $span.stop().fadeTo(1000, 1);
        }, function () {
    $span.stop().fadeTo(1000, 0);
        });

$(".fotky").mousedown(function(){
$(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
  $(this).addClass("fotkyk"); 
$span.stop().fadeTo(1000, 0);
end;    
    });

    $(".video").mousedown(function(){
    $(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
$(this).addClass("videok");
$span.stop().fadeTo(1000, 0);   
    });

CSS:

#tlacidlo {
height: 400px;
width: 126px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}
.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
    }
.fotkyk {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: center;
}

HTML:

<div id="tlacidlo">
<a href="#" class="fotky"></a>
<a href="#" class="video"></a>
<a href="#" class="diskusia"></a>
<a href="#" class="onas"></a>
<a href="#" class="zbrane"></a>
<a href="#" class="akcie"></a>
</div>

Of caurse it is only part of code because it is repeating almost same on script and css.