Monday, 25 March 2019

How to Show PNG layers on Hover

I want to implement something like

http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Bedroom/products/-1

and another sample

http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Family_Room/products/-1,-1,-1,-1,-1

but what I've already done is:

please Run snippet

when you hover on menu bar the item shown in on the image.

I put a base image on the floor and stack several PNG. for hover based on the menu, it's fine. But if we want in another way, I mean if the user hovers the image element (or clicked) I wanted the related menu Item set as 'active'.

how we can implement it that when user hover some part of images the menu item set active without map area tags?

$('.selector').hover(function() {
 var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).show();
},function() {
 var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).hide();
});
.visualizer > img{
    position: absolute;
    }
    
.visualizer > .hover-layer{
    z-index: 1000;
    display:none;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="container">
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Categories</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="selector" ><a href="#" class="all" >All</a></li>
      <li class="selector"><a href="#" class="intercom" >interom</a></li>
      <li class="selector"><a href="#" class="powerpoint">powerpoint</a></li>
    </ul>
  </div>
</nav>
          <h2 class="h2" >Sample Visualizer By Yusef</h2>
    <div class="visualizer">
    <img src="https://i.stack.imgur.com/rPXyU.png" class="base" />
        <img src="https://i.stack.imgur.com/64bLa.png" class="hover-layer intercom all" />
              <img src="https://i.stack.imgur.com/QLoXM.png" class="hover-layer powerpoint all" />
    </div>
      </div>


from How to Show PNG layers on Hover

No comments:

Post a Comment