Develop Reference

Can I use area maps as a divs and give them style? [duplicate]

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.

D3 Behavior Zoom Manual Adjustment

I'm trying to adjust the zoom level manually in a fairly simple d3 visualization I'm developing. See: http://jsfiddle.net/TXPcM/
After zooming and panning around (use shift+click to zoom out) press the "Default Zoom" button then try to pan around again. You'll notice a jarring shift as it "resets" to the state prior to the button press.
The code is a bit of a prototype and fairly long winded - but look for the applyZoom function. The intention here was to re-apply the zoom behaviour and thus, hopefully clear out any cached values it might be using. Doesn't seem to work. Suggestions?

The way to do this is to modify your zoom object, rather than just modifying (or in your case re-creating the zoom).
So grab your zoom object and do the following:
zoom.translate([x,y])
.scale(scale);

i did not look at your code but this d3 google group thread has the answer you're looking for, i think:
https://groups.google.com/d/topic/d3-js/-qUd_jcyGTw/discussion

Testing whether a point overlaps a character on the canvas

I have a canvas in which I need to draw text on in javascript, and then test whether given points overlap the text.
I am wondering if this is possible using the canvas (context.fillText(...)) and then some kind of test (if (overlap(textobject, {x:12, y:10{}) ) or whether I will need to draw the characters in SVG so I have the co-ordinates and can sort it from there?
I'm sure there are libraries out there that have started to pop up for this kind of thing but am having trouble with my google skills today.

I could think of a couple ways around this unless you are needing the text to be drawn to canvas for some type of pixel manipulation...
One way is float the text over the canvas element (position: absolute;) then test a hover event with jQuery. Another way is to create a box around the text in your canvas element, then detect when the mouse is within those bounds.
If you are looking for the most accurate test, svg would be the way to go.
You might also try out a library and see if they have already created this functionality. easel js

Update: Being an open web fan and OOMG HTML5, I had completely ignored Flash. Turns out that it is the best medium for what i'm trying to do. And as actionscript and JS are so similar, the logic was a copy paste job.
Thanks heaps for the answers, it ended up being a huge ask, so I drew my characters in Illustrator, turned on the grid, created an array of where the grid crossed the character and where it didn't - and then turned that into a JS array. I'll publish a link once it's finished.

html canvas font scaling problem , text is flickering without reason

I readed many forums, but never found some analogue case.
Javascript canvas font displays in a flickering fashion. The conditions appears to be:
scale of the canvas is not an integer (for example setScale(0.1,0.3))
setTransform(1,0,0,1,0,0); and setScale are used widely to restore setting at every draw of new objects.
Windows. In linux this effect is barely visible (only in some single chars of the text !?).
If the scale is too little (0.5 or less) the effect cannot be seen.
Using save() and restore() seems to have different effect other than setTransform(1,0,0,1,0,0); ans setScale(sx,sy); so i never use them.

I solved the question opting for using only saves and restores : no more flickering. This seems to avoid direct using of setTransoform, and for some reason there should no difference in it.
Sorry for the lack of code, it's a very complicated set of instructions to extract from my coded game.
I hope this is the definitive solution to flickering. Thanks.

Scrolling speed with mouse position

I have a small problem with how should i think a... problem. I want to do something somehow similar with this: when you move mouse near to the edges, you will see images scrolling faster than how is scrolling when you have the mouse in the midle of the DIV.
Don't know if i explained right, but ... i don't know how to tackle this. I'm sure that is binded on mousemove but also i guess is somehow related to math. And math isn't my best skill :D
Thanks guys!

Unfortunately there's not much more to tell you than what you can already read in the source code of the site you linked from line 59 onwards.
I'd likely recommend simply trying to duplicate something similar within your own sandbox page using that code they have as a guideline. Simply strip out everything you can and just start with a single image, bind the mousemove event and try and get relative positions using offset (see jquery - offset).
It's a pretty nice implementation of the new canvas tag though, I haven't seen it used much yet, so thanks for passing on the link. I can at least offer you some interesting links on the canvas tag that might give you a few pointers.

This is an old question, but you can calculate a procentage based on the distance between the mouse position and the edges. Then use that procentage to set the speed of the animation.