How to Show PNG layers on Hover

Question

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>

_“but I don't want this solution because it's not easy for the client to find one an area”_ - anything else that would react to “hover on a specific part of the image only” would need to know the position and dimensions of the trigger area as well, so someone will have to specify those somewhere & somehow … unless you want to go so far, and write yourself some image-analyzing AI that would figure those values out automatically, by analyzing the differences in those images …? — 04FS, Mar 22 '19 at 12:31
@04FS I want an easy solution base on CSS / Jquery and PNG stack! — Yuseferi, Mar 22 '19 at 12:35
There is no way to target *areas* of an actual image without using `map/area`. Otherwise you are hovering the image as a *whole*. — Paulie_D, Mar 22 '19 at 12:35
@Paulie_D thanks for your attention. maybe a wizard area map selector could be useful. — Yuseferi, Mar 22 '19 at 12:37
_“I want an easy solution base on CSS / Jquery and PNG stack! ”_ - and you can want all day long! Wanting alone doesn’t change the reality of what is possible! Your two options are, capturing the hover event over the whole area and get the mouse coordinates, so that you can _calculate_ whether it is over a specific area; or place an element of the right size at the correct position over the image, so that you can react to the hover on that specifically. Again, both would require that you know positions & dimensions up front. — 04FS, Mar 22 '19 at 12:38
Hover events have coordinates, determine the mapping between them and menu items... Profit? — le3th4x0rbot, Mar 22 '19 at 12:39
You might be able tor restructure the HTML a bit so you can use a basic CSS :hover rule on the images. Easiest way would be to make the links appear as img siblings or children of siblings in the HTML so you can reach the correct link relative to the image. Since you absolutely position the images, getting back to the correct layout should be doable. — Shilly, Mar 22 '19 at 12:39
By removing _“I know it could be implemented by map and area tags, but I don't want this solution because it's not easy for the client to find one an area but he can provide PNG files for us”_ you completely changed the context … SVG, canvas, what I suggested – are all possible options to deal with the technical side of things regarding the UI, but none of those solve the underlying problem, that you don’t know the coordinates and dimensions, and want someone to magically figure that out, after your client just uploads their PNGs. So you would need some advanced image analyzing for that … — 04FS, Mar 22 '19 at 12:44
With an image such as https://i.stack.imgur.com/QLoXM.png that would probably not even be that hard though … load it into a canvas, loop over the pixels, and see which are transparent and which aren’t … If a simple rectangular shape without any rotation is all that needs detecting here, that should not even be that much of a challenge. Another option would be that you take inspiration from some of the image cropping tools out there, and allow your client to mark an area of the image after the have uploaded it, the same way these tools usually do. — 04FS, Mar 22 '19 at 12:56
@04FS I found a sample with no canvas and PNG like me,I've added it to my question. how they implemented that`? — Yuseferi, Mar 25 '19 at 03:13
@Shilly I found a sample with no canvas and PNG like me,I've added it to my question. how they implemented that`/ — Yuseferi, Mar 25 '19 at 03:13
@Paulie_D I found a sample with no canvas and PNG like me,I've added it to my question. how they implemented that`? — Yuseferi, Mar 25 '19 at 03:14
@Kaiido no. search for map tag.can you find it? they proceed it with javascript solution base not manually map solution defined by user. — Yuseferi, Mar 25 '19 at 03:28
Right, they do it with js, weird silly form them to use an `` tag there with an `usemap` attribute pointing to nowhere. But no worries, they did hard-code the coordinates, just like they would have done using a — Kaiido, Mar 25 '19 at 03:34
@Demian "Cham Visualizer Plugin" ? I didn't know it's using a plugin. I google "Cham Visualizer Plugin" but no result. is there any plugin to provide this functionallity ? can you extend my sample with that plugin to have what I've asked? — Yuseferi, Mar 26 '19 at 12:37
Sorry incorrect information, it's difficult to say. But this is their jQuery related to their screens. http://blindstogo.chameleonpower.com//js/release?v=SW0fd4wOqEU8PCfj_5RSA1E24-VbdMYUJElGVATLo3Q1 Perhaps try to dig into it to see if you can duplicate it. — Demian, Mar 26 '19 at 12:57
@Demian as I mentioned I'm not front-end developer and looking for the snippet that do it not tones of js!!! — Yuseferi, Mar 26 '19 at 13:12
I'm afraid this includes a ton of JS, what you want is very complicated. For this platform you need to come with your own effort and we can help you with issues based on that, no-one will give you a full code from scratcg. I advise you to take a plugin what can do the same, depending on your CMS. — Demian, Mar 26 '19 at 18:30
use canvas instead I believe this is your answer https://stackoverflow.com/questions/30788718/finding-non-transparent-filled-areas-in-images-on-javascript-canvas — zEn feeLo, Apr 01 '19 at 01:52
If you work with black-white masks to mark the areas on the maps, recognition in JS might work much easier. Masks can be used with ImageMagick or GraphicsMagick on server side. Nevertheless increasing always the level of your question is not very smart and for solving all the additional requests a bounty of 50 is quite low, — David, Apr 01 '19 at 04:16

score 1 · Accepted Answer · answered Mar 29 '19 at 11:20

You can achieve the required functionality by adding custom position CSS. I just update your code snippet, I hope it'll help you out. Thanks

jQuery

$('.image-overlay').hover(function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').show();
},function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').hide();
});

CSS

#powerpoint-hover-container {
  position: absolute;
  left: 430px;
  top: 271px;
  width: 38px;
  height: 29px;
  z-index: 1001;
}
#intercom-hover-container {
  position: absolute;
  right: 366px;
  top: 270px;
  width: 20px;
  height: 13px;
  z-index: 1001;
}

HTML

<div id="intercom-hover-container" class="image-overlay">
  <span class="intercom"></span>
</div>
<div id="powerpoint-hover-container" class="image-overlay">
  <span class="powerpoint"></span>
</div>

$('.selector').hover(function() {
var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).show();
},function() {
var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).hide();
});

$('.image-overlay').hover(function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').show();
},function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').hide();
});

.visualizer {
  position: relative;
}
.visualizer > img{
  position: absolute;
}
.visualizer > .hover-layer{
  z-index: 1000;
  display:none;
}
#powerpoint-hover-container {
  position: absolute;
  left: 430px;
  top: 271px;
  width: 38px;
  height: 29px;
  z-index: 1001;
}
#intercom-hover-container {
  position: absolute;
  right: 366px;
  top: 270px;
  width: 20px;
  height: 13px;
  z-index: 1001;
}

<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">
    <div id="intercom-hover-container" class="image-overlay">
      <span class="intercom"></span>
    </div>
    <div id="powerpoint-hover-container" class="image-overlay">
      <span class="powerpoint"></span>
    </div>
    <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>

thank you very much for your time. but you hardcoded the position of highlighted. it should. worked dynamically not hardcoded. — Yuseferi, Mar 29 '19 at 15:09
@Joeri I mean, the hotspot position should be detected by JS . not hard coded positions in CSS.look aat this http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go%5CImages%5CFamily_Room/products/-1,-1,-1,-1,-1 — Yuseferi, Mar 31 '19 at 07:48

How to Show PNG layers on Hover

1 Answers1