Creating a map of United States and counties with rollovers

I am looking to making an image map that will allow for rollovers, but the kicker is that when the user rolls over a State, only that state image changes, not the entire image, therefore I don’t have to expect the user to load a ton of images.

I have an example I did, but it replaces one 600px image with another.  Roll over Texas.
To do this I used an EPS Illustrator file exported to Image Ready.

One example of what I want to do is found at

I am looking for a program that will do this and can be used repeated as I have to do all the counties in 6 states.

Who is Participating?
I suggest you take a look at MapServer
It's an application that is specifically designed to take GIS data and render it to web-friendly formats.

Here's an example of an interactive web map created from GIS data using this system.

There are a number of ways you could go about this, with Flash, rollovers, etc. The fastest, easiest way I can think of would be to produce your map of the states, as you have, and place it as a background image. Then, using an imagemap, do rollovers for the states you want to highlight, swapping a transparent image for one that's all transparent except the state you are highlighting. That should make your image sizes much smaller, except for the background image. You might also use a bit of Javascript to pre-load the rollover images so there's no delay when they put their mouse over the state.

The easiest solution for me would be Flash.
However, it's also the most expensive, and well, if you've never tried flash, it'd be a though first-time job.

Why would I use Flash?
Flash doesn't have the 'rectangular problem'.
If you want to use roll-over images, you can only use rectangular area's, right?
So, if you try 2 states next to eachother, it's possible you'll get a wrong one if you roll-over the border.
Flash doesn't have that.
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

> Flash doesn't have the 'rectangular problem'.
> If you want to use roll-over images, you can only use rectangular area's, right?

Er, wrong, actually. You can use <imagemap shape="polygon">. In fact, that's what the example the asker provided does. I don't think he wants a different medium, I think he wants a way to streamline the process of generating the maps, which in this case probably means some sort of GIS-based solution.



hmmmz, you're right :o

Meh, imagemaps, don't really sue 'em a lot.

Well, uurhm, forget my previous comment.
Allthough, if I had the right images (and knew how to put those states together), I could make this in Flash in 15 minutes...
Way easier, but, indeed, not the question.
If you happen to have ArcInfo/ArcGIS, or know someone who has it, this might be handy. 
It's a set of scripts to generate imagemaps from GIS data automatically.

Or you could always cough up $300 for MapPoint...

Have  any of you tried google earth? Its wonderful
so this gave me the idea that
Google also has map creators
Google Map Creator makes thematic mapping simple

A really simple tool to make your own google maps to add to your website.

hope they help you and they a free too.

jason94024  your post is now last year :)
 any feedback on your progress  or have you abandoned us?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.