html, svg, css how to make mouse event not fire on transparent color


Tags: javascript,html,css,svg

Problem :

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).



Solution :

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

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


    CSS Howto..

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down

    how to force horizontal scrolling in an HTML list using CSS?

    CSS: How to add borders of different colors to input radio buttons labels?

    How to resize CSS Box with increase in content

    How to assign CSS background image properties mixing classes and ids

    How to use CSS for formatting Crystal Report in Winform?

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How to display code on iPhone using HTML/CSS

    How do I get a video to fit in a specified area?

    Can someone explain or show how to combine a bootstrap 3 collapsing top nav and and offcanvas side nav?

    How should I convert this PSD to HTML & CSS Menu

    How to replace inline text with images using CSS

    How can have all the images show up on my slider whilst differentiating each image with its own div tag?

    CSS: how to get two floating divs inside another div

    How do i add a background image to my header?

    how to trace this computed CSS value in firefox inspector?

    How to adjust nav menu based nav item name character length?

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to apply this CSS class to a given LinkButton?

    How can I use webpack to copy files to the distribution folder?

    how can i center the footer text in the bottom of the page regardless of screen size

    .How to create fluid layout with css, such that it works on all devices and also on Landscape and Portrait Mode [closed]

    How to use SVG fragment identifier for CSS background image on iOS?

    How to use CSS to shift my menu div to the right?

    How to vertically align inline-block elements with height set and test with browser tools

    scrollbars not showing in google chrome

    How to send web page in email body with css

    How to center without the
    tag using CSS?

    How to make this type of image popping out of box using XHTML css

    how to remove xlink default styling