change img src in a div on load

I have the following HTML, and i m trying to accomplish two things. 1. Onload change the first item image to 1-B.png 2. If any o开发者_如何学Pythonf the other links are click ed then change the image to reflect what has been clicked.

<ul class="tabs">
<div class="q1"><a href="#"><img src="/visuals/1-A.png" border="0" alt="" /></a></div>
<div class="q2"><a href="#"><img src="/visuals/2-A.png" border="0" alt="" /></a></div>
<div class="q3"><a href="#"><img src="/visuals/3-A.png" border="0" alt="" /></a></div>
<div class="q4"><a href="#"><img src="/visuals/4-A.png" border="0" alt="" /></a></div>
</ul>

I used the following for the onload but it doesn't change

$('ul.tabs > .q1 > .current > a:first').click(function(e){
      $('.q1').attr('src',('/visuals/1-B.png'));
});

Any help would be appreciated

You need to change the image that is inside the <div>:

$('.q1 img').attr(...)

To "reset" all other images, you can have such code:

$(".tabs div").not(".q1").each(function(index) {
   $(this).find("img").attr('src', '/visuals/' + index + '-A.png');
});

try

$(document).ready(function() {
    $('.q1 img').attr('src',('/visuals/1-B.png'));
    $('.q1 a').click(function(){
        $(this).attr('src',(...what u want...));
    });
});

$(document).ready(function()
{
    $("div-1 > img").attr('href', image.link);
    $("div-1 > img").attr('src', image.src);
});

Addition to above:

var src  = $('.rg-image img').attr('src');

OR

var src  = $('.rg-image').find('img').attr('src');

OR

var src=$('.rg-image').children("img").attr('src');