How to change class from jquery but remove this class from another object

Question

I have a problem. I do not know how to fix this problem.

HTML code:

<div class="image">
 <a href="#">
       <img src="images/image1.jpg" id="mainimg-1">
  </a>
</div>

      <div class="otherthumbnailcontainer">
        <div class="thumbnailimages" id="thumbnailcont-1">
            <img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">

            <img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">

            <img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">

            <img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">  

            <img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">  
        </div>
    </div>

Here is the code:

function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
     $('#'+mainimgid).attr("src", thumburl);
    // $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
     $('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
     // $('#'+thumbnailimg).toggleClass("selectedthumb");
}

Now what I would like to do on the site page fully loads the first image with these two classes “thumbsmallimg selectedthumb”, but when the mouse moves to another image, the class “selectedthumb” switches from one image to another.

EDIT: http://jsfiddle.net/nZMpW/ . , , , . , , , . css ": hover" ,

Answer 1

onmouseover jquery $(document).ready()

 $(".thumbsmallimg").mouseover(function() {
     $("#mainimg-1").attr("src", this.src);
     $(".selectedthumb").removeClass("selectedthumb");
     $(this).addClass("selectedthumb");    
 });

, , / , data():

  <img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1"  class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
  <img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2"  class="thumbsmallimg" data-big-image="mainimg-1">
 .....

jqQuery:

$(".thumbsmallimg").mouseover(function() {
    $("#" + $(this).data("big-image")).attr("src", this.src);
    $(".selectedthumb").removeClass("selectedthumb");
    $(this).addClass("selectedthumb");    
});

Fiddle

Answer 2

, thumb, css .thumbsmallimg: hover {

.thumbsmallimg:hover{
  /* the styles that wrere in class .selectedthumb */
}