I have a site I’m making that has a map of Canada as the homepage. The idea is that you select the area of the country you are in, and when hovering over it, the province lights up. I have several images made, but I’m having problems thinking of the best way to do this. Is there a CSS way, or is this a JavaScript only thing?
Given the sheer SIZE of the images involved - I’d be throwing that entire design concept away as undeployable and just using a select or a flat list of anchors. Don’t waste potential users time on that type of ‘gee ain’t it neat’ bull.
It’s very pretty, but the sheer bandwidth involved in images that size make it not only impractical, but a total annoyance. At that point you might as go all the way to failure and build the whole site in flash.
In fact, usually when I come across sites that try to do that sort of thing, like Creative’s or MSI’s sites… It annoys me no end since half the damned time it doesn’t work right in Opera, takes too long to load, and ends up in the long term being little more than a over-glorified splash page.
If you REALLY have your heart set on that type of asshattery, I would suggest looking at SVG for it so you could make it scalable (since your current map isn’t even 1024 friendly) with google’s little javascript library to translate it into VML - but really, if that’s your “home page”, you’ve already screwed up IMHO entering into “splash page” territory.
Something that ends up on every top ten list of things not to do in web design alongside auto-playing music and 2 megabyte page sizes.
CSS can’t create shapes like states, the best option you would have is an image map (although JS might be able to achieve this, though the JS would be awfully complicated, having to compensate coordinates for all the different rivets of states shape)
Image map is the best bet here probably 
I thought about doing just that, but with modern technologies like jQuery and CSS3, I was hoping there was another way.
SitePoint community is super smart, and I thought they might be able to figure out something cool 
Why can’t you just do an image map? It would seem to me that this can be done using HTML using the <map> and <area>. If you don’t mind using the onmouse(over/out) attribute on the <area> element, it should work just fine.
It would be hard to use CSS-only because of the irregular shapes involved. Here’s a JS version of the US I wrote a long time ago (the code could do with an update): http://www.actionfab.com/contact_us/
These are already old with some bad ideas in them (no way am I redoing them). Make yours indexed PNGs with like 5 colours or whatever you can get down to and still have edges look ok. You can also get away with shrinking the whole image to half of what it is now… you only need to be concerned with clickable area and readability of the link text (province names).
The image will take time to load the first time someone visits, and won’t appear at all for others, so style your anchor text appropriately (including :focus states). Know it likely won’t work well if at all on mobiles (depending on how they deal with cursors or if they do touch). IE6 will need some coddling with heights of the anchors if you use absolute positioning as I did.
Good idea that image map