Multiple images depending on mouse location when hovering over div

Question

I am trying to make a review page on my website so that when you hover over a div on the overview page, different sections of this div will display different images. Essentially a slide show, but the image changes depending on where the cursor is.

I managed to find a code that does what I want, but it uses href to draw images, which means that if you click on it, it will go to the image link.

Currently, I only have images of notes, but when they end, each of them will have certain images of the project. Since each div will be just one project, the whole div should go to one html-link, and not just to a specific image image link, the user freezes.

All I want is to click the user and go to the html link, not the img link.

Here is the code I'm using:

Coding experienced people there will probably have a much better solution for what I would like to achieve, I am interested to see any better solutions.

HTML

     <div class="multi">
        <ul class="rotator-nav fifth clearfix">
            <li><a href="/img/FoI.jpg" onclick="return false;" class="img1"></a></li>
            <li><a href="/images/card.jpg" onclick="return false;" class="img2"></a></li>
            <li><a href="/images/amareal.jpg" onclick="return false;" class="img3"></a></li>
            <li><a href="/images/edeva.jpg" onclick="return false;" class="img4"></a></li>
            <li><a href="/images/amacover2.gif" onclick="return false;" class="img5"></a></li> 
        </ul>
    <div class="imgcontent">
        <ul class="rotator-icons fifth">
            <span class="img1 active"></span>
            <span class="img2"></span>
            <span class="img3"></span>
            <span class="img4"></span>
            <span class="img5"></span>
        </ul>

    <img src="/img/FoI.jpg" class="currentimg">
    </div>
    </div>

CSS

.multi {
    display: block;
    float:left;
    position: relative;
    width: 30.8%;
    height: 20%;
    padding: 0px;
    margin:0% 1% 2% 1%;
    overflow: hidden;
}

.multi .imgcontent {
  display: block;
  position: absolute;
  top: 0px;
}

.imgcontent img {
  display:block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.rotator-nav {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.rotator-nav li {
  display: block;
  float: left;
  height: 100%;
}

.rotator-nav.fourth li {
  width: 25%;
}
.rotator-nav.fifth li {
  width: 20%;
}

.rotator-nav li a {
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  border-bottom:0px solid #fff
}

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

Js

$(function(){
  var $rotators = $('.multi');
  var $imglinks = $('.rotator-nav a');

  $imglinks.on('mouseenter', function(e){
    var imgclass = '.'+$(this).attr('class');
    var imglink  = $(this).attr('href');

    // update main image src
    $(this).parent().parent().parent().find('.currentimg').attr('src',imglink);

    // update current rotator icon
    var $rotators = $(this).parent().parent().parent().find('.rotator-icons');

    if($rotators.children(imgclass).hasClass('active')) {
      // already active icon -- do nothing
    } else {
      // remove active class then add to new icon
      $rotators.children('span').removeClass('active');
      $rotators.children(imgclass).addClass('active');
    }
  });
});

Any help would be greatly appreciated!

Thanks,

Mark

Answer 1

, data ( ):

var imglink  = $(this).data('image');

<div class="multi">
  <ul class="rotator-nav fifth clearfix">
    <li>
      <a data-image="/img/FoI.jpg" href="#" class="img1"></a>
    </li>
    <li>
      <a data-image="/images/card.jpg" href="#" class="img2"></a>
    </li>
    <li>
      <a data-image="/images/amareal.jpg" href="#" class="img3"></a>
    </li>
    <li>
      <a data-image="/images/edeva.jpg" href="#" class="img4"></a>
    </li>
    <li>
      <a data-image="/images/amacover2.gif" href="#" class="img5"></a>
    </li>
  </ul>

...

div, . , DOM :

, , . JavaScript, nth-of-type() .

Answer 2

.parent().parent()

.

$(this).parent() * 3 - $(".multi")

, $rotators .rotator-icons,

, - .