Question

I need to turn off a default hover state. I have the following code.

$(this).attr("id"); 
if ((this.id == "defaultTab") ){
$(img#defaultTab)[0].src.replace("_on","_off");
},

All I am telling the code if “this” hover has an id of DefaultTab, then take defaultTabs image src and replace it.

This is throwing me back errors.

Please help.

Thanks

---

I am posting my entire function for review. What is happening is that “defaultTab” doesn’t seem to exist as an object for me to get the src from.

// **************  TABs  ********************//

jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
    {
        jQuery("<img>").attr("src", arguments[i]);
    }
} 

// preload images first (can run before page is fully loaded)
$.preloadImages("images/tabs01_off.jpg", "images/tabs01_on.jpg",   "images/tabs02_off.jpg","images/tabs02_on.jpg","images/tabs03_off.jpg","images/tabs03_on.jpg","images/tabs04_off.jpg","images/tabs04_on.jpg","images/tabs05_off.jpg","images/tabs05_on.jpg","images/tabs06_off.jpg","images/tabs06_on.jpg","images/tabs07_off.jpg","images/tabs07_on.jpg","images/17.jpg","images/22.jpg","images/24.jpg","images/28.jpg","images/30.jpg","images/31.jpg","images/38.jpg" );
$(
    function()
        {
            // set up rollover  -- this controls the hover states
            $("img.rollover").hover(
                function()
                    {

                    var image_id=$(this).attr("data-image"); // created a variable, making this an Jquery wrapped object.
                    this.src = this.src.replace("_off","_on");
                    $('#changeImg').css("background-image", "url(images/"+ image_id +'.jpg)'); 
                    $("#default_img").hide();


                    $(this).attr("id"); 
                    if (!(this.id == "defaultTab") ){
                        document.getElementById("defaultTab");
                        console.log();
                     $(this.id)[0].src.replace("_on","_off");
                      console.log('img.defaultTab');
                    }

                },
            function()
                {
                    this.src = this.src.replace("_on","_off");
                }
        );
    }

)

My html piece is:

<tr>
<td>&nbsp;</td>
<td width="629"><img src="images/tabs01_on.jpg" class="rollover" data-image="28" width="89" height="55" id="defaultTab" /><img src="images/tabs02_off.jpg" class="rollover" data-image="24" width="91" height="55" /><img src="images/tabs03_off.jpg" class="rollover" data-image="30" width="90" height="55" /><img src="images/tabs04_off.jpg" class="rollover" data-image="22" width="89" height="55" /><img src="images/tabs05_off.jpg" class="rollover" data-image="17" width="91" height="55" /><img src="images/tabs06_off.jpg" class="rollover" data-image="38"  width="90" height="55" /><img src="images/tabs07_off.jpg" class="rollover" data-image="31" width="90" height="55" /></td>
</tr>

Answer 1

The below will replace _off with _on when you are hovering, and replace _on with _off when you are not hovering.

Turn off default if you hover on another tab, if you are not hovering, then default will be on.

$('.rollover').not('#defaultTab').hover(function(){
    $(this).attr('src',$(this).attr('src').replace("_off","_on"));
    $('#defaultTab').attr('src',$('#defaultTab').attr('src').replace("_on","_off"));
},function(){
    $(this).attr('src',$(this).attr('src').replace("_on","_off"));
    $('#defaultTab').attr('src',$('#defaultTab').attr('src').replace("_off","_on"));
});

If you want the last item someone hovered on to stay ‘on’ instead of the default being ‘on’, then you can use this instead:

$('.rollover').hover(function(){
    var hovered = $(this); // save the element we hovered on to use below.
    $('.rollover').each(function(){  
        var tab = $(this); // $(this) in here is each tab as we go through all of them, not the one we hovered on
        tab.attr('src',tab.attr('src').replace("_on","_off")); // Turn off ALL tabs.
    }
    hovered.attr('src',hovered.attr('src').replace("_off","_on")); // Turn on the tab we hovered on
},function(){ return false; });