Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

change img src in a div on load

Tags:

jquery

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 of 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

like image 595
webb Avatar asked Dec 13 '22 12:12

webb


2 Answers

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');
});
like image 60
Shadow Wizard Hates Omicron Avatar answered Dec 30 '22 20:12

Shadow Wizard Hates Omicron


try

$(document).ready(function() {
    $('.q1 img').attr('src',('/visuals/1-B.png'));
    $('.q1 a').click(function(){
        $(this).attr('src',(...what u want...));
    });
});
like image 37
VAShhh Avatar answered Dec 30 '22 20:12

VAShhh