Set image as background of svg circle element - javascript

I want to add an image inside every center bubble node. I am able to add an image but it is acting like hidden pattern for background and wherever bubble moves it exposes the visible part of the hidden pattern which is in the background. Actually my aim is to achieve something which is in this (http://jsfiddle.net/LsMZp/2/) fiddle. Here is my fiddle (https://jsfiddle.net/m2hLvr4r/1/). I have written the same code as in the previous fiddle to add an image inside a circle but I could not able to achieve this and I am trying it from previous one day. Please some one help me out.

Related

Image with a link in a specific point

I need to create a website with this kind of function:
I have an image (like a park area), so in different points of this image I must create a div which will do a hover effect and show a textbox with an image (or maybe a link to it).
My main doubt is that I have no idea how can I get certain points of this image to create a div with this hover effect.
Please check the below URL's. Hope this may helpful
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
http://www.howtocreate.co.uk/tutorials/html/imagemaps
http://www.outsharked.com/imagemapster/
you can do with jQuery. Please, firstly look at this link. You can take mouse x and y position on image. Then on x and y position, you can do, what you want.

manipulate cursor position from an element

I have a very wide question here, and I hope I can clearly explain what exactly I need.
The image below shows a circle, which is a html element. I wanted to create an interactive element and play with the cursor. Imagine that for some reason, you can't put your cursor inside the circle. I don't want to just hide the cursor if you approach the circle, but manipulate the cursor in a way that moves your cursor away in a sort of magnetic attraction.
So: If you put your cursor around the circle, it will never approach it and be sent away from this element. is that somehow possible to do? Javascript, Angular or something else? Does anyway have ever created something like that?
you can use following method
Hide cursor permanently and use div element instead.
On window mouse move event change position of that div element with current location of pointer.
Now You need to put condition here that when ever pointer enters in circle region
do not update div element position with current position of pointer instead of this update it with new calculated position which is outside of circle.
If you need code then i can provide it to you.

move element in DOM but not on screen

I am creating a lightbox style plugin that opens an image in fullscreen and adds text about it next to it. I need a zoom animation, that just zooms the small image up to fill the screen. Since the small image is in a column layout, i need to move it out of the current dom structure. However i am unable to do so while doing the zoom animation.
So my question is:
Is there any way to move an element in the dom, or just change its position to fixed and keep its position on screen? I have jQuery avaliable
If all you want to do is get it done, this plugin could do the job.
magnific-popup
Otherwise, I'd put the image in a container of the same size so that you can change the image display property without having your layout get screwed up.
You don't need to move the element in your DOM. Just change the css.
Also this stackoverflow question could possibly help you.

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.

Fire an event through an element with a partially transparent background

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.

Categories