Toggling image sources I have a set of images with class = tt like so:

&lt;img src="images/arc_unselected.png" title="Arc" class="tt" /&gt;


and I have written this code to change the images after clicking:

     $(".tt").click(function(event) {                 
           var title = event.target.getAttribute("title")        
           resetOtherImages(title)       
           if( title == "info"){
              if ( event.target.getAttribute("src") == "images/information_selected.png"){                   
                 $(this).attr('src', 'images/information_unselected.png')                    
                 }
              else {                          
                  $(this).attr('src', 'images/information_selected.png')
                 }                   
           }else if( title == "Up"){
                 if ( event.target.getAttribute("src") == "images/up_selected.png"){                     
                 $(this).attr('src', 'images/up_unselected.png')                     
                 }
              else {                          
                  $(this).attr('src', 'images/up_selected.png')
                 }                                 
           }else if( title == "Down"){
                 if ( event.target.getAttribute("src") == "images/down_selected.png"){                   
                 $(this).attr('src', 'images/down_unselected.png')                   
                 }
              else {                          
                  $(this).attr('src', 'images/down_selected.png')
                 }                                 

           }else if( title == "SE"){
                 if ( event.target.getAttribute("src") == "images/se_selected.png"){                     
                 $(this).attr('src', 'images/se_unselected.png')                     
                 }
              else {                          
                  $(this).attr('src', 'images/se_selected.png')
                 }                                             
           }else if( title == "Arc"){
                 if ( event.target.getAttribute("src") == "images/ar_selected.png"){                     
                 $(this).attr('src', 'images/arc_unselected.png')                    
                 }
              else {                          
                  $(this).attr('src', 'images/arc_selected.png')
                 }                                             
           }               
        })  

        function resetOtherImages(title) {
        $('.tt').each(function(){
            if($(this).attr('src') !== title)
            {
              var newName = changeName($(this).attr('src'))
              $(this).attr('src',newName)   
            }
        });
        }

        function changeName(imgName) {    
           var pos = imgName.indexOf("_");
           var first = imgName.substring(0,pos);
           return first.concat("","_unselected.png");
        }


It works without any problem, but since I have not much experience with javascript I wanted to know if there is a better way to do this, more compact and more readable.
Interesting question, in that you gave away most of the answer in this function:


    function changeName(imgName) {    
       var pos = imgName.indexOf("_");
       var first = imgName.substring(0,pos);
       return first.concat("","_unselected.png");
    }



You know that all unselected images end with "_unselected.png" and by extension you know that all selected images end with "_selected.png". As a side note I would not have used indexOf, and substring, I would have used a split and string concatenation thru +:

    function deriveUnselectedVersion( imagePath ){    
       var firstPart = imagePath.split("_")[0];
       return firstPart + '_unselected.png';
    }


I am not 100% confident about deriveUnselectedVersion but it sure sounds better (and is more meaningful) than changeName.

Anyway, this is how I would write the click handler:

 $(".tt").click(function(event) {                 
       var image = event.target,
           title = image.getAttribute("title"),
           sourceInfo = image.getAttribute("src").split("_"),
           base = sourceInfo[0],
           version = sourceInfo[1];

       resetOtherImages(title);     

       if( version == "selected.png" ){
         $(this).attr('src', base + "_unselected.png");      
       } else {
         $(this).attr('src', base + "_selected.png");            
       }

       //Or we could go really (too) fancy
        $(this).attr('src', base + ( version == "selected.png" ? "_unselected.png" : "_selected.png" ) );

    });


You will notice:


No missing semi colons at the end of statements
1 var statement on top to rule them all
Only 1 $() statement executed (these are expensive)
This will work for all new buttons as long they follow the same naming scheme
Much shorter
I am still ambivalent about using var title, since title is used in only one place..


A final advice is that writing code follows the same rules as writing prose, dont repeat yourself (too much) aka DRY.

    function resetOtherImages(title) {
    $('.tt').each(function(){
        if($(this).attr('src') !== title)
        {
          var newName = changeName($(this).attr('src'))
          $(this).attr('src',newName)   
        }
    });
    }


See how many times you repeat $(this).attr('src') ? You can and should do better than that.