Can anybody tell my how map on http://ubytujnaslovensku.sk/sk/ was created/how to create something simillar?
there's only one image....
The map on the website you have provided is using two images. The first image is the actual IDLE map, the second is a shadow version of it.
The shadow version is simply a 'Sprite', where all of the areas is inset and is looking however they want it to look, when you hover it.
Whenever you then hover a zone JavaScript sees it and sets the 'Background-position' variable according to the country you are hovering.
The Sprite image is shown here.
I would suggest you to get a deeper understanding of sprites before trying to accomplish a similar map.
Related
On google maps, on the website, is there a way to make it so that all land area is of a gradient color, and no names, text etc shows? so just a gradient color map, with nothing else.
Or is it better to use an image for such a case? The thing is, i need to show pins at specific countries, so idk if its simpler to use an image, and set each pin position separately, or to somehow use google maps, if its possible to set it to gradient color?
any ideas are welcome
You can create your own style map, I suggest you check the documentation
https://developers.google.com/maps/documentation/javascript/styling or https://console.cloud.google.com/projectselector2/google/maps-apis/studio/styles
The second link takes you straight to the management console to create your map.
Here is a canvas: https://www.docker.com/#canvasCircle
I am thinking to use the function/images that creates this canvas. You can see that the circles are created first and then there is a ribbon like movement of the line from first canvas to last.
I have been trying to find either the images or the animation function. But couldn't. I would like to modify it and use it for my website.
In my case, as a front-end , I would use Photo Shop. Transfer everything to layers and extract the images. Than with css or Jquery , you can add :focus or :hover to make them pop or animate them. Not sure exactly what you want with it. With css you can also use transform etc. Hope this helps. It would help to know what exactly do you want the images to do so we can think of a code.
I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.
Im looking for this effect in background http://prism.umbrella.al/agency/. I saw it on few sites. This with green line and dots. Can you tell me how its called or give a link?
It a canvas drawing,
using mouse move event to fetch coordinates of mouse and draw accordingly
you can see there page source to check the code
I have a map which is one image. I need to have five hit areas on that image and when you rollover one of those areas, that div / part of the image / imagemap needs to go grey.
I don't want to use multiple images - I want to keep the map as one image.
Can anybody please help me - I've been searching most of the day for a solution and can't find one.
Thanks in advance.
The most straight forward solution is probably an image map using maphilight. You can find an example there with the code available here.