Im trying to get something like this --> http://jsfiddle.net/NhvAZ/10/ but with image inside circle.
I did exactly the same way like on example above, but it doesn't work with image. Here is my code: http://jsfiddle.net/uyEaq/
Someone could tell me what I'm doing wrong?
Well that was really confusing, but looking at some of the previous iterations of the fiddles you've given I think I know what you want.
You want an ever increasing pie slice of an image to appear, right? Clipping can do that for you. Here's an example using some of your code:
http://jsfiddle.net/QMZg2/
Related
essentially I am trying to recreate the hover over from this sight when hovering over the squares. http://thehf.org/ can anyone enlighten me on how this is done?
Its done through web-filters, which are applied in your css. there are a variety available, sepia, invert, grayscale to name a few.
here's a full code example with the sepia and invert demonstrated
I've tried a bunch of alternatives, and but each approach has not produced the desired result of stretching an image from a new sx to the end of the canvas.
I'm going to assume the image shows what you want to happen, not what is actually happening. You can do all of this in the drawImage call. You don't typically see the parameters explained this way, but I think it will help for what you want to do.
ctx.drawImage(imgSrc, cropX, cropY, cropWidth, cropHeight, drawAtX, drawAtY, drawWidth, drawHeight);
https://jsfiddle.net/yLf5erut/2/
I'm stuck with the menu below. All the website needs to be in HTML.
http://hpics.li/740c57f
WHAT: I want to have an hover image for all the different parts when the mouse go on it. (event/brand/website/print/UI/VIDEO)
PROBLEM: The images are overlapping and the mouseover start when i'm on the transparency of the png.
SOLUTIONS I TRIED: Imagemap to detect the zone and then put javascript code inside the AREA. doesn't work.
Imagemap to detect the zone, put an id in the AREA and use a separated JQUERY with .hover(function(). doesn't work.
Use z-index: impossible because there will be always an image that will hide the one under.
QUESTION: If I can't use ImapeMAP to select my zone and use CSS or JQUERY, how can I do ?
Thank you so much for your help!
Might be too late but the exact case can actually be solved by a class I wrote around 3 months ago. It allows you to check whether you're on a transparent area or not and also check for other elements behind the transparent area, this allows to overlap multiple transparent images and correctly jump from one image to another at the correct point.
http://www.cw-internetdienste.de/pixelselection/
I've been wrecking my brain trying to figure this out. is there any way to set one background image in css for multiple elements? I have a square-ish speech bubble, made with regular css, the triangle made with the border technique, but i want an background image to fill them both so it looks like a cut out all together.
I dont know any other way to design a solid shape using html/css other than squares and rectangles. If i could create a speech bubble as one solid shape, then giving it a bg would be simple lol.
I was wondering about html5's drawing capabilites, but im not sure...
Any ideas?
Edit: No, there's no option to do what you want. But if you wanna do spech bubbles, you can check any of these links:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://konigi.com/tools/css-tooltips-and-speech-bubbles
http://desandro.com/resources/css-speech-bubble-icon/
http://www.deviantart.com/#order=9&q=sun
As you can see, each picture...underneath it...it has a little tiny shadow around the edges.
How can this be done with a variable size image? (css)
Beside the answers above, let me explain how devianart does it ..
they have an image generator, that creates the shadow image at anysize they want ..
You can see the background shadow of an image at http://sh.deviantart.net/shadow/x/113/150/logo3.png
now playing around with the url and altering the 113 and 150 creates new images of arbitrary size which they use ...
You can use box-shadow, but it wouldn't work cross browser: http://www.css3.info/preview/box-shadow/
You can do this by shifting a background image behind the original image. There are quite a few tutorials on the internet:
Tutorial 1
Tutorial 2