Jquery: on the parent hover, change the part of the child image href source

advertisements

Hi I have this piece of html...

<a href="alcohol_calculator.php" class="swfselector">
&raquo; Alcohol unit calculator prototype
 <img class="tab" src="/images/1.png" width="30" height="28" alt="1" />
 <img class="tab" src="/images/2.png" width="30" height="28" alt="2" />
 <img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
 <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>

<a href="bouncing_ball.php" class="swfselector">
&raquo; Bouncing ball animation
 <img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
</a>

using Jquery I want it so that when someone hovers over an "swfselector" class that all the child images with the class tab have an 'o' added to their src... e.g (/images/2o.png or /images/3.png/).

I have this so far but it does nothing and would add the "o" past the ".png" anyway.

$('.swfselector').each.hover(function(){
  $(this).find('.tab').attr('src'+'o');
});

Help appreciated.


This will work for you

    var done1 = 0;
$('a.swfselector1').live('hover', function() {
    if(done2 != 1){
        $(this).find('.tab').each(function() {
            $(this).attr("src",
            $(this).attr("src").replace(".png", "o.png"));
            done1 = 1;
         })
     }
});
var done2 = 0;
$('a.swfselector2').live('hover', function() {
    if(done2 != 1){
        $(this).find('.tab').each(function() {
            $(this).attr("src",
            $(this).attr("src").replace(".png", "o.png"));
            done2 = 1;
         })
     }
});

Unfortunately, the simplest way I have found to do this is to change the class names of the a tags for multiple a tags which have hover functions. Basically add a number to the end of the swfselector. Then quickly create a new jQuery event.

If I haven't made this clear enough, take a look at this jsFiddle which will be easier to understand.

Final Outcome (joint team work with George):

$('.swfselector').live('mouseover mouseout', function() {
if (event.type == 'mouseover') {
    $(this).find('.tab').each(function() {
        $(this).attr("src", $(this).attr("src").replace(".png", "o.png"));
    })
} //end of if
    else {
           $(this).find('.tab').each(function() {
            $(this).attr("src", $(this).attr("src").replace("o.png", ".png"));
            }) 

    }//end of else

});//end of mouseover/mouseout