Although, this italian map created in css could not be of as much interest for international users as for the italian’s one, I will post anyway this example here to give you an idea for future use and maybe the creation of other country’s map.
This css italian map uses an image for each province positioned in an absolute way to the pixel to rebuild the complete italian map. The css property ‘opacity’ is used on the hover state of the links and render the relative information to the province visible using the property display.
css-menu-esempio-8.zip (110.3 KiB, 1,519 hits)
Tested with IE6, IE7, FF2, FF3, Safari 3, Opera 9 on Windows.
{ 3 comments… read them below or add one }
Very nice effect but how do you find the positions ?
Do you have a graphical tool or you just simply try different positions during hours ?
I want to do something quite similar with a world map so I prefer do it with a graphical way
Hi,
first, while cutting the images, I kept the full map underneath and took note of the x/y position of each image so to have a rough idea of their position.
While doing to coding instead I used the image of the full map adding it as a background image so to be sure that each part were at the right place, adjusting the value if necessary.
Very nice!
I think I’ll use the map, or my own version of it, when making a site about travelling to Italy.