Question

What I’m trying to do is quite simple but as a beginner I’m getting incredibly frustrated with it.

Here’s my first attempt just to give you the idea .

I plan to do something a bit more fancy with the images, but I could see straight away that this wasn’t the solution. Mouseover was changing the image before it had faded out and looked horrible.

So, I thought I might put all the images in the same place and hide them, making them visible and bringing them to the front on mouseover of the corresponding hotspot. I’m hoping there’s a way to decrement an element’s z-index value with .css().

Here’s where I am with it (same URL, 9872_gangsters_moll_2nd_attempt.html).

$(".hotspot").mouseover(function(){
          //Get the id of this triggered item
          var imageid = $(this).attr("id");
          //use it to make corresponding image id to use as jQuery selector
          var currentImg = '#img_'+ imageid;
  //      alert(currentImg);                   //shows variable is correct
  //      $('.product-img').show();            //works fine with a class
          $('currentImg').show();                //doesn't work with a variable
          $('currentImg').addClass('front');     //same, obviously
});

I tried toggling visibility with css originally, but went with jQuery’s show/hide. Neither worked. The problem seems to be with passing ‘currentImg’ as a selector.

Any help you could offer with this would be hugely appreciated.

Thanks,

Andy

Answer 1

Just remove the quotes making it use a literal string (instead of your variable). $('currentImg') should be just $(currentImg), like this:

$(".hotspot").mouseover(function(){
   var currentImg = '#img_'+this.id;
   $(currentImg).show().addClass('front')
});

The other change above… things like .id are DOM properties, you can access them directly (as opposed to the less efficient .attr("id")).