Fire an event through an element with a partially transparent background - javascript

I got stuck with solving a seemingly easy issue.
http://jsfiddle.net/HAKvN/3/
By clicking the black box beneath the white bubble you're triggering an event causing an alert to be shown.
The white bubble represents a div with the red border indicating its boundaries. The bubble is a background image saved as a PNG file with an alpha channel.
I'm trying to fire an event by clicking over a transparent background within a box with the red border (this space is not occupied by the bubble itself) - is it even possible?

Unfortunately I don't believe that can be done easily (maybe if you had all the coordinates in an array) an alternative would be something like this: http://jsfiddle.net/HAKvN/4/ (remove the borders to give a better rendering)
EDIT: a slightly better solution: http://jsfiddle.net/HjrCE/2/. The function is infoBoxSplit and can be called on any jquery object (eg: $('.infoCloud').infoBoxSplit(5);​). It takes one argument that specifies how large each piece should be in height (in this example 5px). The border is just there to demonstrate what is happening.

Someone please correct me if I'm wrong, but I do not believe what you want to do is possible with javascript. As far as the script is concerned the PNG is a square block. It has no awareness of the white speech bubble within the image.
If you want to do something like this, your best bet will probably involve an HTML5 canvas element.

Related

Detecting object(image) in image, created form overlapping images

I have one main image, composited from other images overlapped with z-index. Lets say we have a bathroom, and i have separate images for the floor, for the walls, for the lights, etc. And I build the hole space with z-indexing all of the small parts/images.
I want to detect when my mouse pointer is over a different part of the image, and to alert its name. For example when i'm pointing the floor, script says -> It's the floor.
I try different approaches but no luck at all. There is always some big element that can not be hidden very well with z-index, and its transparent background crosses the other elements, as well as it takes their hover events.
$("#floor").attr('title', 'This is the hover-over text for the floor');
$("#floor").on('hover', function () {
console.log('this is the floor!');
});
That's what i use for now -> floor is the id of my DIV IMG element holding the floor image.
This don't works well, because of edges of objects in images, and really i can't cut the images that good or i have triangles and rectangles which goes into another objects/image.
I try something with using canvas, but again i don't like the result, because canvas is wrapping everything in one big window, and can't manipulate each part of the image.
Can some one give me an advice what can i try, or what to use to do this.
See picture:
green is working fine, i get the right hover text, but red is wrong, because it tells me that i'm on WC, and i'm not.. i'm outside of the object and i'm on the floor.That's because it detects the transparent background of WC image.I want to find the exact size of each element. If this can help as example.
I think you can you Raphael Javascript Library for this: http://dmitrybaranovskiy.github.io/raphael/

Animated pop-up like on wunderlist.com

I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.

How to enable clicking on layered svg images

My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.
** Edit. Excess code and text removed.
You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):
svg > *{opacity:.5}
In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.
An image map works, with some mucking about.
I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.
My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.
Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.
For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.
So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.
** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.

IE 8 specifying background-color changes element behavior

I have an absolutely positioned div on which I am trying to trigger mouseenter and mouseleave events. In IE8/7 with the background-color of the div left unspecified (so that it defaults to transparent), the mouseenter/leave events are not firing when the cursor crosses the div's boundary, only somewhere in the middle of the div and when the cursor is over any text within the div.
When I attempt to debug the problem by adding a background color to the div (e.g. background-color: green), the problem magically goes away. The div's box model is honored perfectly and mouseenter/leave fire as when expected. It's only when the div's background color is left unspecified (or even explicitly set to transparent) that it doesn't behave correctly.
Any ideas? Googling for this IE bug/quirk is coming up with nothing.
The mouseenter and mouseleave are not registering until the cursor hits something visible. This is not correct behavior, but this is Explorer we're dealing with.
Two possible solutions:
Put a thin border on the DIV, one that matches whatever is behind it and won't be noticed. (This doesn't work; see the comments.)
Track mousemove events and have your code determine when the mouse has entered the area of interest.
(Added; see the comments.) Make your background a tiled transparent 1x1 image.
Both solutions are pretty much yuck, unfortunately.
Edit: Question: Do mouseover and mouseout show the same weird behavior?
To add to this: onclick fires as well when using Solution 3, in the answer above. It's overall a nice workaround for grabbing clicks on transparent elements over non-transparent ones in IE.

Ignore mouse interaction on transparent parts in image and assign it to the image below

i have two tables with images that parts of them are transparent and i want
to ignore mouse interactions (especially clicking) on these parts and assign the
click to the image in the other table that below.
(i hope you understand because english is not my native language.)
thanks..
Image map should do it.
One method, all though maybe not necessarily the most efficient, would be to copy your top/clicked image to a canvas and do a look up on it for the color value of the pixel where the user clicked. If the alpha value of that pixel is transparent, call the onclick of the underlying image (or just return false if the underlying image also gets the click event automatically, I'm not sure if it would or not). I'm not exactly sure how long such processing would take, though.
Update: I just implemented this method and there's no noticeable delay copying the image to the canvas and checking its pixel.
I'm afraid this is not likely to be possible. The bounding box for HTML elements are rectangular, even for elements with transparency. It is for this bounding box that mouse events fire on.
The event will propagate through the parent elements, so if your other element is one of the parents you can still capture the click event, but it will fire for both elements.

Categories