Change src of hover using jquery

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>

Richard Edwards · Accepted Answer · 2011-10-21 19:08:52Z

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; });

edited Oct 21, 2011 at 19:08

answered Oct 21, 2011 at 15:33

Richard Edwards

2,0601 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

latoyale Over a year ago

I am getting an error from the console that the src is not defined.

jbabey Over a year ago

src should be in quotes (a string literal)

latoyale Over a year ago

This will turn off the tab when I hover over it, but i need the tab that has the id of defaultTab to turn off if any other button is hovered over.

Richard Edwards Over a year ago

Updated answer. This will now turn off the default tab if you hover on any others. If you do not hover on anything, default tab will be on. Is this what you mean?

latoyale Over a year ago

I want to use the second one but i am receiving a syntax error. Is something else supposed to go in the empty function at the bottom?

|

Johnny Craig · Accepted Answer · 2011-10-21 15:33:53Z

1

you cant use .src you need to use .attr('src',new_href)

answered Oct 21, 2011 at 15:33

Johnny Craig

4,9902 gold badges28 silver badges28 bronze badges

1 Comment

jbabey Over a year ago

he is calling .src on the DOM element, not a jQuery element, so .src is correct.

Felix Kling · Accepted Answer · 2011-10-21 19:17:31Z

1

Update: Now that I completely understood the problem, here is my suggestion:

You can search for the image, which contains _on in its src attribute (see the Attribute Contains Selector) and change the value. E.g. (only including relevant code):

function toggle(element, on) {
    var from = on ? '_off' : '_on',
        to = on ? '_on' : '_off';

    element.attr('src', function(i, src) {
        return src.replace(from, to);
    });
}


$("img.rollover").hover(function(){
    toggle($('img.rollover[src*="_on"]'), false);
    toggle($(this), true);
}, function() {
    toggle($(this), false);
});

Then you don't even need to mark the default image with an ID.

I am not quite sure what you mean with take defaultTabs image. If this refers to the image, you can simple do:

if (this.id === "defaultTab"){
    this.src = this.src.replace("_on","_off");
}

If on the other hand, the image is a descendant of this, you have to use find:

if (this.id == "defaultTab"){
    $(this).find('img').attr(src, function(i, value) {
        return value.replace("_on","_off");
    });
}

Note that the same ID can only be assigned to one element, not to multiple ones.

edited Oct 21, 2011 at 19:17

answered Oct 21, 2011 at 15:30

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

5 Comments

latoyale Over a year ago

This will take turn off whatever button I am on. I already have this functionality. I need for this to point to whatever .src defaultTab comes from.

Felix Kling Over a year ago

I'm not really getting it... defaultTab is one of the images. Now that you posted your code and HTML, it seems you are after the first snippet I posted. It will only replace the URL if the elements ID is defaultTab... if this does not help you, then you have to explain your problem better.

latoyale Over a year ago

ok, no problem. I have 7 buttons. One of them when you load the page is already on the "on" state by default. Right now, when I hover over it, it turns off. When I hover over the other buttons they turn on. The problem I have is, if I don't hover over the default button, it wont turn off. So if a user chooses to hover over another button instead of the one that's already on, two buttons end up being highlighted. I need some kind of function that will tell the on button to turn off if any other button beside it is selected. hope this is clearer. thanks

latoyale Over a year ago

The code doesn't work but it's giving me a syntax error. I am tyring to debug but I am not sure what is failing.

latoyale Over a year ago

I decided to use the other code below, but I am grateful for the help.

David Hellsing · Accepted Answer · 2011-10-21 15:33:10Z

0

I have a hard time understanding your logic, but perhaps something like:

$(this).mouseenter(function() {
    if (this.id != 'defaultTab') {
        return;
    }
    this.src = this.src.replace(/_on/g,'_off');
});

answered Oct 21, 2011 at 15:33

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

1 Comment

latoyale Over a year ago

Defaulttab is automatically highlighted when the page loads. I just want it to turn off if anything else is hovered. I already have the code set up to turn off and on the images states based on a hover.

Collectives™ on Stack Overflow

Change src of hover using jquery

4 Answers 4

10 Comments

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related