How to change Class From jquery but remove that class from another object

Question

i have problem. i don't no how to fix that 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 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 website page is completely load the first image with these two class "thumbsmallimg selectedthumb" but when mouse goes over on another image the class "selectedthumb" will switch from one image to another.

EDIT: http://jsfiddle.net/nZMpW/ Check this link. its like a product image gallery when you hover mouse on down image its come in big image. but first down image is selected if you move on another image its come in big image but is not select. css this ":hover" option only work when you mouse on that image but i don't want to do this

Not sure what you're asking. Do you want to use a CSS class like: .selectedthumb{backgound:url(someURL.png)} or something? Make sure you make the entire thing as one image, to avoid flashing. Then you can do something like .selectedthumb:hover{background-position:0 -20px};. — StackSlave
– StackSlave, Commented Jul 15, 2014 at 23:07
i want to switch this class "selectedthumb" to another images when mouse is hovered — User
– User, Commented Jul 15, 2014 at 23:13
Thanks for your advice! but when you again remove mouse from that image that image come old style. i don't want to do this when mouse come on image this should br select like active @PHPglue — User
– User, Commented Jul 15, 2014 at 23:17
jsfiddle.net/nZMpW check this like now i think you understand what i want? sorry for that my English is not good that why im not explain clearly @PHPglue — User
– User, Commented Jul 15, 2014 at 23:34
Just use $('#id').mouseenter(function(){$(this).css('backgroundPosition', '0 -20px')});. Change this if not referring to $('#id'). — StackSlave
– StackSlave, Commented Jul 15, 2014 at 23:46

EduSanCon · Accepted Answer · 2014-07-16 00:07:29Z

remove all you onmouseover events and use this jquery code in the $(document).ready() section

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

and, if you want it to work with several sets of thumbnails/bigImages, you can use data() attributes:

  <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">
 .....

and in jqQuery:

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

here is your Fiddle updated again

EduSanCon · Accepted Answer · 2014-07-15 23:03:57Z

1

instead having selectedthumb, in your css put those styles inside .thumbsmallimg:hover{

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

answered Jul 15, 2014 at 23:03

EduSanCon

1,9391 gold badge12 silver badges9 bronze badges

4 Comments

Sushanth -- Over a year ago

+1. This should be the preferable way to give styling on hover. Use JS only when CSS does not solve your issue.

User Over a year ago

Thanks for your advice! What you said is not the way i want to do. I want to when mouse come on thumbnail image the come to big image on down this thumbnail should be selected

User Over a year ago

jsfiddle.net/nZMpW check this like now i think you understand what i want? sorry for that my English is not good that why im not explain clearly

EduSanCon Over a year ago

jsfiddle.net/nZMpW/1 just like i said. changing .selectedthumb by .thumbsmallimg:hover in css file

Collectives™ on Stack Overflow

How to change Class From jquery but remove that class from another object

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related