0

Is it possible to make a mouse event not fire on transparent color of an image?

I have a big background image and several small images which are shaped in different shapes (for example the shape of a ball). I want to catch mouse events on these small images. The problem is that events fire on the whole rect of an image. I can use image map on the background image but this is not a good idea because the small images will be changing under mouse (sprites).

holden321
  • 1,166
  • 2
  • 17
  • 32
  • 1
    Basically no...but without seeing the SVG in question it's hard to comment. You can set hover states on specific **internal** paths etc of the SVG (even wrap them in links) but based on a color....no....and even more NO when using a background image (even SVG). – Paulie_D Mar 05 '15 at 13:25
  • Thanks for response. There is no svg actually. I want to create that svg or html :) – holden321 Mar 05 '15 at 13:43
  • I'd love to disagree with @Paulie_D (although I 10000% agree without an example its impossible to say). That said, you can certainly check the `fill` attribute of an svg – Djave Mar 05 '15 at 13:44

2 Answers2

1

You can check a number of things, either the fill of an svg shape, path or rect or also the opacity property depending on how you have made the element transparent.

For instance:

$('svg rect').mouseenter(function(){
    if($(this).attr('opacity') != 0){
      $('body').append('hovered element with colour');    
  }
});

Here is an example:

http://codepen.io/EightArmsHQ/pen/zxLbXO

Edit

With more complex images like

http://mobilite.mobi/wp-content/uploads/white-rabbit-wallpapers-9.

You have two options. The (to me, a graphic designer turned web designer) the simpler way would be to create an SVG hit map) enter image description here

But a solution that would be far more thorough would be to use HTML5 / JavaScript canvas element which can have all of this stuff included, but will be more complex to initially code.

If you use the words canvas alpha hit detection I'm sure you'll be able to google some great results, such as

Image map by alpha channel

Community
  • 1
  • 1
Djave
  • 8,595
  • 8
  • 70
  • 124
0

what you can do is add classes for those small small shapes. for example

<div class="big_back" id="big_back">
<div class="small_shapes" id="shape1">
</div>
<div class="small_shapes" id="shape2">
</div>
<div class="small_shapes" id="shape3">
</div>
</div>

and in jquery you can call the method as follow

$(document).ready(function() {
$(".small_shapes").mouseenter(function() {
alert("I enteres shapes");
});

}); If this is not what you are looking let me know.

Shridhar
  • 339
  • 2
  • 15