I'm creating a web page, and I can't (with html code) add a draw box*?
*It's a box, like a Microsoft Paint, only with one brush, where the user make a draw by a click draged.
The following links may be helpful:
Doodle, A Demo Drawing Program
Raphaël
DojoX
Canvas
Also, have a look at this StackOverflow thread: Drawing on top of an image in Javascript.
Steve
I'm afraid there is no simple way to do what you want to do. The current version of HTML (4.01, I believe) does not support this at all. HTML 5, which is still in development, has a <canvas> element that can be used with javascript to create the kind of thing you are looking for, but only the latest versions of Firefox, Chrome, Opera, and Safari support it.
See: w3schools.com/tags/html5_canvas.asp for an explanation of the <canvas> element and dev.w3.org/html5/spec/#the-canvas-element for the full (uncompleted) specs.
See: http://devfiles.myopera.com/articles/649/example1.html for an example of the kind of design you are looking for.
There's no HTML element that's a "draw box". You'll need to find something built in JavaScript/Flash/Java and drop it into your page.
Try CanvasPaint or this other Canvas Painter.
Related
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I am trying to create an effect like what I have shown in the video below:
http://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be
this effect was created in Flash, but I wanted to replicate it (to as much as possible) in HTML5 and CSS3.
I have not done any thing like this before. So wanted to see if someone can help me suggested how I can do it.
Thanks
Zeeshan
Well Spider is kinda right. There are tons of canvas demos describing such particle effects:
http://codepen.io/soulwire/pen/Ffvlo (found here: >)http://davidwalsh.name/canvas-demos)
http://gwtcanvasdemo.appspot.com/
-https://developer.cdn.mozilla.net/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f696bea7b2ff62c0188/fluid_1339407870_demo_package/index.html (found in mozilla labs: https://developer.mozilla.org/en-US/demos/detail/fluid)
etc. (just do a quick google Search).
Doing this with CSS is not possible since you can't track the exact position of the mouse can't create this dependend effect, etc.... and Canvas is HTML5.
I'm trying to create a pure css Venn diagram like this
Where the circle gets highlighted on mouse hover. But the problem is: using the border-radius property if I mouse over the corner of the circle (outside the circle) , it triggers hover as well.
for a demo see this jsfiddle link and hover over the red area
is there any CSS solution to avoid this or am I ganna have to calculate it using javascript?
EDIT: Thanks to all for the responses.
I should have posted the browser information as well. I'm using Chrome 12
So far it seems this bug exists in chrome. I will update this page with any further findings.
UPDATE Aug 2013: Just tested this again on Chrome 28 and the issue no longer exists.
I know it's possible to draw circles with border-radius:50%, but it really is a bit of a hack. And it doesn't work in IE8 or lower, without using even more hacks, like CSS3Pie.
So while I accept that you've produced a good-looking Venn diagram in your fiddle example, I don't think it's the best way to do this.
A much better solution would be to use a proper graphics library to draw the diagram using either Canvas or SVG.
For Canvas, you could try this library: http://www.canvasxpress.org/venn.html
For SVG, I would recommend Raphael, which will produce hover-able Venn diagrams in about four lines of code.
I know that neither Canvas nor SVG are supported by IE8, but then neither is border-radius, so I assume that isn't a criteria for you.
In any case, Raphael does actually work in all versions of IE, as it detects the browser and renders VML instead of SVG if it's running in IE. Canvas support can also be hacked into older IEs if you really need it.
Is it possible to create a html element inside a Canvas, draw it and than make it, for example rotate using CSS3?
And if it is, does it follow the Canvas settings (for example, lighting of some sort)?
Just a thing that popped into mind, might make an application i'm working on a lot lighter.
No. Any content inside canvas element is only displayed when canvas isn't supported.
I think we can only use css3 operator in canvas and not inside canvas, in some element like img or div:
I think it's possible Look at:
http://christianheilmann.com/2011/09/05/animating-with-canvas-and-creating-css3-animations-with-javascript/
Here is a link for a great Blender 2.6 output plugin that exports a CSS3 HTML page for viewing in your browser. I'm looking to also utilize Jmpress for presentation. http://sokra.github.com/jmpress.js/#/home
I'm using the Blender script now and it works very well (no crashing or freezing). The HTML produced displays fine, now I'm connecting Jmpress to get a final product.
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/