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

    How to adjust progress bar with Jquery?

    How do I use CSS to give a section a background that doesn't scroll with the page?

    How to get a JavaFX XYchart to work with user defined CSS?

    How to fix height respective screen resolution?

    How to format CSS for 8.5x11 inch printed pages

    How do you make something in the center of the page in CSS? [duplicate]

    How to avoid text selection in web page using css?

    How to make a CSS mega menu be on the full width of the page? (998px, but in the middle?)

    How to make DIVs flow to the left in a x-scrollable pane with CSS?

    How to make triangle section separator [closed]

    How to align my dropdown menu to center of the page?

    In CSS, how to make the window non-scrollable when an element overflows?

    how to display three text fields on one line

    How to make a “wrappanel” in html?

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)

    HTML/CSS - how to align boxes / divs [closed]

    How can i edit font-size and font-family option in css file using sed?

    How is padding-top as a percentage related to the parent's width?

    How do I sort css selectors with vim?

    How to use CSS to create the left - right alignment so the left div does not push the right div

    How do I add transition to the effect of hide() and show() on these elements?

    How to set textbox width fit in table cell CSS

    How to modify the orientation of a
      spanning multiple columns?

    How to put bootstrap code inline

    How to isolate specific platforms using CSS selectors in the Ionic framework

    how to wrap form elements within the div tag(with background-color) using twitter bootstrap and CSS

    How to make all the content placed in the center of div?

    How can I create CSS sprites from images stored in the database?

    How to build a CSS style with a LESS mixin parameter?