I am very new to this and only know basic html and css ocding at the moment. Of course I wish to change this.
I want to make an interactive map. For example, South America. There are 12 countries in South America. I want to be able to make the map clickable. Also I would like to make it so that when you put your mouse over a country the name appears. It could be on the map or in a little pop up box.
I have seen a way to do this. It involved fireworks and Flash8. I have neither and I dont have the money for these.
Is there a way to do this without these? Is there free software I can aquire to do this with flash? Can I do it with something like javascript/css/html?
I need about 10 maps in total. The number of clickable areas on the maps will be 25 or less.
Any guidance is greatly appreciated. I am inexperienced but willing to learn and spend as long as necessary to do this. If it is a bit of a tedious job that is ok as well.
Hi,
You can create a map from an image, with clickable areas with html, see this page: Image map , of course, you can add id and class to use in css or javascript.
Hi,
You can create a map from an image, with clickable areas with html, see this page: Image map , of course, you can add id and class to use in css or javascript.
ok thanks a lot. Countries often have a very complex shapes, how would I find the co-ordinates?
Try with an image editor that shows the coords of your mouse on the picture, one of this editor is PhotoFiltre .
ok cool thanks a lot for your help.
Three last questions if possible
- Do you think a flash map would work better than this?
- Can you make it so that when your point your mouse over a paticular country it changed colour as well? So the whole map is orange for example. When you put your mouse over Brazil that country's colour changes to red.
- Will having a very long list of co-ordinates effect the map in a negative way? will it make it slow to use or laggy?
1. In a flash map you can add more effects.
2. Maybe its posible with javascript, or adding yellow opacity with css.
3. I don't know, i saw a html image map with 40 maps and it was working fine.
1. In a flash map you can add more effects.
2. Maybe its posible with javascript, or adding yellow opacity with css.
3. I don't know, i saw a html image map with 40 maps and it was working fine.
regarding 2 would this mean that as you run your mouse over a paticular area it becomes more/less opaque? If this is the case then I will be happy using this method
I don't know if it works, just try. It was just an ideea.
Thanks for the advice. I made a clickable map of South America pretty easily. I just need to find a way of making the countries light up (or change in some way) when you scroll over it. Also a way of making the country name pop up when you put your mouse over it.
Maps are what I do for a living....the following link is how you can create a free, and absolutely correct interactive map without having to use flash or any other difficult code strings:
With a little manipulation of the code it goves you, you can limit the map display to anywhere in the world. There are all sorts of help pages to guide you along.
BTW...ArcGIS is from ESRI...they are the world's leader in mapping software and web mapping development. I use several forms of their software (client and server side) everyday.
I work for Flashmaps. We are specialized in building just that kind of maps for all kind of organizations, including 25% the Fortune-50 companies. But don't worry, we also work for home-based businesses, our prices are very reasonable, it will cost you ten times more to build the maps yourself. We are now launching jquerymaps.com, where we offer pretty much the same interactivity as in Flash-based maps, but just using JavaScript and jQuery. Really neat, people are loving them, we are switching a lot of existing clients to this new solution. Check out this sample http://www.jquerymaps.com/showcase/001/ You can contact us at flashmaps.com
This online map editor allows you to build custom maps using ready-made flash map templates, or google map, or by using any JPG / PNG image (which they will convert to flash to make it interactive). There is also a windows version which you can download for using on your own PC.
Bookmarks