I have a multi-layered image in Photoshop that I would like to use on the web. The aim is to have a number of buttons to show/hide the various layers.
My initial thought was to export each layer as a transparent GIF PNG, stack the images using CSS and use Javascript to toggle the visibility of each layer.
Is there a better way to achieve this? I am particularly interested to hear of any software or Javascript libraries to simplify this process.
Many thanks.
Edit:
To clarify, the image in question is a map with various outlines and shaded areas to overlay, so I will only need basic control of layer opacity.
I would stack each layer into one large image. In your front-end code create a frame the size of the layer with your stacked image as the background.
Create the buttons and use jquery to trigger a background shift relative to the button that is pushed. It will appear the image is changing, but it is just shifting the background. This will save on consecutive image loads, making the UI appear quick and seamless.
You could try to use the ::before and ::after and -webkit-mask-image property to help you create you multi layered image.
Or just stack png with absolute position and your png needs to be in 24bit mod, by the way.
Related
I try to apply a grayscale effect to the background of a map, but I don't want the upper layers of the map to be affected by the grayscale.
Naively, I applied a CSS filter on the canvas element:
filter: grayscale(1);
but of course everything on my map turned to gray :
I want to preserve the border of the city Aix-en-Provence green, but I want the background of the map to be gray.
Is it possible to somehow apply a grayscale to all layers behind one layer ?
No, it's not possible using CSS filters, as mapbox uses a single canvas element to draw all its layers. The only way to go about this is to modify the colors in the style of the map and change all color related prop values of the layers you want grayscal-ed to their grayscale equivalent. I'm pretty sure you'll find grayscale styles for mapbox.
In theory, since it's possible to fetch all layers of the map (and their order), and it's also possible to get the contents of its style object, this task could be automated, but it would need attention to detail and thorough testing.
Definitely not a one liner.
Most likely, it also won't work for external images (e.g: image layers or layers displaying sprites) used by the map, unless you replace those with grayscale alternatives, too.
Another approach, which might just work, would be to use the same technique as the mapbox-gl-compare plugin and have two maps overlapped. Obviously, in your case, you won't have the slider to toggle between them and the one on top would need to be mostly transparent, while the one below would be transformed using CSS filtering.
You'd think keeping two maps in sync in terms of panning, zooming (and, most importantly: rendering) wouldn't work but, as you can see in the plugin demo, it works quite well. All you have to figure out is how to make the map on top mostly transparent (it's a map style modification job - although easier, as this time you'd need to simply hide the layers, not change their color). Also note having the layers disabled will actually make the top map faster, so it looks like the right solution.
I am looking to get the actual displayed color of an area of the screen using Javascript.
I have a system that allows people to restyle their content and they can use RGBA colors, what this means is that while I can very simply test what the background color of an article is (for example) that may not be its actual color because it may be slightly or fully transparent and thus the layer underneath may be showing through...
I have seen various questions on here that deal with getting pixel colors from an image using Javascript, so I am wondering if canvas could be used to achieve this in some way...
What I want is to hide the text in an article, create a (maybe canvas) 'screenshot' of what the article background looks like empty, and then iterate over the pixels in there to get an average color value.
Anyone any ideas on how to do that?
You need to get a screenshot of the page using canvas, which is not trivial:
Can you take a "screenshot" of the page using Canvas?
And then getting the colour would be trivial once you have the screenshot.
I'm trying to figure out if it is possible to stretch in image in Javascript so different parts of the image expand more quickly than others. I was thinking along the lines of an black/white map where black does not stretch at all, white stretches the most and the shades of grey in between stretch proportionately. Is this at all possible? I;m hoping to make a picture look as if its losing or gaining weight.
Thanks!
You could use the HTML5 canvas feature along Java-script to do image manipulation.
Altogh it will be processor intensive, mainly if you want to do animation, you can do it.
Some tutorial for the canvas element of HTML5 with Java-script, probably you are interested more on the drawImage(image,x,y) method.
http://www.w3schools.com/html/html5_canvas.asp
And references
http://www.w3schools.com/tags/ref_canvas.asp
You could then get draw the parts you want scaled, but giving it near non noticeable artifacts effects like you want is really difficult.
I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo
Basically, there's a color-coded map with 5 different regions on it. They're all oblong, discontinuous, and would take forever to make an image map for. I'm wondering if there's a way to make the colors click-able instead of making a ridiculous image map. Separating the colors into separate images or other similar trickery wouldn't be an issue if it lead to a solution.
Also, I'd upload the image, but it's 2.1MB
Try rendering the image into a <canvas>. Add a click handler to the canvas, and read the color value at the clicked pixel. If you know which color corresponds to which logical region, you got yourself a solution.
In case the image does not have pure solid colors, you might have to get the average in a small region around the clicked pixel.