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 can I apply jQuery .css style to descendant div [closed]

    CSS: How to use vmin unit in IE9?

    How to create button backgrounds with css

    How to animate searchbox length from focusing on the textbox class CSS3?

    How to solve Firefox 2.0 cross browser issues?

    How to Display a div at same position on a any display irrespective of physical dimensions

    Web Extension : How do I use “browser_style = true”?

    How to change the style/css of a tooltip?

    How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?

    How to scale background image proportionally which is in css background of a div?

    How to add the footer with social icons in bootstrap?

    How can I get these Bootstrap column divs to be uniform length inside of a well?

    How to set the CSS class name dynamically in LessCSS?

    CSS - How to add a glow effect around a fluid box?

    How to add multiple CSS elements to a div using jQuery?

    How to make text responsive to div size?

    How to reapply .css file after UpdatePanel asynchronous call completed

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    how to set primefaces datatable columns padding with CSS padding

    How to make text with certain id show up after hovering over a certain image

    How to have anchors to the side of the page? [closed]

    How to style a randomly generated list of items in Javascript

    How to add background-image onto the first option of a dropdownlist

    How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

    css - why my text box is not showing up?

    How to calculate percentages in LESS CSS?

    How To Outline a PNG (Transparent) image with CSS?

    How to prevent long text from flowing out of a container

    How to avoid the pain of CSS multi-browser compatibility?

    How to embed a font in website